YoVDO

Build an Expense Tracker with Next.js, TypeScript, Prisma, Neon, and Clerk

Offered By: Traversy Media via YouTube

Tags

Next.js Courses Typescript Courses Database Management Courses Full Stack Development Courses Expense Tracking Courses Prisma Courses Server Actions Courses Clerk Courses

Course Description

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Build a full-stack expense tracker application using Next.js Server Actions, TypeScript, Prisma, Neon, and Clerk. Learn to set up a Neon database, create Prisma models, implement Clerk authentication, and develop components for adding, displaying, and deleting transactions. Master server-side actions for user management, transaction handling, and balance calculations. Explore advanced features like React Toastify for notifications, utility functions for data formatting, and deploy the finished application to Vercel.

Syllabus

- Intro
- Links & Docs
- Create Next App
- Layout File
- Neon Project Setup
- New Database & Role
- Neon SQL Editor Demo
- Prisma Setup & Schema
- User Model
- Transaction Model
- Generate Client & Migrate
- Database File
- Clerk Authentication Setup
- Header Component
- SignIn, SignOut & UserButton
- Save User To Neon Database
- Guest Component
- AddTransaction Component
- addTransaction Action
- Get & Validate User
- React Toastify Setup
- Save Transaction to Neon Database
- useRef To Clear Form
- Balance Component
- getUserBalance Action
- addCommas Utility Function
- Clerk Dashboard Users
- IncomeExpense Component
- getIncomeExpense Action
- TransactionList Component
- Transaction Type
- getTransactions Action
- TransactionItem Component
- Delete Button
- deleteTransaction Action
- Commas & Decimal Places
- Email/Password Test
- Vercel Deployment


Taught by

Traversy Media

Related Courses

NestJs Course for Beginners - Create a REST API
freeCodeCamp
Full Stack Web Development in the Cloud Course - Svelte, Postgres, Vercel, Gitpod
freeCodeCamp
Azure SQL - October 2021 New Updates and Features
Microsoft via YouTube
Remix Crash Course - Full Stack React
Traversy Media via YouTube
API Reading and Updating - Sending Dynamic Route Parameters from Remix to Prisma
Linode via YouTube