Build a Full Stack Budget Tracker with Next.js, TypeScript, Prisma, and Tailwind CSS

[@klitonbare]

Source Code ( for patreon sponsors ⭐): dub.sh/HVd0CFi

[@prashlovessamosa]

i know it took too much effort from building project to recording and editing all that stuff thank you Kilton very grateful to you.

[@klitonbare]

Thaank you!! 🙏

[@Ayoubased]

any update?

[@prashlovessamosa]

@@Ayoubased literally learning Tanstack Query from docs because I don't know some of the Stuff I think it will take time sorry it will take a little longer.

[@Ayoubased]

@@prashlovessamosa Dont be sorry bro, You got this.

[@ZetaDevRJ]

Maybe one of the best tutorial I watched. Some new tricks I never founded in other videos. Tanks a lot

[@klitonbare]

Wow, thanks!

[@thomasamalraj8827]

Awesome, excellent tutorial Kilton. Your teaching style makes even a beginner like me understand easily even the hardest concepts, like Nextjs server actions. Thanks a lot Kilton

[@klitonbare]

You're very welcome!

[@sansxverse]

So looking forward to making this, I think this is gonna help me level up as a frontend dev! Thank you so much and please continue making tutorials such as this!

[@klitonbare]

More to come!

[@avishekdas4947]

This is a greate project! your content is high quality. Keep it up. Need more projects

[@klitonbare]

Much appreciated!

[@michaelkiruti8504]

I tried this project myself a few months ago and gave up, thank you for this project!

[@klitonbare]

You're very welcome!

[@r3m00n]

Thank you so much for what you're doing Kilton

[@klitonbare]

Thank you a lot 🙏

[@jrmayol857]

Very helpful crash course. Looking forward for more contents like this. Much love,from the Philippines

[@klitonbare]

Thank you!

[@yanDev]

Amazing! Thank you very much for this good job!! We need more videos like this!!

[@klitonbare]

Thank you!

[@LynxBaretta]

Wow this was a great tutorial!!! Thanks a lot for your effort and your time ...and I feel so lucky that I was able to find this tutorial THANKS A LOT!!!

[@klitonbare]

Wow! Thank you!

[@oluwaseunladeinde410]

Thank you Kliton. I picked up a couple of good tricks here. Good project/video and useful too.

[@klitonbare]

Great to hear!

[@ahmedaq9018]

Another amazing and creative tutorial .... thanks a lot Kliton 🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰

[@klitonbare]

Thanks so much 😊

[@abelj6053]

wow great work man , appriciate another more

[@klitonbare]

Thank you so much 😀

[@jitxhere]

Awesome project with clean UI. Thank you Kliton for this awesom project

[@klitonbare]

Glad you like it!

[@markus_dev_cwb]

One more amazing project Kliton.

[@klitonbare]

Thanks!

[@marekgacekdev]

absolutely awesome tutorial and channel. I think the best what i find in last time. I hope you will get more content, thx a lot , greetings and good luck :D

[@klitonbare]

More to come! Thank you!!

[@yantech.4249]

This is an amazing project. Big thanks sir

[@klitonbare]

Glad you like it

[@ShrutikaSh]

i really found this helpful, thankyou for making this

[@klitonbare]

Glad it was helpful!

[@nasko235679]

Important: initialFocus leads to the popover not opening on firefox and ios chrome 2:12:02 . So better to not add it if you want full compatibility with browsers.

[@klitonbare]

Thank u

[@IkraamDev]

Looks good!

[@klitonbare]

🙏

[@kpyoutuber4671]

At 1:36:11; I get an error "Unhandled Runtime Error TypeError: _categoriesQuery_data.find is not a function" In app/(dashboard)/_components/CategoryPicker.tsx file following code gives this error const selectedCategory = categoriesQuery.data?.find((category: Category) => category.name === value); How to sort this, Appreciate some inputs

[@klitonbare]

I think you have to run npx prisma migrate dev and then reload the editor ( and restart also the application )

[@kpyoutuber4671]

@@klitonbare Thanks!, Found my error in (dashboard)/_components/CategoryPickers.tsx file fetch('/api/categories?type=${type}').then((res) => // Incorrect fetch(`/api/categories?type=${type}`).then((res) => // Correct

[@dindustack]

Thanks for sharing your wealth of knowledge.

[@Ayoubased]

I see what you did there

[@klitonbare]

Thank you

[@Marc-fj3kd]

Excellent video and project, thank you !

[@klitonbare]

Thank you too!

[@krunalpawarkp]

This is perfect!! Thank you so much

[@klitonbare]

Glad you like it!

[@Ishu_Grinds]

Awsome Project Sir 🫡🫡

[@Deus-lo-Vuilt]

Nice proyect

[@klitonbare]

Thank you!!

[@erwinyulianto5407]

The demo look neat. For next video can you include ability for managing user role & permission.

[@damiansimonak7955]

I am returning to the programming so this youtube recommended to me. Looks really nice. I going to Sub your channel.

[@klitonbare]

Welcome aboard!

[@crypticcoding9680]

Make a video on your development setup (themes, fonts and everything)

[@CarlosTello-m8h]

nice project

[@klitonbare]

Thanks

[@shreyas.sihasane]

Make more unique projects like this 🎉❤❤

[@klitonbare]

Sure

[@channel-te5vk]

Hey Kliton . Thanks for this wondeful project. Was full of so many learning. I was wondering how many users can this application support

[@klitonbare]

Hi, thank you. The app is designed to support a large number of users by saving aggregates for each user. The maximum load is proportional to the database capacity

[@channel-te5vk]

@@klitonbare Can me and my group of around 15-20 friends use this app for saving for daily transactions

[@klitonbare]

You mean the application that i deployed for the demo? O you mean a self deployed app?

[@naylord5]

This is perfect!! Thank you so much for sharing 🔥🔥 Could you please consider to add a recurrent transaction like cable pay or a fixed monthly income? IDK if this can be done with cron jobs or any other method.. to prevent creating the same movement over and over.. Thank you in advance!

[@tekemutau6583]

Great suggestion!

[@klitonbare]

Hi, yes this can be done with cron jobs. But right now i can't expand the video because that means that i've to upload the video again etc

[@klitonbare]

But the implementation of what you have asked is pretty simple: you can just creaet a new table in the schema prisma file, let's say: RecurrentTransactions ( for example ). Then you store there your transaction with a "recurrentDay" and "recurrentMonth". You can also add a start and end if you want ( in order to have that transaction only in the period that you have choosed ). Then you can just call an api like /api/checkRecurrentTs where you get all the recurrent transactions, based on the current day you create the next date on which that recurrent transaction will be created and then you query the db in order to see if there is a transaction like that or not. If is not existing than you can create it and thats it.

[@klitonbare]

I'm also planning to make paid video extensions with extra features etc to make the creation of videos like this more sustainable for me. ✌

[@naylord5]

@@klitonbare thank you very much! Definitely next week I'll try to implement this. I really appreciate your explanation.

[@neilrowland1243]

The date picker "to" range starts at 0.0.0.0 on the date selected, therefore it misses transactions for that date I think. The presets for today, 7 days etc; are all set to to.setHours(23, 59, 59, 999) but if I change the "to" item to this value in the component it does not appear to work. Any ideas how to solve this issue?

[@kunalyadav7236]

Amazing project Kliton, loved your server actions implementation. By the way what vs code theme are you using

[@klitonbare]

Thank you. The theme is vesper

[@MoriMousavi]

Thanks so much for the video. Within this setup, how can we apply a rate limit to our APIs?

[@akashthoriya]

Thank you for this video, Small request - Please create large project for us. If it's 15-20 hours long, it would be great, we will go slow and build amazing things

[@klitonbare]

Right now i can't handle really long projects because i've work to do and in order to make videos like this i need to stop the freelance work for 2-3 weeks. In order to make a lot of content i need to find a way to monetize this activity ✌️

[@Neelammkw]

Give guide to how to freelance plz..make video on that..

[@thanhduynguyen6253]

damm good tutorial I have seen today

[@klitonbare]

Thank you!

[@ahmedabdelmeguid1131]

you are perfect...go on

[@klitonbare]

🙏

[@witthawin0]

How i can fix date picker calender keep changing position up and down when i switch between month that not have equal day (30 day and 31 day)? i hate fontend.🤣

[@saisandeep8741]

Looks Awesome

[@klitonbare]

Thank you!

[@regilearn2138]

Hi mate Awesome, Please do more MERN/PERN videos with TYPESCRIPT. you have wonderful content on your channel

[@klitonbare]

Noted!

[@huynhphatat3919]

Long time no see, my friend

[@klitonbare]

✌️

[@ChiragYadav-w1d]

great project, thanks a lot,

[@klitonbare]

Glad you like it!

[@nikunj14]

This tutorial is damn good. btw what is this vscode theme?

[@klitonbare]

hanks a lot. Theme and font are listed in the first comment :) ( pinned one )

[@mtJosue]

Is there any chance you could get enticed to teach us a crash course on working with unsupported types in Prisma like "point" and "polygon" and maybe showcase examples of basic geo queries like *point intersects point or *point in polygon. There are dozens of open/closed discussions on their github but it seems that geo types are in at the back of the bus for them. I saw there are no videos on youtube showcasing this approach or anywhere else for that matter in video format. Thank you so much for your time!

[@klitonbare]

Hi, idk i have already a plan for the 2 next videos. So maybe after those 1 i will cover the topic you have request ( but i'm not sure tbh )

[@mtJosue]

@@klitonbare Yeah, no worries, like I mentioned just have a dozens of discussions on their git, and no ones made a video yet.

[@abdullahkhalid9885]

Salam brother, I hope you beocome successful :) really nice tutorial.

[@klitonbare]

Many many thanks

[@Ayoubased]

if anyone finished the video, answer these questions please: how did you find the tutorial as a whole and why? how many projects you did before this one? if you follow any other youtuber tutorial, what did u find different from the yotuuber apporach and the code?

[@M10-r8q7h]

Hii i think i am fit to reply this comment 1->i find the tutorial as an slight overkill but well structured you need to know the basic stuffs before and must be well aware of the shadcn library 2-> i have completed more than 5-6 intermediate level projects 3->i think he is a fastPaced tutor😅 ,not recommended for beginners,code is well structured

[@Ishu_Grinds]

But The Clerk Auth has been Updated , and it no longer secures all the routes except which are Specified , thank you and can you provide update about it

[@klitonbare]

Ty

[@kenken1720]

what version did you create it for? because i alr followed everything but in authentication my clerk won't show up no matter what i try

[@klitonbare]

What version are u using?

[@nettemsarath3663]

you are using server actions and api's for data mutation, when should we use server actions and when to use api's, which one prefered and why ???

[@klitonbare]

Hi, in this video, I used REST APIs for the functions that need to fetch data and server actions for everything else. The reason? Server actions, even if called in parallel, are still executed one at a time on the server. This would have caused the stats cards and charts on the homepage to load sequentially rather than simultaneously

[@nettemsarath3663]

Yes sir, but if we want to get data there are 2 ways either we can write an api and call that api, or directly call a function (i.e like await prisma.collection.findmany() in the react component and pass that data to component) So which one is better and why ???

[@dharylalmora3121]

thank you so much

[@klitonbare]

You're welcome!

[@yash-uy5ym]

Everything was great but in the end you were just copy pasting without explaining much. But overall a great video.❤❤❤ I understood the basics of tanstack query and zod

[@klitonbare]

Noted. In the next video i will add more explanations! Ty

[@yash-uy5ym]

​​@@klitonbareI was wrong bro. You were absolutely great. Your approach gave me some room to grow. I created the table part and connected the app to neon db by myself I watched some other tutorial and then I realised how amazing your teaching skills are Loved the video ❤❤

[@klitonbare]

Wow! Thank you a lot! 🙏🙏🙏🙏

[@spotnuru83]

This is great tutorial , appreciate your efforts, I am trying to code along but at the point where are creating createTransacationdialog when i use asChild in DialogTrigger i am getting error saying that "Error: React.Children.only expected to receive a single React element child." and it is working if i do not put asChild, so can you please tell me what to do? and what is this asChild and why is it needed??

[@klitonbare]

Hi, thank you. Cn you share a github gist with your createTransactionDialog code?

[@adrianfelismino4610]

how to implement update and delete on category or transaction?

[@klitonbare]

What do you mean?

[@endriwmsi]

Nice video! What theme are you using?

[@klitonbare]

Thank you. The theme is called vesper

[@tinkugupta1]

make a project with react flow also if possible

[@klitonbare]

Thank for the idea

[@ukrainianigor]

Very very very nice! Could you please tell me what font are you using and VSCode theme please)

[@klitonbare]

Hi, thank you. Theme: vesper Font: Github Monospace

[@ukrainianigor]

@@klitonbare how i can find this font. It's little bit hard. Console also use this one &

[@klitonbare]

@@ukrainianigor github.com/githubnext/monaspace

[@nasko235679]

How did you learn database design? It's one of those topics that I always struggle with. Would you recommend any resources?

[@klitonbare]

Hi, I've learned everything at work. I did learn some things at university, but in practice, I mostly use what I've learned through work projects and hands-on experience

[@Asadjatt4565]

not able to create account...show that it reached 100 users limit..please provide demo login details

[@klitonbare]

Try again now :)

[@Asadjatt4565]

@@klitonbare Thanks a lot...

[@Victor-Ike]

Why don’t you have a demo login? I don’t want to create an account guy

[@klitonbare]

@@Victor-Ike Because with a shared demo account people can potentially create categories inside the application with offensive names etc :)

[@Victor-Ike]

@@klitonbare That's true, I didn't think of that.

[@vkot6941]

Could you please share design that you used for this project?

[@klitonbare]

I haven't used design files/tools

[@vkot6941]

​@@klitonbare Yout demo website is not working, I can't login :(

[@prithvirajmulay1260]

Hello Kliton, I am budding web-developer, I liked your project and wish to build it by watching your tutorials, if i wish to push this project on my git.In what way I will be able to do it ( I mean to say how do i give u the credit of the work )

[@klitonbare]

Hi, no worries push it :)

[@falabaixo_cuts]

i getched a error on deploy : Application error: a client-side exception has occurred (see the browser console for more information).

[@klitonbare]

Can you check what the logs are saying on vercel dashboard?

[@falabaixo_cuts]

​@@klitonbare i try again and solved it, thank you, amazing video!

[@klitonbare]

Thank you!

[@codernerd7076]

Well, it's a great video, but the final app has some massive issues, first of all, the modal is not responsive it doesn't show completely on smartphones and there are a ton of other responsive issues. Next to that the transactions on the home page don't update when you add new income or expenses.

[@klitonbare]

You’re right I’ve jest checked on the iPhone now and I have responsiveness issues with the dialog and also with the date range . ( also with the tooltip of the cart that needs to be centred ) Regarding the transactions on home page not updating you are referring to what section exactly? Overview or history section? Note that if you are adding a transaction in a period not filtered by the date range the section overview will not update. Same thing happens for the history section: if the transaction is not created within the filtered period then you will not see changes in the chart

[@codernerd7076]

@codewithkliton maybe I added it outside of the date range sorry will need to check again

[@quratulainquratulain9559]

How to create Ai website builder ?

[@klitonbare]

Is not easy to explain that in a comment :D

[@quratulainquratulain9559]

So create this as your next project . Thank you

[@tinkugupta1]

awsm project quality and content is dope and not present on u tube .

[@klitonbare]

Thanks a ton

[@nishantshah_]

Hey, awesome video... just a request, can you add unit / integration test as well ?

[@klitonbare]

I will do that in future videos ✌️

[@AliYasir5247]

how to use graphql in a next.js project

[@klitonbare]

Is this a request for future videos or just a question? I'm not understanding

[@IstMirWurst]

no admin backend?

[@klitonbare]

No need

[@zaid58429]

in my dashboard code it is showing error please solve the issue in code please

[@klitonbare]

I'm not understading, can you link the error? Thank u

[@kevinkenfackjoel]

The application is very good only it is not responsive please could you help us with the configuration so that it is fully responsive on mobile thank you

[@yousefsaeed732]

what is the name of this browser please

[@malikkim5808]

arc

[@klitonbare]

yes

[@misterbean6674]

Saviour !!

[@klitonbare]

Thank you!

[@knlgulati365]

which vscode theme You are using ?

[@malikkim5808]

vesper

[@klitonbare]

yes

[@naivecoder524]

Is it responsive?

[@klitonbare]

Some parts, not everything

[@alimohamedalielkhamyy]

please i want code with free because i apply for jop now they need a project as this please

[@klitonbare]

You can recreate all the code by just following the video. If get get stuck somewhere feel free to ask help on discord ✌️

[@alimohamedalielkhamyy]

@@klitonbare respect for you .

[@diegoparra8859]

font name pls?

[@klitonbare]

Github monospace

[@nasko235679]

I completed the app but it got me thinking.. isn't this just an insane amount of client side code and can't we utilize NextJS's framework better and rely less on api routes and react query? It just felt wrong making almost every single page a client component. Thoughts?

[@klitonbare]

Hi nasko, i've made that choice because in this particular application in almost every page ( except the manage page ) we need the from and to date. So in order to avoid problems with date gmt difference between server and client i preferred to fetch the data from client instead of fetching data with a server component. Example: let's assume that we make the overview section a server component and we put the from and to date as url params. The problem is this: i want the default date range on the first load to be: {from: startOfMonth, end: today}. The today date etc can vary if calculated on server ( e.g. the server is located in europe/germany ) and the user has singapore gmt. So in order to avoid these kind of errors we need to calculate the {from, to} date range on the client ( with the user gmt ) and since we are doing some work on the client i chose to use a classic approach with react-query + REST API. Makes sense to you?

[@thecodingcove]

Are you italian Bro!?

[@klitonbare]

I have Albanian origins but I grew up and live in Italy. Can you tell from the accent? 😀

[@catapangsimon8859]

14:10

[@rakibulbhuiyan1137]

Very strong italian accent ahahaha

[@harshayyy9]

try to make as possible as custom without using third party

[@Furrukhish]

Bro you explain nothing just writing writing and writing

[@klitonbare]

Noted

[@ukrainianigor]

what needs to be explained is explained. First you need to know what is div at least, and then watch this tutorial. Good developers learn a lot from that course. Best practices, practice with prisma (like for me) etc. But what I can say, there is maybe no need to create copied MobileLogo, you can just use hidden md:block for icon.

[@adnanamin3666]

Sexy accent, gorgeous tutorial 😍 🫡🙏

[@klitonbare]

Thank you