Let's build a full stack app with some of my favorite technologies:
Neon (Sponsor) - https://fyi.neon.tech/traversy
Clerk (Sponsor) - https://go.clerk.com/BsG2XQJ
Prisma - https://www.prisma.io/
Next.js - https://nextjs.org/
Full Code Repo:
https://github.com/bradtraversy/expense-tracker-nextjs
Timestamps:
0:00 - Intro
2:04 - Links & Docs
3:24 - Create Next App
5:58 - Layout File
7:54 - Neon Project Setup
9:45 - New Database & Role
10:56 - Neon SQL Editor Demo
14:18 - Prisma Setup & Schema
15:20 - User Model
18:06 - Transaction Model
20:19 - Generate Client & Migrate
22:25 - Database File
25:29 - Clerk Authentication Setup
28:21 - Header Component
29:35 - SignIn, SignOut & UserButton
32:29 - Save User To Neon Database
42:26 - Guest Component
44:58 - AddTransaction Component
50:48 - addTransaction Action
59:36 - Get & Validate User
1:01:47 - React Toastify Setup
1:04:08 - Save Transaction to Neon Database
1:07:53 - useRef To Clear Form
1:09:36 - Balance Component
1:11:17 - getUserBalance Action
1:15:36 - addCommas() Utility Function
1:19:03 - Clerk Dashboard Users
1:19:49 - IncomeExpense Component
1:21:26 - getIncomeExpense Action
1:27:06 - TransactionList Component
1:29:22 - Transaction Type
1:30:40 - getTransactions Action
1:34:00 - TransactionItem Component
1:38:28 - Delete Button
1:41:07 - deleteTransaction Action
1:45:07 - Commas & Decimal Places
1:47:30 - Email/Password Test
1:48:35 - Vercel Deployment