MERN Stack Expense Tracker Application

Set up the React app for the mern stack expense tracker by creating a client with create-react-app, then run npm start to launch the dev server on localhost:3000.

Install libraries and set up folder structure with pages, components, resources, and redux for a mern stack expense tracker using React, Ant Design, React Router DOM, AOS, Axios, and Entity.

Explore building a reusable default layout for a MERN stack expense tracker app, wiring header and content areas as props-driven pages, with responsive margins for desktop and mobile.

Style the default layout by cleaning existing styles, importing Montserrat from Google fonts, and creating a dedicated default layout CSS. Implement header, logo, username, and responsive media queries for mobile.

Set up the mern stack backend by initializing the project, installing express, nodemon, and mongoose, and creating server.js to run on port 5000 with a hello world response.

Create a MongoDB atlas database and users collection, connect it to a Node.js server with mongoose using useNewUrlParser and useUnifiedTopology options, and verify the connection with live feedback.

Build the front-end authentication for a MERN app by creating login and register pages with anti form elements, including validation, in a two-column layout with a background animation.

Style the register form and mirror it for login, including a left-side Lottie animation, centered layout, and gradient background, and log credentials to the console on finish.

Define a mongoose user model and build login and register endpoints with express; export and mount the router under the users route, handling errors with 500 status.

Connect the react front end to the node backend with axios calls to register and login, configure the proxy, and manage local storage and navigation for the MERN expense tracker.

Learn to implement loaders and notification messages in a MERN stack expense tracker app, using a spinner and blur effects to signal API processing and protected roles.

Learn to implement protected routes in a MERN expense tracker by using local storage checks to redirect unauthenticated users to login, ensuring only logged-in users access the home page.

Create an add transaction modal in a React app, with an add button and home view featuring a table analytics and a form for amount, type, category, date, reference, description.

Design a transaction form for the monster expense tracker with inputs for amount, category, date, reference, and description, plus an income/expense select and a finish action that logs values.

Design the transaction model for the mern stack expense tracker, defining fields such as amount, type, category, description, reference, and date, and prepare endpoints for adding and listing transactions.

Build the add-transaction and get-all-transactions APIs for a MERN stack expense tracker using a transaction model with a user field, and integrate front-end components to add and retrieve transactions.

Learn to fetch transactions via an api get request and render them in a table with defined columns and data indices, mapping to MongoDB model data.

Explore MongoDB date filters to fetch transactions by date ranges—last one week, last one month, and last year—build backend queries, and prepare frontend design for the next lecture.

Create a date range filters component with a frequency dropdown (last one week, last one month, last one year) and a custom range using date picker, triggering transaction api requests.

Implement a three way type filter (all, income, expense) to fetch and display transactions in the MERN expense tracker, update the UI, and filter backend transactions via the API.

Explore the analytics component of the MERN stack expense tracker application by implementing a content header with a filter, view toggles between table and analytics, and icon integration.

Explore the analytics screen in the MERN stack expense tracker, showing total transactions, turnover, and income versus expenses for the last month, with backend data and progress bars.

Compute total turnover, income turnover, and expense turnover on the total turnover card using reduce with an initial value and filter before reduce.