MERN Stack Project: How to Build an Expenses Tracker from Scratch

Published: 09 August 2024
on channel: masynctech
5,198
122

In this video, you'll learn how to build a complete Expenses Tracker application from scratch using the MERN stack (MongoDB, Express, React, Node.js). This project is perfect for anyone looking to level up their full-stack development skills by creating a real-world application.
MERN Fullstack Course: https://www.udemy.com/course/fullstac...
Final Repo: https://github.com/tweneboah/Full-Sta...

0:00 - Introduction to building an expenses tracker application using MERN stack
0:26 - Mention of related courses and MERN stack course
0:51 - Demo of the project and UI overview
1:16 - Demonstration of logout feature
1:41 - User registration process
2:13 - Profile page and password change demonstration
2:43 - Logging in with new credentials
3:10 - Adding income and expense categories
3:38 - Adding more categories (gifts, food, transport)
4:08 - Adding a transaction (income - salary)
4:38 - Adding another transaction (income - gift)
5:12 - Adding an expense transaction and viewing dashboard
5:47 - Demonstrating filtering options for transactions
6:17 - Conclusion of demo and transition to next steps
6:44 - Project requirements for backend development
7:11 - Project requirements for frontend development
7:33 - VS Code setup and extensions
8:30 - Wrapping up the introduction
8:59 - Creating project folder and initializing npm
9:31 - Creating app.js file
9:57 - Installing Express and other packages
10:25 - Setting up MVC folder structure
10:49 - Creating model files (user.js, category.js, transactions.js)
11:17 - Explaining the purpose of each model
11:42 - Beginning with user modeling
12:07 - Explaining user schema blueprint
12:31 - Providing code for user schema
12:57 - Explaining category schema and referencing
13:22 - Explaining transaction schema
13:48 - Detailing transaction schema fields
14:16 - Compiling schemas into models
14:46 - Introduction to controllers
15:11 - Setting up users controller
15:38 - Installing additional packages (express-async-handler, bcryptjs, jsonwebtoken)
16:09 - Using "Better Comment" extension for comment colors
16:31 - Setting up user registration controller
17:00 - Creating register, login, and profile controller functions
17:30 - Explaining request and response objects
17:58 - Importing and using async-handler package
18:26 - Exporting users controller and introducing routing
18:54 - Setting up user router file
19:29 - Implementing POST method for user registration
20:01 - Naming and exporting user router
20:30 - Setting up app.js and creating server
20:57 - Configuring port for the server
21:32 - Starting the server using Node.js
22:00 - Demonstrating server auto-restart on file changes
22:27 - Implementing middleware to use the user router
22:50 - Introduction to testing with Postman
58:07 - Demonstrating dynamic and secure user authentication
58:40 - Implementing user password update functionality
59:12 - Explaining the process of hashing new passwords
59:36 - Updating user password field and saving changes
1:00:06 - Implementing user profile update functionality
1:00:43 - Extracting update information from request body
1:01:17 - Updating user profile in the database
1:01:49 - Returning updated user information
1:02:17 - Creating routes for password change and profile update
1:02:52 - Testing login functionality in Postman
1:03:28 - Demonstrating password change process
1:04:08 - Testing login with new password
1:04:43 - Discussing error handling issues with status codes
1:05:09 - Improving error handling in middleware
1:14:03 - Creating routes for category operations
1:14:30 - Housekeeping in category controller (removing unnecessary imports)
1:14:45 - Setting up category router
1:15:10 - Implementing routes for create and list categories
1:15:35 - Testing category creation in Postman
1:16:00 - Demonstrating successful category creation
1:16:25 - Testing category listing functionality
1:16:50 - Implementing update category functionality
1:17:15 - Creating route for update category
1:17:40 - Testing update category in Postman
1:18:05 - Implementing delete category functionality
1:18:30 - Creating route for delete category
1:18:55 - Testing delete category in Postman
1:19:20 - Reviewing and summarizing category CRUD operations
1:19:45 - Transitioning to transaction controller implementation
1:14:39 - Change to category router and rename all instances by pressing Command + D multiple times.
1:15:21 - Add the create method at the end and ensure the user is authenticated.
1:16:02 - Mount the category router in app.js.
1:16:50 - Provide category details in the request body, such as name and type.
1:17:28 - Handle errors and ensure category uniqueness.
1:18:01 - Set up a GET request to fetch all categories.
1:18:42 - Implement middleware to handle token authentication.
1:19:12 - Focus on transactions, referencing categories by name.