Build a Finance SaaS Platform With Nextjs, React, Honojs with CSV Upload (2024)

In this 11 hour tutorial, you will learn how to create your very own Finance SaaS Platform with ability to track your income and expenses, categorize transactions and assign them to specific accounts, as well as how to import transactions using a CSV file, connect to your bank account using Plaid, and monetize this product using Lemon Squeezy.

Key Features:
- 📊 Interactive financial dashboard
- 🔁 Changeable chart types
- 🗓 Account and date filters
- 💹 Detailed transactions table
- ➕ Form to add transactions
- 🧩 Customizable select components
- 💵 Income and expense toggle
- 🔄 CSV transaction imports
- 🪝 State management via Tanstack React Query
- 🔗 Bank account connections with Plaid
- 💳 Premium upgrades via Lemon Squeezy
- 🔐 Authentication via Clerk (Core 2)
- 🗑 Bulk delete and search in transactions
- ⚙️ Bank disconnection and subscription management
- 👤 User settings customization
- 🎨 Styled with TailwindCSS and Shadcn UI
- 💾 PostgreSQL & Drizzle ORM
- 🚀 Deployed on Vercel

Timestamps
00:00 Intro & Demo
04:53 Additional information
05:02 Project setup
13:01 Authentication
01:10:49 Header component
01:46:27 Drizzle ORM & Neon Database
02:10:50 Accounts GET API
02:43:26 Accounts POST API
03:29:03 Data table component
04:00:41 Accounts bulk delete
04:27:12 Accounts edit
05:03:44 Categories (API + UI)
05:32:13 Transactions API
06:10:36 Transactions hooks
06:22:49 Transactions form
07:14:44 Transactions page
07:54:10 Transactions CSV import
08:43:09 Transactions account select
08:56:40 Summary API
09:28:52 Dashboard cards
09:58:36 Dashboard chart
10:26:04 Dashboard pie
10:45:05 Date & account filters
11:07:08 Deployment
11:12:59 Additional content

[codewithantonio]

‼Drizzle instructions to upgrade to lastest version (extremely easy):‼

3. modify the drizzle.config.ts script:

import { config } from "dotenv";
import { defineConfig } from "drizzle-kit";

config({ path: ".env.local" });

export default defineConfig({
schema: "./db/schema.ts",
dialect: "postgresql",
dbCredentials: {
url: process.env.DATABASE_URL!,
},
verbose: true,
strict: true,
});

4. modify the package.json scripts
"db:generate": "drizzle-kit generate",
"db:migrate": "drizzle-kit migrate",
"db:studio": "drizzle-kit studio"

5. Remove migrate.ts script, we do not need it anymore!
6. Remove "drizzle" folder with migrations and try running:
bun run db:generate
bun run db:migrate

7. Thats it!

[klutzy_]

You are a God gifted developer man! No one in youtube, even in paid courses provides content like you. You deserve every bit of appreciations!!

[hritiksharma]

Please build an alternative to calendly, where someone can directly schedule a google meet with you from the available calendar slot.
This is not being done by any other youtuber, thanks

Please upvote this comment so th1at Antonio can see this.
Thanks for the amazing work man!!

[gambomaster]

This guy releases tutorials like this without breaking any sweat. 😲😲😲

[itsolidude]

I'm always so hyped for your videos! I would love to see the UI and UX process of your projects.

[JC-jzrx]

your tutorials are the only ones i finish, i already have a full time job in development but i find your videos to be a quick an easy way to get some reference and second opinions on using a new piece of technology i might want to incorporate into a project at work

[mohammadabbas]

No web series this weekend, will binge watch this

[itachiuchihareal]

Unfortunately I have exams 😢
But I will watch it 😎😎

[ikennamanagwu]

You and js mastery youtube channel are the best channels for js on youtube hands down

[smartbeeinc]

Oh God, Antonio! Do you know I started learning NextJs because of you? I couldn't make all this amazing stuff pass by. Thank you so much for all you do

[HenokGebresenbet]

antonio always shows each and every step in his tutorial we call this Project Based Tutorial

[nelsonndukwe]

Been waiting for this project since I first saw the preview and I must say. Thank you Antonio❤

[agadaFrancisLouis]

You’re out of this world, bro!🤯🔥👏🏾👏🏾👏🏾❤️

[anonymouseverx]

Honestly, from the bottom of my heart, I can leave my entire YouTube subscriptions channel except You, Antonio. Thank you so much for everything. ❤

[escapepeterpan]

bro I'm thankful, may God reward you with good for these well-explained building something guide.

[mohdali-yqgq]

One of the greatest course I have ever gone through on YouTube channel!!

[rrahll]

You should have more subscribes! Thank you for publishing full project tutorials!

[isac]

Let's go!! After a long wait!! I'll be building it in a couple of weeks, great work Antonio! 🎉

[S.AdithyaVardhan]

2:57:35 Antonio i laughed like a hell man when our vocals changed .. i just love uh man 😂❤

[chuo]

The confirmation dialog at 4:26:35 is one of the most badass pieces of code you have shared