Build & Deploy Full Stack Next.js Expense Tracker app using React, Tailwind Css, Drizzle ORM, Clerk

Опубликовано: 21 Апрель 2024
на канале: TubeGuruji
69,638
1k

Welcome to our beginner-friendly tutorial where we guide you through building and deploying a full-stack Next.js expense tracker app! In this step-by-step guide, we'll use React for the frontend, Tailwind CSS for styling, and Dirzzle ORM for managing our database. Whether you're new to web development or looking to expand your skills, this project is a fantastic starting point!

⭐ TubeGuruji : https://tubeguruji.com
⭐ Clerk : https://go.clerk.com/wPzIBHq
⭐ Eraser.io : https://www.eraser.io

⭐ Support me on : https://www.buymeacoffee.com/tubegurujiw

📚 Materials/References:
Source Code of Application (give it a star ⭐):
https://dcmk.short.gy/expense-tracker

Dirzzle ORM:
https://orm.drizzle.team

Free Members Access : https://www.tubeguruji.com/course-pre...

🌟 Free Source Code for Members: https://www.tubeguruji.com
🌟 App Demo : https://expense-tracker-tubeguruji.ve...


🖼️ Follow us on Instagram:   / tubeguruji  

💼 Business Inquiries: [email protected]


By the end of this tutorial, you'll have a solid understanding of building dynamic web applications and deploying them for the world to see. Let's dive in and start coding together!

Join this channel to get access to perks:
   / @tubeguruji  

⏰ Timestamps:
00:00:00 Introduction & App Demo
00:05:29 React-NextJs Project Setup
00:19:28 Landing Screen
00:32:33 Authentication
00:47:56 SideNav Bar
01:06:05 Backend Setup (Drizzle ORM + Postgres + Neon)
01:23:03 Create New Budget
01:52:50 Display Budget List
02:14:11 Skelton Effect (For Loading...)
02:20:26 Add New Expenses
02:45:18 Display & Manage Expenses
02:58:36 Delete Budget
03:07:34 Edit / Update Budget
03:19:01 Dashboard (Cards)
03:36:44 Bar Chart
03:43:28 Budget List & Expenses List (On Dashboard)
03:54:44 Quick Fix
03:59:13 Deploy App on Vercel




#nextjs ‪@neondatabase‬ #tailwindcss #reactjs #expensetracker #nextjstutorial #nextjs14 #tubeguruji ‪@tubeguruji‬


Смотрите видео Build & Deploy Full Stack Next.js Expense Tracker app using React, Tailwind Css, Drizzle ORM, Clerk онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь TubeGuruji 21 Апрель 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 69,63 раз и оно понравилось 1 тысяч людям.