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

This podcast episode thoroughly guides listeners through the process of building a full-stack application using Next.js, integrating various tools and libraries, such as Shadcn UI, Clerk for authentication, Drizzle ORM for database management, and React Query for data handling, offering practical insights into every step from project setup to deployment on Vercel, ultimately showcasing the power of modern web development practices.

Outlines

Sign in to continue reading, translating and more.

Open full episode in Podwise

Code With Antonio

Building a Finance Manager Web App with Next.js and Shadcn UI

Setting Up Next.js and Shadcn UI for the Project

Implementing Authentication with Clerk in Next.js

Styling the Sign-In and Sign-Up Pages with Tailwind CSS

Building API Routes with Next.js and Hono

Protecting API Routes with Clerk Authentication Middleware

Organizing API Routes with Separate Files and Controllers

Building the Dashboard Layout and Header

Implementing Navigation and Mobile Drawer

Connecting to Neon Postgres Database with Drizzle ORM

Creating Migration Scripts and Running Database Studio

Building API Endpoints for Accounts Entity

Implementing React Query for Data Fetching and Mutations

Building the Accounts Page with Data Table and Actions

Creating a Reusable Account Form Component

Implementing CSV File Upload and Data Mapping

Creating a Confirmation Dialogue for CSV Import

Building the Categories Entity and Page

Creating the Transactions Entity and Schema

Building API Endpoints for Transactions Entity

Creating Reusable Query Hooks for Transactions

Building the Transactions Page and New Transaction Drawer

Creating a Reusable Transaction Form Component

Implementing CSV File Upload and Data Mapping for Transactions

Creating a Confirmation Dialogue for CSV Import and Handling Continue

Building the Overview Page with Summary Statistics

Creating Data Cards and Count Up Components

Implementing Charts with Recharts

Creating Filters for Date Range and Account Selection

Deploying the Application to Vercel

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

Code With Antonio

00:00Building a Finance Manager Web App with Next.js and Shadcn UI

Building a Finance Manager Web App with Next.js and Shadcn UI

05:03Setting Up Next.js and Shadcn UI for the Project

Setting Up Next.js and Shadcn UI for the Project

13:02Implementing Authentication with Clerk in Next.js

Implementing Authentication with Clerk in Next.js

21:41Styling the Sign-In and Sign-Up Pages with Tailwind CSS

Styling the Sign-In and Sign-Up Pages with Tailwind CSS

42:01Building API Routes with Next.js and Hono

Building API Routes with Next.js and Hono

59:54Protecting API Routes with Clerk Authentication Middleware

Protecting API Routes with Clerk Authentication Middleware

1:06:02Organizing API Routes with Separate Files and Controllers

Organizing API Routes with Separate Files and Controllers

1:10:50Building the Dashboard Layout and Header

Building the Dashboard Layout and Header

1:19:21Implementing Navigation and Mobile Drawer

Implementing Navigation and Mobile Drawer

1:40:54Connecting to Neon Postgres Database with Drizzle ORM

Connecting to Neon Postgres Database with Drizzle ORM

1:53:29Creating Migration Scripts and Running Database Studio

Creating Migration Scripts and Running Database Studio

2:06:10Building API Endpoints for Accounts Entity

Building API Endpoints for Accounts Entity

2:18:03Implementing React Query for Data Fetching and Mutations

Implementing React Query for Data Fetching and Mutations

2:38:27Building the Accounts Page with Data Table and Actions

Building the Accounts Page with Data Table and Actions

3:10:51Creating a Reusable Account Form Component

Creating a Reusable Account Form Component

3:58:53Implementing CSV File Upload and Data Mapping

Implementing CSV File Upload and Data Mapping

4:39:42Creating a Confirmation Dialogue for CSV Import

Creating a Confirmation Dialogue for CSV Import

5:04:03Building the Categories Entity and Page

Building the Categories Entity and Page

5:31:14Creating the Transactions Entity and Schema

Creating the Transactions Entity and Schema

5:51:16Building API Endpoints for Transactions Entity

Building API Endpoints for Transactions Entity

6:10:37Creating Reusable Query Hooks for Transactions

Creating Reusable Query Hooks for Transactions

6:39:49Building the Transactions Page and New Transaction Drawer

Building the Transactions Page and New Transaction Drawer

7:14:15Creating a Reusable Transaction Form Component

Creating a Reusable Transaction Form Component

7:54:06Implementing CSV File Upload and Data Mapping for Transactions

Implementing CSV File Upload and Data Mapping for Transactions

8:39:42Creating a Confirmation Dialogue for CSV Import and Handling Continue

Creating a Confirmation Dialogue for CSV Import and Handling Continue

9:08:37Building the Overview Page with Summary Statistics

Building the Overview Page with Summary Statistics

9:44:56Creating Data Cards and Count Up Components

Creating Data Cards and Count Up Components

10:16:04Implementing Charts with Recharts

Implementing Charts with Recharts

10:56:06Creating Filters for Date Range and Account Selection

Creating Filters for Date Range and Account Selection

11:09:03Deploying the Application to Vercel

Deploying the Application to Vercel