Back to projects
Finance Tracker

Finance Tracker

Muhammad Hammad Afzal / November 23, 2024

Personal Finance Tracker is a web application designed to help users efficiently manage and track their financial transactions. Users can add income and expenses, categorize their spending, and visualize it through interactive graphs. The app aims to improve financial awareness by offering clear insights into spending habits and trends over time.

GitHub Repository: Personal Finance Tracker GitHub

Features

  • Add Income/Expense: Track your financial inflows and outflows.
  • View Transactions: See a complete record of all financial transactions.
  • Track Spending Through Graphs: Visualize spending patterns with multiple static graph views.
  • User Permissions: Admin users can edit or delete all transactions, while regular users can only modify their own.
  • Mobile Responsive: Access the app on smartphones and tablets.

Technologies Used

  • Frontend: React, TypeScript, Tailwind CSS
  • Backend: Node.js, Express, TypeScript
  • Database: MongoDB
  • API: REST

Getting Started

To get started with this project, you can clone the repository:

git clone https://github.com/MHammad33/personal-finance-tracker
cd personal-finance-tracker
npm install

Next step is to install the dependencies:

  • Navigate to the frontend folder:
cd frontend
npm install

  • Navigate to the backend folder:

    cd backend
npm install

    Set up the environment variables by creating a .env file:

    • Create a .env file in the root directory with the following variables:

       MONGODB_URI=<your-mongodb-uri>   # MongoDB URI for database connection
PORT=3001                        # Backend server port
REACT_APP_API_URL=http://localhost:5173  # URL for backend API
JWT_SECRET=<your-jwt-secret>     # JWT secret for authentication

      Note: Ensure to replace <your-mongodb-uri> with the actual URI string from your MongoDB account.

      Run the backend server:

    npm run server

The development server will start at http://localhost:5173.

Deployment

The project is deployed on Vercel. You can access it here: https://finance-frontend-rust-three.vercel.app/.

Conclusion

The Personal Finance Tracker is a comprehensive tool for managing personal finances. It allows users to track transactions, view insightful graphs, and categorize their expenses to understand their spending habits better.