Build a Full-Stack MERN Expense Tracker | React, Node.js, MongoDB, Express | MERN Project
In this video, we’ll build a fully responsive Expense Tracker App using the MERN (MongoDB, Express, React, Node.js) stack! This app includes user authentication with JWT, income and expense tracking, interactive charts, and the ability to export data in Excel format. Get Source Code: https://buymeacoffee.com/timetoprogra... 🔥 Complete Web Developer Bundle Includes 100+ React Components, 11 Full MERN Projects, 5 Cheat Sheets & 500+ Interview Q&As 👉 Get it here: https://buymeacoffee.com/timetoprogra... Functionalities Implemented: 1. User Authentication – Secure login and sign-up using JWT authentication. 2. Dashboard Overview – Displays Total Balance, Income, and Expenses in summary cards. 3. Income Management – Add, view, delete, and export income sources. 4. Expense Management – Add, view, delete, and export expenses with category-based tracking. 5. Interactive Charts – Visual representation of income & expenses using Bar, Pie, and Line charts. 6. Recent Transactions – Displays the latest income and expense records for quick access. 7. Expense & Income Reports – Download all income and expense data in Excel format. 8. Mobile Responsive UI – Works seamlessly across desktops, tablets, and mobile devices. 9. Intuitive Navigation – Sidebar menu with easy access to Dashboard, Income, Expenses, and Logout. 10. Delete Functionality – Hover over income/expense cards to reveal a delete button for easy Frontend 00:00 - Demo of Expense Tracker App 08:06 - Setting Up React App 10:00 - Tailwind CSS v4 Setup 13:33 - Installing Required Dependencies 14:47 - Defining App Routes 18:21 - Building the Login Form UI 34:08 - Building the Sign-Up Form UI 38:15 - Creating the Profile Photo Selector Component Backend 45:17 - Backend Project Setup 51:23 - Connecting to MongoDB 55:50 - Creating Authentication APIs (Login, Sign-Up, Get User Info, Profile Image Upload) 01:19:49 - Creating Income APIs (Add Income, Get All Income, Delete Income, Download Excel Data) 01:34:00 - Creating Expense APIs (Add Expense, Get All Expenses, Delete Expense, Download Excel Data) 01:43:03 - Creating Dashboard APIs Frontend (Continued) 01:52:15 - Defining API Paths in apiPath.js 01:54:20 - Creating an Axios Instance Auth Pages 01:57:06 - Integrating the Login API 01:59:46 - Creating User Context 02:02:35 - Integrating the Sign-Up API Dashboard Page 02:09:18 - Creating the Dashboard Page Layout 02:24:55 - Fetching Dashboard Data via API Call 02:27:13 - Implementing Summary Cards 02:32:59 - Recent Transactions Section 02:42:53 - Financial Overview Section (Pie Chart) 02:51:13 - Expense Details Section 02:54:41 - Last 30 Days Expenses Section (Bar Chart) 03:00:51 - Last 60 Days Income Section (Pie Chart) 03:04:14 - Income Details Section Income Page 03:00:00 - Income Overview Section 03:24:31 - Adding Income (Form) 03:30:11 - API Call to Add Income 03:34:24 - Income List Section 03:40:00 - API Call to Delete Income Expense Page 03:44:54 - API Call to Get All Expenses 03:49:07 - Expense Overview Section 03:56:08 - Adding Expense (Form) 04:00:05 - API Call to Delete Expense 04:01:21 - Expense List Section 04:05:48 - Downloading Expense Details 04:07:33 - Downloading Income Details Also, check out: Responsive Portfolio Website with React & Tailwind CSS • Build a Responsive Portfolio Website with ... Full Stack Polling App using MERN Stack • Build a Full Stack Polling App using MERN ... #reactjs #mernstack #reactjstutorial #mernproject Follow us on : Instagram: / timetoprogram Facebook: / Pinterest: / For more updates subscribe to your channel: / @timetoprogram-yt Please Like | Share | Subscribe for more such videos. Thank You.
