English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 41 lectures (6h 50m) | 3.09 GB
Build a finance tracker app with Next 15, postgres, clerk, drizzle, typescript, shadcn, zod, react-hook-form + more!
Welcome to the Next.js 15 & PostgreSQL course! In this project-based course you’ll build NextCash, a robust finance application to track income and expenses, while mastering the tools and techniques in Next JS with a PostgreSQL database.
With step-by-step guidance, you’ll go beyond the basics to integrate cutting-edge technologies, ensuring you walk away with real-world skills that are immediately applicable in your projects.
What You’ll Learn:
- Next.js: Use the new file-based app router / directory while leveraging server and client components.
- Server Actions: Implement efficient server-side logic to handle your app’s data.
- TypeScript: Write clean, scalable, and type-safe code for the frontend and backend.
- PostgreSQL with Neon: Set up a hosted database to store income and expense data securely.
- Drizzle ORM: Simplify database interactions with a type-safe and developer-friendly ORM.
- Clerk Authentication: Integrate secure user authentication with ease.
- Zod Validation: Ensure data integrity with powerful schema validation.
- Shadcn UI & Tailwind CSS: Design a beautiful, modern UI with custom components and utility-first styling.
Table of Contents
Introduction
1 Introduction
2 Important! Read this before you begin the course (GitHub repo etc)
3 Udemy ratings and reviews
4 Helpful tools and resources for this course
5 Project setup
Implement auth
6 Create the top navbar
7 Set up clerk auth
8 Create test account and render user dropdown
Build the create new transaction functionality
9 Create the new transaction page
10 Implement route protection for all dashboard routes
11 Create the transaction form schema with zod
12 Render the first form fields
13 Finish rendering the remaining form fields
14 Create the postgres db on neon
15 Seed the database with categories data
16 Query for the categories data
17 Build the createTransaction server action
18 Finish the create transaction functionality
19 Handle error and success states for create transaction
Build the transactions page
20 Build out the basic transactions page UI
21 Query for the transactions data
22 Render the transactions data in a table
23 Query for the associated category data for a transaction
24 Implement the month and year filters for transactions
Build the edit transaction page
25 Create the edit transaction page and render the transaction form
26 Query for transaction and populate transaction form with default values
27 Finish the edit transaction functionality (updateTransaction server action)
28 Add the delete transaction UI
29 Create the deleteTransaction server action
30 Add custom error page for non-existent transactions
Build the main dashboard page
31 Add the recent transactions table
32 Query for the annual cashflow
33 Add the cashflow card and dyanmic loading data
34 Add the cashflow bar chart with recharts
35 Add the cashflow summary
Extras
36 Upload project to github
37 Deploy to vercel
38 Set up custom domain for clerk
39 BONUS!
Resolve the captcha to access the links!