Split Bill 💸

A beautiful, premium group expense-sharing and bill-splitting mobile application built with React Native (Expo) and a robust Node.js/Express/MongoDB backend. The application makes it easy to track group expenses, divide bills, view detailed activity feeds, and seamlessly settle balances with other group members.

---

🚀 Key Features

• Secure Authentication: Custom user registration and login, fortified with OTP (One-Time Password) verification sent via email.
• Dynamic Group Management: Create new expense groups, join existing ones using group codes, and manage active group memberships.
• Flexible Expense Splitting: Add complex expenses specifying who paid and splitting the amounts automatically or manually.
• Simplified Settlements ("Settle Up"): Log repayments and settlements between group members to clean up dues quickly.
• Interactive Activity Feed: Stay updated with a real-time notification/activity log tracking all group transactions and changes.
• Modern UI/UX: Pristine dark/light elements, smooth transitions, custom visual feedback (focus states, clean borders, custom shadows), and complete responsiveness.

---

🛠️ Tech Stack

Frontend (Mobile App)

• Framework: React Native with Expo (SDK 56)
• Routing: Expo Router (File-based navigation)
• State Management: React Context API (AuthContext, GroupContext)
• Styling: Custom modern styling using vanilla StyleSheet and unified design tokens in theme.ts
• Vector Icons: @expo/vector-icons (Ionicons)
• Storage: @react-native-async-storage/async-storage for local token persistence

Backend (API Server)

• Runtime Environment: Node.js
• Framework: Express.js
• Database: MongoDB with Mongoose ODM
• Authentication: JSON Web Tokens (JWT) & bcryptjs password hashing
• Email Deliverability: Nodemailer & Resend API for secure OTP transfers

---

📂 Project Directory Structure

split-bill/
├── backend/                  # Node.js/Express Backend Server
│   ├── config/               # Database and configuration files
│   ├── controllers/          # Business logic handlers for each resource
│   ├── models/               # MongoDB Mongoose schemas
│   ├── routes/               # Express routing configuration
│   ├── utils/                # Helper utilities (email senders, OTP handlers)
│   ├── middlewares/          # JWT authorization and validation middlewares
│   ├── server.js             # Entry point for the backend
│   └── package.json          # Backend dependencies and scripts
│
├── frontend/                 # React Native Expo App
│   ├── src/
│   │   ├── app/              # Expo Router pages (Auth pages, Tab layouts, screens)
│   │   ├── constants/        # Global theme configuration (colors, spacing, typography)
│   │   ├── context/          # React Contexts (AuthContext, GroupContext)
│   │   ├── services/         # API instance (Axios client setup with token interceptors)
│   │   └── hooks/            # Custom hooks
│   ├── assets/               # Static assets (images, splash screens, icons)
│   └── package.json          # Frontend dependencies and scripts
└── README.md                 # Project Documentation (This file)

---

⚙️ Setup & Installation

1. Prerequisites

Ensure you have the following installed on your system:

• Node.js (v18+)
• MongoDB (Local instance or MongoDB Atlas Cluster)
• Expo Go App (for mobile testing) or Xcode/Android Studio (for simulators)

2. Backend Setup

1. Navigate to the backend directory:

   cd backend

2. Install dependencies:

   npm install

3. Create a .env file in the backend/ root and populate it with your configuration details:

   PORT=5000
   MONGO_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret_key
   SMTP_HOST=smtp.gmail.com
   SMTP_PORT=465
   SMTP_SECURE=true
   SMTP_USER=your_email@gmail.com
   SMTP_PASS=your_app_specific_password
   RESEND_API_KEY=your_resend_api_key
   RESEND_FROM_EMAIL=onboarding@resend.dev

4. Start the backend development server:

   npm run dev

3. Frontend Setup

1. Navigate to the frontend directory:

   cd ../frontend

2. Install dependencies:

   npm install

3. The frontend is pre-configured to communicate with the deployed API in api.ts. If you want to point it to your local backend, change the return value of getBaseUrl():

   // To target your local backend:
   // Android Emulator: http://10.0.2.2:5000/api
   // iOS Simulator / Web: http://localhost:5000/api

4. Start the Expo development server:

   npx expo start -c

5. Scan the QR code with your Expo Go app (Android/iOS) or press w to run on Web, a for Android Emulator, or i for iOS Simulator.

---

🧪 Running Type Checks

Verify TypeScript compliance in the frontend using:

cd frontend
npx tsc --noEmit

---

📄 License

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