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

Let's build a full stack app with some of my favorite technologies:

Full Code Repo:

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

[MasculineMatt]

Sir you make it so easy to understand. Thank you so much. I have been a Full Stack Developer for 6 years and I am still learning thanks to you.

[themanlyman]

You're such a good teacher even I who have 0 experience in react or typescript can follow along very easily

[PartneredBrands]

Respect! I have learned from you so much over the years. You're truly a gift to us!!!

[chrispanda]

Damn Brad, you're looking good! Working out I see, good for you man. Keep up the good work and thanks for the tutorial!

[N-eg]

i watch this legend like everyday, Brad i wish i meet you someday :(

[codeaperture]

You made me a developer and this is a must watch.. 😮 I rarely watch YouTube

[LumbreraEnMiCamino]

Awesome, congratulations 🎉🎉. We want to see more projects like this in Nextjs 🎉🎉.

[FutureAIDev]

Ooh this could be interesting, I could track my spending and get my finances back under control, and simultaneously give myself a non-zero project portfolio!

[webdevluc]

Really cool project tutorial Brad. Kudos to you for generously sharing it for free

[shrdn]

Love your videos Brad. But just like many others, I'm getting really concerned about vendor lock-in (even with generous free-tiers etc). Would love to see a 100%"vendor free" project.

[ivanivanovik]

Love your next js projects, any chances you make some next js - laravel project maybe add some sweet breeze to it 😊

[ahmedhalloub]

Very graceful, you made it look very easy.

[vectorxdev]

Awesome, congratulations.
Completed

[SouhailEntertainment]

00:00:00 - Introduction and Sponsorship
00:00:30 - Project Overview
00:01:32 - Setting Up Next.js Project
00:02:07 - Resources and Initial Setup
00:03:48 - Creating Next.js App
00:04:25 - Initial Project Cleanup
00:05:44 - Setting Up Layout and Global CSS
00:07:41 - Setting Up Neon Database
00:10:57 - Connecting Next.js App to Neon Database
00:15:09 - Creating Prisma Models
00:18:44 - Running Prisma Migrations
00:22:21 - Creating Prisma Client
00:24:25 - Setting Up Clerk for Authentication
00:27:32 - Initializing Clerk Middleware
00:28:12 - Wrapping App with Clerk Provider
00:29:32 - Creating Header Component
00:31:00 - Implementing Sign In/Sign Out Buttons
00:32:28 - Syncing Clerk Users with Database
00:35:10 - Creating Check User Utility Function
00:40:37 - Displaying Welcome Message
00:41:47 - Creating Add Transaction Component
00:45:19 - Setting Up Server Action for Adding Transactions
00:51:41 - Setting Up Form Validation and Error Handling
00:55:55 - Saving Transactions to Database
01:01:18 - Displaying User Balance
01:06:04 - Displaying Income and Expenses
01:10:11 - Creating Transaction List and Transaction Item Components
01:14:21 - Setting Up Delete Transaction Functionality
01:17:24 - Formatting Currency Display
01:19:52 - Testing Email and Password Signup
01:21:48 - Deploying to Vercel
01:24:13 - Conclusion and Final Thoughts

[wolfie]

Thank you very much brad. Why would you use Server Actions over API routes ? Do you think its better ?

[CerkieGaming]

I am currently going through your HTML, CSS and JS courses and after watching this it feels like I will never get to the stage where I could do this on my own. It seems so complex would it be possible to move in to web development at the age of 35. (PS you're a great teacher)

[AntNZ]

Awesome tutorial Brad. Just wondering what is the vscode extension you used to display console log output next to the relevant code blocks?

[justinhiggs]

Brad & fellow coders, you cannot just set your Clerk property to production. You have to have an actual domain that you control, with access to DNS. If you go to your Clerk project and click "+ Create production instance", it tells you right there that a basic demo deployment on Vercel doesn't work because you need an actual domain name and DNS access. Obviously, if you don't mind shelling out $20/year for a domain for a random demo project, go for it, but for those of us who don't want to or can't afford to do that, we'll have to just leave the Clerk project in development mode. Not sure if it'll stop working on the Vercel deployment but probably should have a disclaimer at the beginning of this video about it.

[vladimir_dev]

54:30 isn't an empty string falsy? Shouldn't if (!textValue) cover that as well?

[mypreciouz]

Thanks Brad, I watched the whole video.
I am fairly new to web development and I have 2 questions
1. Does this app count as full stack?
2. Does vercel have full stack or backend app deployment options? If it has, would you prefer it?