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

[@codewithantonio]

‼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}", ],

[@GarySu-zc6px]

🐐

[@rezamohammadi1210]

Thank you so much I was watching your previous turourial you saved alot of time

[@codewithtonynguyen]

Thank you so much.

[@brendanmilton5025]

When trying to follow and entering: npm install drizzle-orm@latest I get: npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: balance-book-app@0.1.0 npm ERR! Found: react@18.3.1 npm ERR! node_modules/react npm ERR! peer react@">=18" from @clerk/clerk-react@5.0.4 npm ERR! node_modules/@clerk/clerk-react npm ERR! @clerk/clerk-react@"5.0.4" from @clerk/nextjs@5.0.8 npm ERR! node_modules/@clerk/nextjs npm ERR! @clerk/nextjs@"^5.0.8" from the root project npm ERR! peer react@">=18" from @clerk/nextjs@5.0.8 npm ERR! node_modules/@clerk/nextjs npm ERR! @clerk/nextjs@"^5.0.8" from the root project npm ERR! 31 more (@clerk/shared, @radix-ui/react-compose-refs, ...) npm ERR! npm ERR! Could not resolve dependency: npm ERR! drizzle-orm@"0.30.10" from the root project npm ERR! npm ERR! Conflicting peer dependency: react@18.2.0 npm ERR! node_modules/react npm ERR! peer react@"18.2.0" from react-native@0.74.1 npm ERR! node_modules/react-native npm ERR! peer react-native@">0.73.0" from @op-engineering/op-sqlite@6.0.1 npm ERR! node_modules/@op-engineering/op-sqlite npm ERR! peerOptional @op-engineering/op-sqlite@">=2" from drizzle-orm@0.30.10 npm ERR! node_modules/drizzle-orm npm ERR! drizzle-orm@"0.30.10" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR!

[@brendanmilton5025]

Fixed with npm i react@latest react-dom@latest

[@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!!

[@codewithantonio]

Thank you so much 😀

[@thiagomenezes8975]

That's true. Super Thanks from Brazil

[@Amvflix7]

Yeah, I second this

[@thivankawaduge509]

So True Thank you so much for all your yt tutorials I have been learning a lot from you

[@JC-jz6rx]

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

[@AJPHIL-bt4me]

I just need to know who hurt Antonio, Bro u deserve 10 million followers, this content is crazy and scary. May you get all the KZbin money in the World

[@anonymouseverx]

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

[@ikennamanagwu9646]

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

[@gambomaster]

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

[@codewithantonio]

Thank you for the kind words

[@gambomaster]

@@codewithantonio 🙏🙏🙏

[@jonathanpena3078]

The answer is simple. He is not working alone, he must have a small team behind him helping. and also uses many tools to speed up development.

[@_lessthanzero_]

​@@jonathanpena3078 Whatever may be the reason , something like this being free is mind-blowing 🤯

[@apexyu164]

like what tools?

[@AjaySingh-jz8qx]

A year ago I was null in web development even I did'nt able to write the css from my own Now following this dude antonio I reached at intermediate level and working on my own side project all thanks to Antonio and its efforts😊

[@hritiksharma4944]

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!!

[@alwaisy]

study cal com . It's already enough to learn

[@itsolidude2353]

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

[@dinhjdev1023]

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.

[@stevecastaneda]

Love seeing you pull up docs, learn from errors, and discuss your thought process around your choices. I'm 21% done, trying to knock out a section a day. Love your work!

[@cb73]

Love how you organized your files by “feature”. I’m always thinking about better ways of organizing files to make life better for other developers in the future who have to work on my code and this really hits the spot.

[@codewithantonio]

Yes, this structure is from Kent C Dodds I believe. I would like to use it more, and I believe i couldve used it even more here

[@vittoriomorellini1939]

You are simply incredible. I'm not able to arrive at the half of a your tutorial, that you create another one more accurated and more technological

[@matheusantonio174]

Bro, i was able to finish this course just now! what a course bro! Thank you for sharing it with the community 💪

[@codewithantonio]

amazing work!!

[@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

[@maharshiguin7813]

same! i started learning react and nextjs beccause i wanted to follow along antonio's videos

[@is5ac]

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

[@HenokGebresenbet]

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

[@alijawwad1763]

Great tutorial! Thank you so much for this bomb. One small recommendation is that before developing a new feature show us the demo from the production version so we can get a more clear idea of what we are going to develop. Thanks once again!!

[@Percepatarakorn]

Just finished the project and want to say a huge thank you. This project was amazing!

[@codewithaditya-w6q]

how much time did it took to complete this project ?

[@nelsonndukwe7274]

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

[@codewithantonio]

Hope you like it!

[@matheusantonio174]

Bro, i have been waiting for this video for almost 2 weeks! you rock man 🔥

[@oserefemhenativie6681]

Finally 🎉🎉🎉. I've been waiting patiently for this. Thanks a lot, Anthonio!

[@mohammadabbas1623]

No web series this weekend, will binge watch this

[@codewithantonio]

Happy to hear that!

[@agadaFrancisLouis]

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

[@codewithantonio]

Thank you!

[@SuperPompey77]

I just finished this complete build on your platform and it was such a joy and pleasure. This is an absolutely brilliant build and great learning which i thoroughly enjoyed. I tried connecting to your discord but wasn't able to but I think that maybe a problem on my end which I will try and troubleshoot later. The only problem that I had with this build was the categories pie chart on the overview page which does not increase my % on pie chart. But ill probably try and figure that out on my own, unless someone else had the problem as well. Antonio I want to thank you for your excellent tutorial and the Bonus content that you have on your platform are absolutely worth it.

[@earnstein7607]

Oh Antonio , how awesome and generous you are. Thanks for this amazing tutorial ❤

[@codewithantonio]

My pleasure!

[@lala-wb7gi]

A stunning and valuable project completed within 11 hours. I am amazed by your commitment ,🤙 rock man

[@dongitonga2742]

Thank you man. this is the best course ive seen on youtube. learnt so much from this that ive been able to implement and will implement to more projects.

[@codewithantonio]

Great to hear!

[@GamingVibes-iq8yj]

I have already completed the airbnb tutorial and now watching the LMS tutorial. I don't have words to thank you. you are an amazing creator. one thing I would request to is to use custom things like NextAuth instead of premade like clerk etc.

[@chuo129]

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

[@codewithantonio]

i love it so much, i use it in the project i am currently building as well. its so nice to use.

[@itachiuchiha1real]

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

[@Piyush_gamer-n2l]

Same here bro

[@lalitsingh-de1md]

India?

[@lalitsingh-de1md]

Indian?

[@itachiuchiha1real]

@@lalitsingh-de1md no Morocco

[@escapepeterpan]

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

[@pranitbhole]

hello, have you completed this project , i am having some difficulty in initial clerk routing , afterSignOutURL shows depricated and after signing in my page is not getting redirected to the (dashboard)page @escapepeterpan @codewithantonio

[@abhishekjaiswal3233]

Wonderful, wonderful job Antonio. You are as awesome as it gets. Hope you reach many more milestones on KZbin.

[@Iamtheinevitable]

Really appreciate the quality you courses offer I’ve been learning a lot and even adding extra features personally. Much love 💪💯

[@DouglasHenrique-vn8uw]

I have never seen tutorials as good and complete as yours before. Thank you very much for sharing knowledge!

[@dissolvesoftware]

This is amazing, thank you Antonio. I wish I had such resources when I began learning how to code

[@logicmonster6197]

antonio i hope u a successful life that would let you think money is aint fun no more, your giving back to community is on next level bro

[@mkhanyisisimelane3477]

It's your world, we're just living in it 🙏

[@rrahll]

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

[@codewithantonio]

Glad you like them!

[@seidendris3253]

Another master piece from the GOAT...

[@tiagomccruz]

Incredible. Keep creating great content. Diversity in the projects and longer the better. I love it.

[@codewithantonio]

Thank you!

[@technoinfoworldwide2329]

wow, you are also explaining single core details beginning from folder setup , detailing to advanced.superb sir. It would be beneficial for beginner too... But if remaining part was also uploaded it would be better for us to learn

[@FlorinPop]

People would pay $100s for this course and you put it out for free?! WOW!

[@codewithantonio]

Thank you Florin :)

[@mobythereal]

Congrats on yet another masterpiece, Antonio! You are truly a legend.

[@codewithantonio]

Thank you very much!

[@manasuniyal2897]

You are a genius and I salute to your great knowledge of building insane projects .

[@codewithantonio]

Thank you very much!

[@vinialves12362]

You are a freaking machine dude, wow

[@codewithantonio]

Thank you :)

[@peterotian5161]

👏👏👏👏👏👏👏👏👏👏 Not all Heros wear Cape. You are amazing.

[@PrabhuKiranKonda]

Antonio dropped another banger!!

[@AceCPAsBookkeeping]

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.

[@demicoderr]

Here before this blows up!!🎉

[@hamennicheharoune6879]

Thank you for this amazing project Antonio 🙏

[@codewithantonio]

My pleasure!

[@mohdali-yq8gq]

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

[@jansanchez]

Amazing content, you're giving so much value to the community. Thanks a lot!!

[@codewithantonio]

Glad you enjoy it!

[@ValentinLHB]

I just discovered your channel, incredible amount of work put in this guide, a lot to learn, thank you so much!

[@ankita1102]

hello, can you please let me know if everything being used is free? I don't wanna spend hours on this just to realise that I need to pay for APIs or other stuff. Also, does your code work so far?

[@codewithlikhit]

Evrthing id free

[@mleite1]

Im still watching it. Hono part was really good, thanks for that, first time hearing about it

[@codewithantonio]

Glad you liked it! I was really surprised how cool Hono was

[@armaandhanji7151]

This is amazing Antonio! Idea for an upcoming video: There is currently no content on KZbin showing how to build a multi-tenant application. In particular, when you signup for a Slack workspace, you get your own subdomain. Something like this would be seriously game changing. Thanks for the incredible work!

[@mleite1]

I was waiting for this 😊 great tutorial

[@codewithantonio]

Hope you like it!

[@Pixelaze]

Oh boy oh boy I've been waiting for this.

[@codewithantonio]

Enjoy!

[@akintobiafeez4070]

Your videos are always superb, and I always learn a bunch of new things from every video. Thanks so much for all you do Antonio.

[@Iamtheinevitable]

Antonio🤲🏼🤲🏼🤲🏼🤲🏼 You’ve done it again At this pace you have to slow done and lemme catch up 😂😂😂 Thank you 🙏

[@igmtink]

I'm gonna watch this right now, I'm also about making an expenses tracker it will help me a lot thank you so much sir antonio

[@codewithantonio]

Best of luck!

[@igmtink]

@@codewithantonio thank you so much sir 😊

[@S.AdithyaVardhan]

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

[@karthik_spaceboy]

I can say nothing but thank you very much. Love your projects ❤

[@codewithantonio]

Thank you so much!

[@hubertyat3056]

the best tutorial for nextjs

[@swarnabhamajumder9561]

Thank you sir for the amazing video. Please bring more such innovative saas projects.

[@naylord5]

Thank you so much for this amazing project and all your hard work master! 🔥 Quick question, what would be the best approach to configure recurrent expenses, i.e. netflix every month -$10 on day 15, to prevent manually creating the transaction every single month. Can this be done with a cron job? or is any scalable-production ready way to do this? Thank you in advance!

[@larsh5853]

Also interested in this

[@mateussantana271]

You are keeping cooking great stuff! Appreciations!

[@codewithm_k7568]

You deserve a subscribers 👏

[@aladdinsonni]

Thanks for this amazing project, keep going Antonio 💪

[@codewithantonio]

More to come!

[@thenikstark221]

Thanks for your work! Your channel is the most amazing on all of KZbin. Amazing job!

[@codewithantonio]

Glad you enjoy it!

[@k2an]

again again again! an awesome^3 project with absurd quality! thany you!

[@codewithantonio]

Thank you!

[@p.srelaxing4026]

You are the Messaih of code!

[@sandiss1210]

sadly i have graduation exams but ofc i'll watch it : D

[@devflo]

Antonio coming in clutch ❤

[@coderprakash]

Got this weekend tutorial thanks alot brother❤

[@OfficialEasycart-zc2xk]

This is massive 🎉 Well-done ❤ Please can you make a tutorial on a banking app which can be used to generate account numbers to customers upon creating account and some other features a banking app should have.

[@rrahll]

Awesome! Thank you Antonio! This is great!

[@codewithantonio]

Glad you like it!

[@rafaelfachinelli]

Thank you Antonio! I love your projects, I admire you so much!

[@codewithantonio]

Glad you like them!

[@Hamza-qv2de]

Thanks a lot for this tutorial 👏 Much appreciated!

[@codewithantonio]

Glad it was helpful!

[@stathesromanos]

That's the smoothest cursor I have ever encountered.

[@royalshorts1527]

Again bomber content ❤🎉

[@markus_dev_cwb]

Tks to share this amazing project Antonio.

[@Ssmb-qj4df]

YES, GOAT is back

[@dest5237]

i think im in love with this guy

[@isaacjpg]

Great Project! Thank you very much for your time and effort 🎉😊

[@preetpatel4119]

Thanks antonio❤ One thing I wanna request is from next tutorial please teach how to create good UI. With a proper colour palette.

[@codewithantonio]

Thanks for the idea!

[@fakeITDevTeam]

Look wonderful, great project. Lets hope the tutorial can be followed without any missing steps

[@Boi-ud3dk]

Wow it looks great! thank you for sharing knowledge :)

[@cdfcloud]

Wonderful thanks for the wonderful session

[@codewithantonio]

Glad you enjoyed it!

[@minter-07]

i am half way thorugh and omg as always im loving it, p.s I will try to integrate Plaid and Lemon Squeezy on my own, will post it on twitter if done 😅😁

[@codewithantonio]

Good luck!

[@charlesvallar8762]

Awesome work man ! Thanks a lot 🙏

[@johnmcarty-cp8xo]

thanks for helping us Antonio ! keep it up!

[@atejap]

long live to your channel

[@Vipigal]

Irmao do ceu vc mala demais nos tutoriais, aprendendo mt aqui. Abraco do brasil camarada!

[@codewithxaki]

what an explanation ❤❤

[@SK_Covers]

Bro back with the banger 🎉 Bro Make a beginner friendly tutorial Next js tailwind. Your videos are long. Just a suggestion it'll help to follow your project based videos.❤

[@codewithantonio]

Thanks for the tip!

[@sheikhabubakr9572]

Thanks for this amazing project

[@codewithantonio]

Glad you like it!

[@mateussantana271]

One approach to solve the form values type on Transaction form is using the merge from zod. const apiSchema = insertTransactionSchema.omit({ id: true }); const formSchema = apiSchema.merge( z.object({ payee: z.string().optional(), notes: z.string().optional() }) ); export type FormValues = z.infer;

[@codewithantonio]

nice solution!

[@Moh.shahin]

Well done Antonio 👌

[@codewithantonio]

Thank you!