Build a Full-Stack MERN Expense Tracker | React, Node.js, MongoDB, Express | MERN Project

Introduction

In this tutorial, we will build a fully responsive Expense Tracker App using the MERN stack, which consists of MongoDB, Express, React, and Node.js. This application will feature user authentication, income and expense tracking, interactive charts, and the ability to export data in Excel format. By following these steps, you'll gain hands-on experience in developing a full-stack application.

Step 1: Setting Up the React App

Create a new React application

• Use the command:

  npx create-react-app expense-tracker
  

1. Navigate to the project directory:

   cd expense-tracker
   

Step 2: Setting Up Tailwind CSS

Install Tailwind CSS

• Run the following command:

  npm install -D tailwindcss postcss autoprefixer
  

Initialize Tailwind CSS

• Execute:

  npx tailwindcss init -p
  

Configure Tailwind in tailwind.config.js

• Add the following to the content array:

  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  

Step 3: Installing Required Dependencies

1. Install Axios for API requests:

   npm install axios
   

2. Install React Router for navigation:

   npm install react-router-dom
   

Step 4: Defining App Routes

Set up routing in App.js

• Import necessary components and define routes for the login, signup, and dashboard pages.

Step 5: Building the Login Form UI

Create a new component for the Login Form

• Include input fields for email and password.
• Add a submit button.

Step 6: Building the Sign-Up Form UI

Create a component for the Sign-Up Form

• Include fields for user registration such as name, email, password, and confirm password.

Step 7: Creating the Profile Photo Selector Component

1. Build a component to allow users to upload profile photos.

Step 8: Backend Project Setup

Create a new folder for the backend

• Initialize a Node.js project:

  npm init -y
  

1. Install Express and other dependencies:

   npm install express mongoose dotenv cors bcryptjs jsonwebtoken
   

Step 9: Connecting to MongoDB

Set up a connection to MongoDB using Mongoose

• Use the following code in your server file:

  const mongoose = require('mongoose');
  mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true });
  

Step 10: Creating Authentication APIs

Implement APIs for user Login, Sign-Up, and fetching user information

• Use JWT for authentication:

  const jwt = require('jsonwebtoken');
  

Step 11: Creating Income and Expense APIs

Create APIs to add, get, and delete income and expenses

• Example endpoint for adding income:

  app.post('/api/income', (req, res) => {
      // Handle income addition logic
  });
  

Step 12: Creating the Dashboard Page

Layout the Dashboard

• Use cards to display total balance, income, and expenses.
• Implement sections for recent transactions and financial overviews with charts.

Step 13: Implementing Interactive Charts

1. Use libraries like Chart.js to create visual representations of income and expenses.
   • Example for a pie chart:

     const data = {
         labels: ['Income', 'Expenses'],
         datasets: [{
             data: [incomeAmount, expenseAmount],
             backgroundColor: ['#36A2EB', '#FF6384'],
         }],
     };
     

Step 14: Adding Export Functionality

Implement functionality to download reports in Excel format

• Use libraries like xlsx to convert data to Excel.

Conclusion

You have now built a fully functional Expense Tracker App using the MERN stack. This project has provided experience in setting up both frontend and backend components, creating APIs, and implementing user authentication. As next steps, consider deploying your application and adding more features like notifications or a user settings page. Happy coding!