Skip to content

README.md

Latest commit

 

History

History
107 lines (87 loc) · 5.33 KB

README.md

File metadata and controls

107 lines (87 loc) · 5.33 KB

💰 Expense Splitter

A full-stack web application built with React.js, Express.js, MySQL, and Prisma to simplify group expense management.
Expense Splitter helps users record, track, and settle shared expenses — whether it's for trips, shared apartments, or projects — ensuring fairness and transparency.

🧾 Introduction

Expense Splitter eliminates the manual hassle of dividing shared expenses among friends or groups.
It automatically calculates who owes whom, displays clear summaries, and keeps settlement records — all within a simple and responsive interface.

🎯 Goals

  • Simplify expense tracking and settlements.
  • Offer clear visibility into shared balances.
  • Maintain data consistency, security, and scalability.

⚙️ Features

Feature Description Rationale Implementation
1. User Authentication & Authorization Secure login/signup using JWT tokens. Ensures privacy and security for all users. Frontend: React + Context API.
Backend: Express + JWT.
DB: Prisma User model.
2. Group Creation & Management Create, join, and manage expense groups. Organize expenses by event or category. Frontend: Modals & list views.
Backend: Group routes in Express.
DB: Group + GroupMember models.
3. Add & Manage Expenses Record expenses with payer, participants, and date. Core functionality of the system. Frontend: React forms.
Backend: Expense CRUD routes.
DB: Expense, ExpenseSplit models.
4. Expense Splitting Logic Calculates each person's share and owed amount. Automates fairness and accuracy. Backend: Business logic in Express.
DB: Prisma aggregation queries.
5. Settlement Summary / Balances View Shows who owes whom and pending balances. Provides financial transparency. Frontend: Summary table & charts.
Backend: Aggregated balance endpoint.
6. Notifications / Activity Feed Alerts users when new expenses are added or updated. Improves collaboration and visibility. Frontend: Toast notifications.
Backend: Prisma event triggers.
7. Settlement Records Record repayments and maintain transaction history. Enables accountability and tracking. DB: Settlement model.
Backend: Settlement API routes.
8. Dashboard & Analytics Visual insights into total spend and owed amounts. Gives quick financial overview. Frontend: Recharts / Chart.js.
Backend: Analytics endpoint.
9. Responsive UI / Mobile Compatibility Optimized for phones, tablets, and desktops. Enhances accessibility. Frontend: TailwindCSS layouts.
10. Cloud Deployment & CI/CD Deployed using Vercel (frontend) & Render/Railway (backend). Ensures uptime and scalability. DB: PlanetScale / Supabase MySQL.

🧩 Technology Stack

Layer Technology Purpose / Reasoning
Frontend React.js (Vite) Component-based UI, fast builds, reactive SPA behavior.
React Router v6 Page routing and access protection.
Context API / Redux Toolkit Global state management (auth, groups, expenses).
Axios API communication with backend.
TailwindCSS Fast, responsive UI design.
Backend Node.js + Express.js Lightweight, scalable REST API server.
Database ORM Prisma Type-safe ORM for schema management and migrations.
Database MySQL Relational database for structured data and relationships.
Authentication JWT (JSON Web Tokens) Stateless and secure user authentication.
Deployment Frontend: Vercel / Netlify
Backend: Render / Railway
DB: PlanetScale		 Scalable and cloud-native CI/CD setup.
Version Control Git + GitHub Collaboration, version tracking, and CI workflows.

Project Structure

├── frontend/          # React frontend application
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   ├── context/       # Global state management
│   │   ├── pages/         # Page components
│   │   ├── routes/        # Routing configuration
│   │   ├── styles/        # CSS files
│   │   └── utils/         # Helper functions
│   └── package.json
│
├── backend/           # Express backend API
│   ├── src/
│   │   ├── config/        # Configuration files
│   │   ├── controllers/   # Request handlers
│   │   ├── middleware/    # Custom middleware
│   │   ├── routes/        # API routes
│   │   ├── services/      # Business logic
│   │   └── utils/         # Utility functions
│   ├── prisma/            # Database schema
│   └── package.json
│
└── .gitignore

Features

  • 🔐 User authentication (register/login)
  • 👥 Group management
  • 💰 Expense tracking and splitting
  • 📊 Balance calculations
  • ⚖️ Settlement suggestions
  • 📈 Analytics and visualizations

Tech Stack

Frontend

  • React 18
  • Vite
  • React Router DOM
  • Axios
  • Context API

Backend

  • Node.js
  • Express.js
  • Prisma ORM
  • MySQL
  • JWT Authentication
  • Bcrypt