SplitMate - Group Expense Tracker

SplitMate is a modern web application that helps groups track and split expenses easily. No sign-up required - just create a group and share the link with your friends!

Features

• 🎯 Create groups with unique shareable links
• 💰 Add and track expenses
• 👥 Split bills among multiple members
• 📊 View balance sheets and settlement suggestions
• 📱 Mobile-friendly interface
• 📤 Export data as CSV/PDF
• 💳 Optional payment integration (UPI/Venmo/PayPal)

Tech Stack

• Frontend: React + Tailwind CSS
• Backend: Node.js + Express
• Database: MongoDB Atlas
• State Management: React Context API
• PDF Export: jsPDF
• Deployment: Vercel (Frontend) + Render (Backend)

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• MongoDB (local or Atlas)

Local Development Setup

1. Clone the repository:

   git clone https://github.com/yourusername/splitmate.git
   cd splitmate

2. Install dependencies:

   npm install

3. Set up MongoDB:

   • For local development:

     # Install MongoDB (macOS)
     brew tap mongodb/brew
     brew install mongodb-community
     
     # Start MongoDB service
     brew services start mongodb-community

   • Or use MongoDB Atlas (cloud):
     • Create a free account at MongoDB Atlas
     • Create a new cluster
     • Get your connection string

4. Set up environment variables:

   Create .env in the server directory:

   PORT=5000
   MONGODB_URI=mongodb://localhost:27017/splitmate
   CORS_ORIGIN=http://localhost:3000
   

   Create .env in the client directory:

   REACT_APP_API_URL=http://localhost:5000/api
   

5. Start development servers:

   npm run dev

The application will be available at:

• Frontend: http://localhost:3000
• Backend: http://localhost:5000

Deployment Instructions

Frontend Deployment (Vercel)

1. Create a Vercel account at vercel.com
2. Install Vercel CLI:

   npm install -g vercel

3. Deploy the client:

   cd client
   vercel

Backend Deployment (Render)

1. Create a Render account at render.com
2. Create a new Web Service
3. Connect your GitHub repository
4. Configure the service:
   • Build Command: npm install && npm run build
   • Start Command: npm start
   • Add environment variables:

     PORT=5000
     MONGODB_URI=your_mongodb_atlas_uri
     CORS_ORIGIN=your_vercel_frontend_url
     

Database Setup (MongoDB Atlas)

1. Create a MongoDB Atlas account
2. Create a new cluster (free tier is sufficient)
3. Set up database access:
   • Create a database user
   • Set up IP whitelist (or allow access from anywhere for development)
4. Get your connection string and update the backend's MONGODB_URI

Production Environment Variables

Update the client's .env in Vercel:

REACT_APP_API_URL=https://your-render-backend-url/api

Project Structure

splitmate/
├── client/                 # React frontend
│   ├── src/
│   │   ├── components/    # Reusable components
│   │   ├── pages/        # Page components
│   │   ├── contexts/     # React contexts
│   │   └── utils/        # Utility functions
│   └── public/           # Static assets
├── server/                # Express backend
│   ├── routes/           # API routes
│   ├── controllers/      # Route controllers
│   └── models/           # Database models
└── package.json          # Root package.json

API Documentation

Groups

• POST /api/groups - Create a new group
• GET /api/groups/:id - Get group details
• GET /api/groups/:id/expenses - Get group expenses
• GET /api/groups/:id/balances - Get group balances

Expenses

• POST /api/expenses - Add new expense
• GET /api/expenses/:id - Get expense details
• DELETE /api/expenses/:id - Delete expense

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.