MERN Stack Full Course for Beginners — Build a Full Stack Expense Tracker App

🚀 Build a production-ready full-stack expense tracker from scratch using the MERN stack! 💰 *-*-*-*-* Get Alerts for New Courses and Content Releases https://arnacode.com/ 🔥 What You'll Build: ✅ JWT authentication with bcrypt password hashing ✅ Full expense CRUD with filtering, sorting & search ✅ Interactive analytics dashboard with Recharts ✅ Avatar upload, data export & account management ✅ Lazy loading with IntersectionObserver ✅ Protected routes with TanStack Router 💻 Tech Stack: - MongoDB + Mongoose - Express 5 + Node.js - React 19 + TypeScript - Zustand + Axios + Tailwind CSS v4 ⏱️ Timestamps: 00:00:00 - App Introduction 00:29:05 - Getting Started - Back-end Setup 00:36:27 - Creating the server 00:40:27 - Running the server 00:43:32 - Defining the Types 00:50:50 - Creating Dummy Data 00:52:20 - GET All Expenses 00:58:41 - Testing GET All Expenses 01:03:15 - GET a Single Expense 01:15:00 - Testing GET a Single Expense 01:17:42 - POST new Expense 01:33:20 - Testing POST new Expense 01:37:46 - PUT existing Expense 01:56:02 - Testing PUT existing Expense 01:59:35 - DELETE existing Expense 02:04:24 - Testing DELETE existing Expense 02:06:13 - Refactoring Route Definitions 02:15:55 - Creating the Expense Routes Middleware 02:18:27 - Implementing Expense Controller Functions 02:28:35 - Typing Expense Route Responses 02:36:41 - POST new User 03:05:19 - Testing POST new User 03:08:55 - POST existing User 03:16:25 - Testing POST existing User 03:18:53 - GET existing User Profile 03:25:14 - PUT existing User Profile 03:37:54 - Testing GET/PUT existing User 03:45:06 - Centralizing Controller Response Handling 03:59:33 - Centralizing Controller Error Handling Middleware 04:16:28 - Updating Expense Controllers - Response/Error Handling 04:44:01 - Testing Updated Expense Controllers - Response/Error Handling 04:47:00 - Updating Auth Controllers - Response/Error Handling 04:54:46 - Testing Updated Auth Controllers - Response/Error Handling 04:55:59 - Updating Profile Controllers - Response/Error Handling 05:05:04 - Creating Profile Route Definitions 05:08:58 - Testing Updated Profile Controllers - Response/Error Handling 05:11:11 - GET Expenses by Category 05:38:12 - Creating GET Expenses by Category Route Definitions 05:40:39 - Testing GET Expenses by Category 05:42:40 - GET Monthly Totals 06:03:17 - Testing GET Monthly Totals 06:09:39 - GET Dashboard Stats 06:43:00 - Testing GET Dashboard Stats 06:45:08 - GET Spending Trends 06:57:58 - Testing GET Spending Trends 06:58:52 - Implementing Auth Middleware 07:57:07 - Updating Auth Controllers 08:02:15 - ENV Setup 08:09:03 - CORS Setup 08:16:32 - MongoDB Setup 08:37:36 - Defining/Implementing DB Modal - User 09:25:05 - Defining/Implementing DB Modal - Expense 10:15:45 - Implementing Password Hashing 10:29:41 - Implementing JWT 11:03:55 - Front-end Setup 11:21:44 - The 2nd Version 11:49:50 - The 1st Version 11:54:38 - Front-end Folder/File Structure + ENV 11:58:22 - Implementing the Routing - TanStack 12:31:49 - Setting Up the Axios API Client with JWT Interceptors 13:05:18 - Implementing the Signup Functionality 14:16:49 - Implementing the Login Functionality 14:42:01 - Coding the Navigation 15:03:59 - Testing/Fixing Signup/Login Processes/Bugs 15:35:34 - Implementing the Profile View/Edit Functionalities 16:32:53 - Implementing the Expense Creation Functionality 17:45:21 - Implementing the Expenses Retrieval Functionality 19:21:18 - Implementing the Expense Editing Functionality 19:58:36 - Implementing the Expense Deletion Functionality 20:31:31 - Implementing more Expenses Filtering Functionalities 22:33:23 - Implementing the Expenses Results Summary Functionality 22:47:27 - Implementing the Expenses Pagination Functionality 23:15:00 - Creating the Analytics Services and Actions 23:34:26 - Getting Started with the Dashboard Page 24:28:47 - Implementing the Date Range Selector Functionality - Front-end + Back-end 26:27:36 - Implementing the Spending Trends Functionality 27:05:06 - Implementing the Recent Expenses Functionality + Debugging 28:19:28 - Analytics Page - Services/Actions + New Back-end Routes 29:40:55 - Implementing the Summary Cards Functionality 30:30:28 - Implementing the Insights Card Functionality 31:04:32 - Implementing the Pie Chart and Current Month Bar Chart Functionalities 31:27:53 - Implementing the Category Breakdown Table Functionality 31:55:16 - Implementing the Year Selector Functionality 32:47:41 - Implementing the All Years Chart Functionality 32:59:00 - Implementing the Dynamic Years Charts Functionality 33:38:00 - Completing the Profile Page - Front-end + New Back-end Routes 36:24:48 - Coding the Home Page 36:40:49 - Performance Optimizations and Lazy Loading Implementation 37:48:44 - Debugging - Fixing Some Known Issues 38:01:15 - Conclusion 🔗 GitHub Repository: https://github.com/ArnaCode/MERN-Full-Stack-PennyWise-App #mernstack #reactjs #nodejs