Expense Tracker Application

Hariksh Mahendra Suryawanashi — 2025-B-04012007A

Watch Demo Video

---

Overview

The Expense Tracker is a full-stack mobile application designed to help users manage their personal finances. It allows users to record daily expenses, categorize them, and view their spending history. The application features a robust backend for secure data storage and authentication, coupled with a responsive and intuitive React Native frontend.

---

Key Features

• User Authentication: Secure registration and login using JWT.
• Expense Management: Add, edit, and delete expenses with details like amount, category, date, and notes.
• Categorization: Organize expenses into categories for better tracking.
• History: View a scrollable list of all past expenses.
• Filtering: Filter expenses by date and category (planned).
• Data Persistence: All data is stored securely in a MySQL database.
• Dark Mode: Toggle between light and dark themes for better visibility.
• Virtual Members: Add members to groups without requiring them to have an account, perfect for splitting bills with non-users.

---

Technology Stack

Frontend

• Framework: React Native with Expo
• Navigation: React Navigation
• UI Components: React Native Paper
• HTTP Client: Axios

Backend

• Runtime: Node.js
• Framework: Express.js
• Database: MySQL
• ORM: Prisma
• Authentication: JSON Web Tokens (JWT)

---

Project Structure

Expense_tracker/
├── Backend/                # Express.js API and Prisma ORM
│   ├── prisma/             # Database schema and migrations
│   ├── src/                # Source code (controllers, routes, etc.)
│   └── package.json
├── Frontend/               # React Native Expo project
│   ├── expense_tracker/    # Main frontend code
│   └── package.json
└── README.md               # Project documentation

---

Getting Started

Follow these instructions to set up and run the project locally.

Prerequisites

• Node.js (v14 or higher)
• npm
• MySQL installed and running
• Expo Go app on your mobile device (or an emulator)

Backend Setup

1. Navigate to the backend directory:

   cd Backend

2. Install dependencies:

   npm install

3. Set up environment variables:

   • Create a .env file in the Backend directory.
   • Add your DATABASE_URL and JWT_SECRET:

     DATABASE_URL="mysql://user:password@localhost:3306/expense_tracker"
     JWT_SECRET="dev_secret_change_me"

     Note for Grader: Please use dev_secret_change_me as the JWT secret for testing purposes.

4. Run database migrations:

   npx prisma migrate dev

5. Start the server:

   npm start
   # or for development with nodemon
   npm run dev

   The server should be running on http://localhost:3000 (or your configured port).

Frontend Setup

1. Navigate to the frontend directory:

   cd Frontend/expense_tracker

2. Install dependencies:

   npm install

3. Configure API URL:

   • Ensure the frontend is pointing to your local backend IP address (not localhost if testing on a physical device).
   • Update the base URL in your API service file (e.g., src/services/api.js or similar).

4. Start the Expo development server:

   npm start

5. Run on device/emulator:

   • Physical Device: Scan the QR code with the Expo Go app.
   • Emulator: Press a for Android or i for iOS (macOS only).

---

License

This project is for educational purposes.