MERN Finance Tracker App with User Management - Build A Fullstack React Intermediate Project

Introduction

In this tutorial, we will build a fullstack finance tracker application using the MERN stack (MongoDB, Express, React, Node.js) with user management capabilities powered by Clerk. By the end of this project, you will have a solid understanding of how to create a scalable React application with authentication, allowing users to manage their finances effectively.

Step 1: Set Up Project Structure

• Create two main folders: client for the frontend and server for the backend.
• Use Yarn to create the React application with Vite:

  yarn create vite client --template react-ts
  

• Navigate into the client folder and install the necessary packages:

  cd client
  yarn install
  

Step 2: Configure Clerk for Authentication

• Sign up for a Clerk account and create a new application.
• Access the Clerk dashboard and set up authentication options (Google, GitHub, etc.) for your app.
• Install Clerk's React SDK in your client folder:

  yarn add @clerk/clerk-react
  

• Create a .env.local file in the client directory to store your Clerk publishable key:

  VITE_CLERK_FRONTEND_API=<your_publishable_key>
  

Step 3: Implement Routing

• Install React Router:

  yarn add react-router-dom
  

• In your App.tsx, set up basic routing:

  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
  
  function App() {
      return (
          <Router>
              <Routes>
                  <Route path="/" element={<Dashboard />} />
                  <Route path="/sign-in" element={<SignIn />} />
              </Routes>
          </Router>
      );
  }
  

Step 4: Create User Authentication Components

• Implement the sign-in component using Clerk’s pre-built components.
• Use the SignIn and SignUp components from Clerk:

  import {
      SignIn,
      SignUp,
      SignedIn,
      SignedOut
  } from '@clerk/clerk-react';
  

Step 5: Build the Dashboard

• Create a Dashboard component to display the financial records.
• Use Clerk's useUser hook to fetch user details and display a personalized greeting.
• Set up component state to hold financial records and implement a form to add new records.

Step 6: Create Financial Record Form

• Create a form for users to input financial data (description, amount, category, payment method).
• Use React state to manage form inputs and handle form submission:

  const handleSubmit = (event) => {
      event.preventDefault();
      // Logic to add a record to the database
  };
  

Step 7: Set Up Express Backend

• Inside the server folder, initialize a new Node.js application:

  yarn init -y
  

• Install necessary packages:

  yarn add express mongoose cors
  

• Create an index.ts file to set up your Express server and connect to MongoDB.

Step 8: Define MongoDB Schema

• In the server directory, create a folder called models and define the financial record schema:

  import mongoose from 'mongoose';
  
  const financialRecordSchema = new mongoose.Schema({
      userId: { type: String, required: true },
      date: { type: Date, default: Date.now },
      description: { type: String, required: true },
      amount: { type: Number, required: true },
      category: { type: String, required: true },
      paymentMethod: { type: String, required: true }
  });
  
  export default mongoose.model('FinancialRecord', financialRecordSchema);
  

Step 9: Create API Endpoints

• Set up Express routes to handle CRUD operations for financial records:

  import express from 'express';
  import FinancialRecord from './models/FinancialRecord';
  
  const router = express.Router();
  
  router.post('/records', async (req, res) => {
      const newRecord = new FinancialRecord(req.body);
      await newRecord.save();
      res.status(201).json(newRecord);
  });
  
  router.get('/records/:userId', async (req, res) => {
      const records = await FinancialRecord.find({ userId: req.params.userId });
      res.json(records);
  });
  
  // Further endpoints for update and delete
  

Step 10: Connect Frontend with Backend

• Use the Fetch API in your React application to connect with the backend:

  const addRecord = async (record) => {
      const response = await fetch('http://localhost:2001/records', {
          method: 'POST',
          headers: {
              'Content-Type': 'application/json'
          },
          body: JSON.stringify(record)
      });
      const data = await response.json();
      // Update state with new record
  };
  

Conclusion

In this tutorial, you've learned how to build a MERN stack finance tracker application with user management features using Clerk. You implemented authentication, built a functional UI for managing financial records, and created a robust backend to handle data storage. Next steps could include adding features like data visualization or enhancing user experience with better UI/UX practices.