1. bun add or npm install drizzle-kit@latest -D (ensure the version in package.json is >= 0.21) 2. bun add or npm install drizzle-orm@latest 3. modify the drizzle.config.ts script:
import { config } from "dotenv"; import { defineConfig } from "drizzle-kit";
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!
CSS FIX:
add "./src/features/**/*.{js,ts,jsx,tsx,mdx}" to tailwind.config.ts:
I would like to express my heartfelt thanks to you for your incredibly valuable and inspiring lectures. Your lessons are not only easy to understand but also deeply insightful, allowing me to gain new knowledge and apply it effectively in practice. To me, Antonio, you are truly "number one" in this field – an amazing instructor whom I greatly admire.
However, I recently noticed that the lecture "Build a Finance SaaS Platform With Nextjs, React, Honojs with CSV Upload (2024)" has become a paid resource. Due to my current situation, I am unable to afford it, but I am eager to continue learning from this lecture. If possible, I kindly ask for your support in granting me free access to this lecture. I promise to make the most of this opportunity to learn and grow.
I sincerely hope for your support. Once again, thank you so much for the incredible value you’ve shared!
Hey Antonio, thanks for sharing such a big project with all in-depth knowledge! I've been following it and completed 8.38 hrs as of now but wanted to confirm one thing… the function getColumnIndex to handle the continue section in Import Transaction page seems to be redundant as it returns the same index as we get from the map function. Confirmed the same from my end, can you check on it once please?
Incredible teacher and developer. Love the way you take breaks to explain why and where you found the related documentation. It’s also concise and always valuable.
I aspire to explain my code/thoughts like this one day.
One question I have is if the app will be safe from hacking due to lack of user permission. I watched a video from Josh tried coding https://youtu.be/wh4kGL1EIGM?si=PMjn36tnZjC5zPTu where he talks about a Netflix developer who got hacked just because he didn't set correct user permissions from the user calling the API. That video gave me chills.
Hey, another question. Why wouldn't we insert the Header stuff inside of app/(dashboard)/components? Since this headers will be only responsible and used in dashboard? Or maybe adding a folder in ./components/dashboard.
Just curious to understand the logic behind it. Great tutorial!
hey i have one doubt. when you have clicked the upgrade button in 2:10 and then the transaction page arrives that transaction will be done by the customers or by the developers to get new features for developing the website
shadcn just made a new update and so shadcn-ui does not work anymore. I have tried doing just shadcn but that throws me error too maybe because I have made half of the project through through using shadcn-ui. now what changes do i need to make in order to install from shadcn. I am trying to install calendar and Popover. here is the error: Command failed with exit code 1: npm install react-day-picker@8.10.1 date-fns @radix-ui/react-slot
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
Hi Antonio! The project is brilliant, it helped me a lot … also your way of explaining is great :). I only have one doubt… when you deploy in vercel and open the application from a mobile and create a new transaction, the popover that contains the calendar to select the date does not open… I have tried to change the z-index of the styles, but it does not work … also it is only from the mobile because the web version in responsive mode works … is it the same for you?
TLDR: The speaker demonstrates how to build a finance SaaS platform using Nextjs, React, and Honojs, including CSV upload, data manipulation, and deployment to Versel.
00:00 🛠 Antonio builds a finance SaaS platform with CSV upload, Nextjs, React, and Honojs, covering authentication, route groups, middleware, and protection using Clerk.
01:30:09 🛠 Building a finance SaaS platform with Nextjs, React, Honojs, and CSV upload, including database connection, schema creation, error handling, and mobile/desktop layout adjustments.
03:07:54 📊 The speaker demonstrates building a finance SaaS platform with Nextjs, React, and Honojs, including creating reusable account forms, debugging issues, integrating with API, and adding functionality to data table components.
04:09:21 🛠 Learn how to build a finance SaaS platform using Nextjs, React, and Honojs with CSV upload, including implementing bulk delete functionality, creating confirmation modals, and modifying routes and schemas.
05:39:39 🛠 Learn how to build a finance SaaS platform with Nextjs, React, and Honojs, including CSV upload, creating API endpoints, and developing transaction forms.
07:22:45 🛠 Learn to build a finance SaaS platform with Nextjs, React, and Honojs, including CSV upload and troubleshooting.
08:24:32 📊 Build a finance SaaS platform with Nextjs, React, and Honojs, including CSV upload, data manipulation, and account selection for submission to the backend.
09:29:52 🛠 Learn to build a finance SaaS platform with Nextjs, React, and Honojs, including creating components, data charts, custom tooltips, filters, and deploying to Versel.
First of all – honest congratulations for all your experience and a huge 'thank you' for putting so many hours in creating this video (and the others). Highly (x3) appreciated!
Is there a continuation of this video, where you are (hopefully) showing the integration of Plaid, Lemon and Stripe? If yes – how can it be accessed? Is there any way to access the courses individually, besides paying the 300$ fee for all?
5:03:17: Does anyone knows, when I tried to delete an account after I've chosen the Edit then Delete button. I got an GET 404 Not Found Error by use-get-account.ts It seems like account is already been deleted but tried to get the account again then got the error. I tried to do some actions but all failed.
In case anyone is in the same situation: I had a problem with datepicker in the transaction form. it didn't open on FIrefox. I solved by removing <PopoverPrimitive.Portal> from popover.tsx
@codewithantonio nice videos. Till 3:28:00 it all good. when I enter new account name and click on create new account, I am getting an error "Failed to create account". Any help please?
I'm halfway through the course. Thank you, thank you, thank you! It's amazing, and I learn so much!
Opinion about Drizzle: I have never used it before, I have only used Prisma for my projects, and especially for relations, Prisma is a breeze, with Drizzle we had to do additional checks and stuff for relations to work, which is something that comes out of the box with Prisma. Maybe we can do it easier with Drizzle as well, I just haven't used it before, and I'm following the course.
hello codewithantonio and thank you for this wonderful tutorial. At 3:27:38, when creating an account, I get a 500 error with the following message in my editor's terminal: [TypeError: Response body object should not be disturbed or locked].
Hey Antonio. I ran into an issue when I log in as a different use, the GET request ends up briefly showing the data for the previous user, and it takes a few seconds or an action/click before the table refreshes to show the current user's data. Any ideas?
Am I the only one who's a bit baffled by the amount of reused code? No offense to Antonio, of course—the tutorial is amazing. I'm only halfway through the video; does he fix this?
41 comments
‼DRIZZLE UPGRADE & CSS / STYLING FIXES‼
1. bun add or npm install drizzle-kit@latest -D (ensure the version in package.json is >= 0.21)
2. bun add or npm install drizzle-orm@latest
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!
CSS FIX:
add "./src/features/**/*.{js,ts,jsx,tsx,mdx}" to tailwind.config.ts:
content: [
…
"./src/features/**/*.{js,ts,jsx,tsx,mdx}",
],
What time is the part with lemon Squeezy?
Is posible use Spring boot as Backend in this project?
"Hey there" – I think that sounds familiar 😉😉
Dear Antonio,
I would like to express my heartfelt thanks to you for your incredibly valuable and inspiring lectures. Your lessons are not only easy to understand but also deeply insightful, allowing me to gain new knowledge and apply it effectively in practice. To me, Antonio, you are truly "number one" in this field – an amazing instructor whom I greatly admire.
However, I recently noticed that the lecture "Build a Finance SaaS Platform With Nextjs, React, Honojs with CSV Upload (2024)" has become a paid resource. Due to my current situation, I am unable to afford it, but I am eager to continue learning from this lecture. If possible, I kindly ask for your support in granting me free access to this lecture. I promise to make the most of this opportunity to learn and grow.
I sincerely hope for your support. Once again, thank you so much for the incredible value you’ve shared!
Best regards,
Dương Linh Chi
Hey Antonio, thanks for sharing such a big project with all in-depth knowledge! I've been following it and completed 8.38 hrs as of now but wanted to confirm one thing… the function getColumnIndex to handle the continue section in Import Transaction page seems to be redundant as it returns the same index as we get from the map function. Confirmed the same from my end, can you check on it once please?
I could not find any cryptocurrency dashboard that real time stock market is used, Please create a real usecase of realtime data
Thankyou Antonio.
Just finished the project and want to say a huge thank you. This project was amazing!
the best tutorial for nextjs
Incredible teacher and developer. Love the way you take breaks to explain why and where you found the related documentation. It’s also concise and always valuable.
I aspire to explain my code/thoughts like this one day.
One question I have is if the app will be safe from hacking due to lack of user permission. I watched a video from Josh tried coding https://youtu.be/wh4kGL1EIGM?si=PMjn36tnZjC5zPTu where he talks about a Netflix developer who got hacked just because he didn't set correct user permissions from the user calling the API. That video gave me chills.
Hey, another question. Why wouldn't we insert the Header stuff inside of app/(dashboard)/components? Since this headers will be only responsible and used in dashboard? Or maybe adding a folder in ./components/dashboard.
Just curious to understand the logic behind it. Great tutorial!
hey i have one doubt. when you have clicked the upgrade button in 2:10 and then the transaction page arrives that transaction will be done by the customers or by the developers to get new features for developing the website
shadcn just made a new update and so shadcn-ui does not work anymore. I have tried doing just shadcn but that throws me error too maybe because I have made half of the project through through using shadcn-ui. now what changes do i need to make in order to install from shadcn. I am trying to install calendar and Popover. here is the error: Command failed with exit code 1: npm install react-day-picker@8.10.1 date-fns @radix-ui/react-slot
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: finix@0.1.0
npm error Found: date-fns@4.1.0
npm error node_modules/date-fns
npm error date-fns@"^4.1.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer date-fns@"^2.28.0 || ^3.0.0" from react-day-picker@8.10.1
npm error node_modules/react-day-picker
npm error react-day-picker@"8.10.1" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with –force or –legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:UsersADMINAppDataLocalnpm-cache_logs2024-10-20T22_53_40_576Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:UsersADMINAppDataLocalnpm-cache_logs2024-10-20T22_53_40_576Z-debug-0.log
is that connecting bank accounts also work for indian bank or in india ?
is that connecting bank accounts also work for indian bank or in india ?
How can I make it so when I add new account / transaction it goes top of the table not bottom?
Hi Antonio! The project is brilliant, it helped me a lot … also your way of explaining is great :). I only have one doubt… when you deploy in vercel and open the application from a mobile and create a new transaction, the popover that contains the calendar to select the date does not open… I have tried to change the z-index of the styles, but it does not work … also it is only from the mobile because the web version in responsive mode works … is it the same for you?
TLDR: The speaker demonstrates how to build a finance SaaS platform using Nextjs, React, and Honojs, including CSV upload, data manipulation, and deployment to Versel.
00:00 🛠 Antonio builds a finance SaaS platform with CSV upload, Nextjs, React, and Honojs, covering authentication, route groups, middleware, and protection using Clerk.
01:30:09 🛠 Building a finance SaaS platform with Nextjs, React, Honojs, and CSV upload, including database connection, schema creation, error handling, and mobile/desktop layout adjustments.
03:07:54 📊 The speaker demonstrates building a finance SaaS platform with Nextjs, React, and Honojs, including creating reusable account forms, debugging issues, integrating with API, and adding functionality to data table components.
04:09:21 🛠 Learn how to build a finance SaaS platform using Nextjs, React, and Honojs with CSV upload, including implementing bulk delete functionality, creating confirmation modals, and modifying routes and schemas.
05:39:39 🛠 Learn how to build a finance SaaS platform with Nextjs, React, and Honojs, including CSV upload, creating API endpoints, and developing transaction forms.
07:22:45 🛠 Learn to build a finance SaaS platform with Nextjs, React, and Honojs, including CSV upload and troubleshooting.
08:24:32 📊 Build a finance SaaS platform with Nextjs, React, and Honojs, including CSV upload, data manipulation, and account selection for submission to the backend.
09:29:52 🛠 Learn to build a finance SaaS platform with Nextjs, React, and Honojs, including creating components, data charts, custom tooltips, filters, and deploying to Versel.
My dear brother.
Go ahead
Hello, Antonio!
First of all – honest congratulations for all your experience and a huge 'thank you' for putting so many hours in creating this video (and the others). Highly (x3) appreciated!
Is there a continuation of this video, where you are (hopefully) showing the integration of Plaid, Lemon and Stripe? If yes – how can it be accessed? Is there any way to access the courses individually, besides paying the 300$ fee for all?
5:03:17: Does anyone knows, when I tried to delete an account after I've chosen the Edit then Delete button.
I got an GET 404 Not Found Error by use-get-account.ts
It seems like account is already been deleted but tried to get the account again then got the error.
I tried to do some actions but all failed.
You can click CTRL + Space to get intelesnse instead of deleting and retyping a letter
I'm getting "404 | This page could not be found" error while setting up api routing. Any guidance regarding the same will be appreciated. Thanks!
in npm you have to manually add sheet and install it components you can use chatgbt for any problems stick to it will work 😂❤
In case anyone is in the same situation:
I had a problem with datepicker in the transaction form.
it didn't open on FIrefox. I solved by removing <PopoverPrimitive.Portal> from popover.tsx
4:19:08 My today's timestamps completed successfully. Thank you, Antonio day.
@codewithantonio nice videos. Till 3:28:00 it all good. when I enter new account name and click on create new account, I am getting an error "Failed to create account". Any help please?
I'm halfway through the course. Thank you, thank you, thank you! It's amazing, and I learn so much!
Opinion about Drizzle: I have never used it before, I have only used Prisma for my projects, and especially for relations, Prisma is a breeze, with Drizzle we had to do additional checks and stuff for relations to work, which is something that comes out of the box with Prisma. Maybe we can do it easier with Drizzle as well, I just haven't used it before, and I'm following the course.
This awesome guys❤
hello codewithantonio and thank you for this wonderful tutorial. At 3:27:38, when creating an account, I get a 500 error with the following message in my editor's terminal: [TypeError: Response body object should not be disturbed or locked].
POST /api/accounts 500 in 554ms
Any ideas for a solution?
what an explanation ❤❤
I need Help, I get error when I try to add the following;
bunx shadcn-ui@latest add sheet
error: could not determine executable to run for package shadcn-ui
Hey Antonio. I ran into an issue when I log in as a different use, the GET request ends up briefly showing the data for the previous user, and it takes a few seconds or an action/click before the table refreshes to show the current user's data. Any ideas?
@codewithantonio i have an issue with the dashboard chart. i cant seem to get the income and expenses lines showing on the chart.
Am I the only one who's a bit baffled by the amount of reused code? No offense to Antonio, of course—the tutorial is amazing. I'm only halfway through the video; does he fix this?
How can i make a mobile app from this without writing the code again
I can't install zod it's say up to date in npm
thank you!!
3:04