Build Expense Tracker App Using React, Typescript, Next Js and Tailwind CSS
In this video, we are going to an expense tracker using react, typescript, next Js and taiwind CSS.
Source Code: https://ko-fi.com/s/8f9c603bc3
Source code of all my projects: https://ko-fi.com/devscript/shop
Live Project: https://penny-wise-sable.vercel.app/
Save your code snippets for FREE: https://www.snippetsaver.com/
Chapters:
00:00:00 Demo Of The Project
00:07:17 Setting up the project and adding the Poppins font to the project
00:10:50 Creating the header of the App
00:22:09 Adding the sub header
00:26:05 Adding the expenses list component
00:29:26 Adding the expenses list
00:35:17 Making the app responsive
00:38:40 Adding the expense window and the logic to open it and close it
00:53:25 Adding the icons window
01:01:11 Adding the wallet drop down
01:04:42 Handling the opening and the closing of the drop down
01:09:25 Setting the positions left and top to the drop down
01:15:15 Adding the wallet window and the logic to open it and close it
01:19:30 Creating the data for all expenses and all wallets
01:24:05 Showing all the expenses in the UI
01:26:36 Creating the function to convert from text to mui icon
01:28:54 Updating the header list to show the date and the transaction amount
01:31:20 Creating the confirmation window and deleting the expense from the list
01:37:57 Adding the notification and clearing out all the expenses when the user clicks on the clear all button
01:44:55 Adding the loading spinner and the empty placeholder
01:48:31 Showing the all wallets in the drop down
01:57:58 Adding the selection of the wallet
02:03:07 Creating the context for the expense window
02:08:53 Handling the error of the expense name input
02:13:46 Handling the error for the amount input
02:16:32 Handling the selection of the icon
02:26:44 Adding the expense in the UI
02:32:57 Adding the logic to edit an expense in the expense window
02:36:07 Updating the expense
02:40:36 Adding a new wallet into the array
02:46:33 Deleting the wallet
02:50:04 Updating the wallet and all the expenses related to it
#ReactJS #TypeScript #TailwindCSS #CodingTutorial #WebDevelopment #JavaScript #FrontendDevelopment #BackendDevelopment #ResponsiveDesign #WebAppDevelopment
Смотрите видео Build Expense Tracker App Using React, Typescript, Next Js and Tailwind CSS онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Dev Script 24 Август 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 3,083 раз и оно понравилось 134 людям.