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...
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 ...
Full Stack Polling App using MERN Stack
• Build a Full Stack Polling App using ...
#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.
Смотрите видео Build a Full-Stack MERN Expense Tracker | React, Node.js, MongoDB, Express | MERN Project онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Time To Program 24 Февраль 2025, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,693 раз и оно понравилось 151 людям.