@@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.
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!
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
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.
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
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!!!
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?
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
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
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
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 ???
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!
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.🤣
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
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 ✌️
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!
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.
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?
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
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
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??
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
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 )
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
@@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 ❤❤
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.
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
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
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?
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?
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.
Source Code ( for patreon sponsors ⭐): dub.sh/HVd0CFi
i know it took too much effort from building project to recording and editing all that stuff thank you Kilton
very grateful to you.
Thaank you!! 🙏
any update?
@@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.
@@prashlovessamosa Dont be sorry bro, You got this.
Maybe one of the best tutorial I watched. Some new tricks I never founded in other videos. Tanks a lot
Wow, thanks!
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!
More to come!
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
You're very welcome!
This is a greate project! your content is high quality. Keep it up. Need more projects
Much appreciated!
I tried this project myself a few months ago and gave up, thank you for this project!
You're very welcome!
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.
Thank u
Thank you so much for what you're doing Kilton
Thank you a lot 🙏
Very helpful crash course. Looking forward for more contents like this. Much love,from the Philippines
Thank you!
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
I think you have to run npx prisma migrate dev and then reload the editor ( and restart also the application )
@@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
Amazing! Thank you very much for this good job!!
We need more videos like this!!
Thank you!
wow great work man , appriciate another more
Thank you so much 😀
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!!!
Wow! Thank you!
Awesome project with clean UI. Thank you Kliton for this awesom project
Glad you like it!
Thank you Kliton. I picked up a couple of good tricks here. Good project/video and useful too.
Great to hear!
Make a video on your development setup (themes, fonts and everything)
One more amazing project Kliton.
Thanks!
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?
Hey Kliton . Thanks for this wondeful project. Was full of so many learning. I was wondering how many users can this application support
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
@@klitonbare Can me and my group of around 15-20 friends use this app for saving for daily transactions
You mean the application that i deployed for the demo? O you mean a self deployed app?
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
More to come! Thank you!!
Another amazing and creative tutorial .... thanks a lot Kliton 🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰
Thanks so much 😊
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
What version are u using?
This is an amazing project. Big thanks sir
Glad you like it
The demo look neat. For next video can you include ability for managing user role & permission.
Looks good!
🙏
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 ???
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
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 ???
This tutorial is damn good. btw what is this vscode theme?
hanks a lot. Theme and font are listed in the first comment :) ( pinned one )
Thanks so much for the video. Within this setup, how can we apply a rate limit to our APIs?
Amazing project Kliton, loved your server actions implementation. By the way what vs code theme are you using
Thank you. The theme is vesper
Thanks for sharing your wealth of knowledge.
I see what you did there
Thank you
Awsome Project Sir 🫡🫡
i really found this helpful, thankyou for making this
Glad it was helpful!
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!
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 )
@@klitonbare Yeah, no worries, like I mentioned just have a dozens of discussions on their git, and no ones made a video yet.
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.🤣
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
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 ✌️
Give guide to how to freelance plz..make video on that..
you are perfect...go on
🙏
Nice proyect
Thank you!!
This is perfect!! Thank you so much
Glad you like it!
how to implement update and delete on category or transaction?
What do you mean?
not able to create account...show that it reached 100 users limit..please provide demo login details
Try again now :)
@@klitonbare Thanks a lot...
Why don’t you have a demo login? I don’t want to create an account guy
@@Victor-Ike Because with a shared demo account people can potentially create categories inside the application with offensive names etc :)
@@klitonbare That's true, I didn't think of that.
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!
Great suggestion!
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
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.
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. ✌
@@klitonbare thank you very much! Definitely next week I'll try to implement this.
I really appreciate your explanation.
I am returning to the programming so this youtube recommended to me. Looks really nice. I going to Sub your channel.
Welcome aboard!
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?
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
Make more unique projects like this 🎉❤❤
Sure
Excellent video and project, thank you !
Thank you too!
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
Ty
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??
Hi, thank you. Cn you share a github gist with your createTransactionDialog code?
Hi mate Awesome, Please do more MERN/PERN videos with TYPESCRIPT. you have wonderful content on your channel
Noted!
Looks Awesome
Thank you!
Could you please share design that you used for this project?
I haven't used design files/tools
@@klitonbare Yout demo website is not working, I can't login :(
damm good tutorial I have seen today
Thank you!
i getched a error on deploy : Application error: a client-side exception has occurred (see the browser console for more information).
Can you check what the logs are saying on vercel dashboard?
@@klitonbare i try again and solved it, thank you, amazing video!
Thank you!
Very very very nice! Could you please tell me what font are you using and VSCode theme please)
Hi, thank you.
Theme: vesper
Font: Github Monospace
@@klitonbare how i can find this font. It's little bit hard. Console also use this one &
@@ukrainianigor github.com/githubnext/monaspace
How did you learn database design? It's one of those topics that I always struggle with. Would you recommend any resources?
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
Nice video!
What theme are you using?
Thank you. The theme is called vesper
Long time no see, my friend
✌️
How to create Ai website builder ?
Is not easy to explain that in a comment :D
So create this as your next project . Thank you
make a project with react flow also if possible
Thank for the idea
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 )
Hi, no worries push it :)
thank you so much
You're welcome!
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
Noted. In the next video i will add more explanations! Ty
@@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 ❤❤
Wow! Thank you a lot! 🙏🙏🙏🙏
what is the name of this browser please
arc
yes
which vscode theme You are using ?
vesper
yes
in my dashboard code it is showing error please solve the issue in code please
I'm not understading, can you link the error? Thank u
great project,
thanks a lot,
Glad you like it!
Salam brother, I hope you beocome successful :) really nice tutorial.
Many many thanks
how to use graphql in a next.js project
Is this a request for future videos or just a question? I'm not understanding
no admin backend?
No need
Is it responsive?
Some parts, not everything
Saviour !!
Thank you!
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.
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
@codewithkliton maybe I added it outside of the date range sorry will need to check again
awsm project quality and content is dope and not present on u tube .
Thanks a ton
nice project
please i want code with free because i apply for jop now they need a project as this please
You can recreate all the code by just following the video. If get get stuck somewhere feel free to ask help on discord ✌️
@@klitonbare respect for you .
font name pls?
Github monospace
Hey, awesome video... just a request, can you add unit / integration test as well ?
I will do that in future videos ✌️
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
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?
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?
Are you italian Bro!?
I have Albanian origins but I grew up and live in Italy. Can you tell from the accent? 😀
14:10
Very strong italian accent ahahaha
try to make as possible as custom without using third party
Bro you explain nothing just writing writing and writing
Noted
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.
Sexy accent, gorgeous tutorial 😍 🫡🙏
Thank you