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

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

Traversy Media via YouTube Direct link

- Balance Component

24 of 38

24 of 38

- Balance Component

Class Central Classrooms beta

YouTube playlists curated by Class Central.

Classroom Contents

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

Automatically move to the next video in the Classroom when playback concludes

  1. 1 - Intro
  2. 2 - Links & Docs
  3. 3 - Create Next App
  4. 4 - Layout File
  5. 5 - Neon Project Setup
  6. 6 - New Database & Role
  7. 7 - Neon SQL Editor Demo
  8. 8 - Prisma Setup & Schema
  9. 9 - User Model
  10. 10 - Transaction Model
  11. 11 - Generate Client & Migrate
  12. 12 - Database File
  13. 13 - Clerk Authentication Setup
  14. 14 - Header Component
  15. 15 - SignIn, SignOut & UserButton
  16. 16 - Save User To Neon Database
  17. 17 - Guest Component
  18. 18 - AddTransaction Component
  19. 19 - addTransaction Action
  20. 20 - Get & Validate User
  21. 21 - React Toastify Setup
  22. 22 - Save Transaction to Neon Database
  23. 23 - useRef To Clear Form
  24. 24 - Balance Component
  25. 25 - getUserBalance Action
  26. 26 - addCommas Utility Function
  27. 27 - Clerk Dashboard Users
  28. 28 - IncomeExpense Component
  29. 29 - getIncomeExpense Action
  30. 30 - TransactionList Component
  31. 31 - Transaction Type
  32. 32 - getTransactions Action
  33. 33 - TransactionItem Component
  34. 34 - Delete Button
  35. 35 - deleteTransaction Action
  36. 36 - Commas & Decimal Places
  37. 37 - Email/Password Test
  38. 38 - Vercel Deployment

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.