Full App Build - Dev to Deployment - Next.js, Prisma, Neon & Clerk

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