🌟 SplitEase - Split Bills With Friends Easily 🌟

🔥 Effortlessly Split Bills, Track Expenses & Settle Payments with Friends 🔥

Never have another awkward "who owes what" conversation again!

🎬 Demo & Screenshots

📱 Mobile View

💻 Desktop Dashboard

✨ Why SplitEase?

Have you ever found yourself stuck with a calculator trying to figure out who owes what after a dinner? Or chasing roommates for utility bills month after month? SplitEase solves all of that!

• 🧠 Smart Splitting - Equal, percentage, or custom splits with just a few taps
• 🔍 Crystal Clear - See who owes what at a glance
• 🎯 Stay on Target - Track group expenses and settlement ratios
• 📱 Anywhere, Anytime - Fully responsive across all devices

✅ Feature Highlights

💸 Expense Management Multiple split methods (Equal, %, Custom) Expense categorization Receipt photo uploads Recurring expense support	👥 Group Management Create themed groups (Travel, Household, etc.) Invite via email or in-app Group statistics & insights Activity tracking & history	📊 Visual Analytics Category-based pie charts Monthly spending trends Settlement progress tracking Customizable date ranges
💰 Payment System Multiple payment methods Settlement verification Payment request notifications Transaction history	🔐 Secure Authentication JWT with HTTP-only cookies Google OAuth integration Password reset functionality Account management	✨ User Experience Smooth animations with Framer Motion Intuitive UI/UX design Dark/light theme support Responsive across all devices

🔨 Technology Stack & Architecture

🏗️ Architecture Overview

graph TD
    User[User] --> Frontend[Frontend: Next.js]
    Frontend --> API[Backend API: Express.js]
    API --> MongoDB[(MongoDB Database)]
    API --> Auth[Authentication Service]
    API --> CloudStorage[Cloud Storage: Cloudinary]

    subgraph "Frontend Components"
        Frontend --> Components[UI Components]
        Frontend --> ContextAPI[React Context API]
        Frontend --> Hooks[Custom Hooks]
    end

    subgraph "Backend Services"
        API --> ExpenseService[Expense Service]
        API --> GroupService[Group Service]
        API --> UserService[User Service]
        API --> PaymentService[Payment Service]
    end

Loading

🎭 Frontend (This Repository)

View detailed tech stack

Category	Technologies
Framework	Next.js 15 with App Router
Language	TypeScript
Styling	TailwindCSS with custom animations
State Management	React Context API
Authentication	JWT with HTTP-only cookies
Data Visualization	Chart.js with react-chartjs-2
Animations	Framer Motion
Icons	FontAwesome
HTTP Client	Axios
Form Management	React Hook Form

🧠 Backend

View backend tech stack

Category	Technologies
Runtime	Node.js
Framework	Express.js
Database	MongoDB with Mongoose
Authentication	JWT, Google OAuth
Cloud Storage	Cloudinary (for profile images)
API Documentation	Swagger/OpenAPI

👉 View Backend Repository

🚀 Getting Started

Requirements

• Node.js 18+ installed
• npm or yarn package manager
• MongoDB instance (local or Atlas)

Quick Start

1. Clone & Install

   # Clone the repository
   git clone https://github.com/your-username/splitease-frontend.git
   cd splitease-frontend
   
   # Install dependencies
   npm install

2. Configure Environment

   # Create .env.local file
   cp .env.example .env.local
   
   # Edit your environment variables
   nano .env.local

3. Start Development Server

   npm run dev

4. Open Browser

   http://localhost:3000
   

🏗️ Project Structure

View folder structure

📂 SplitEase-Frontend
├── 📂 app/                      # Next.js App Router pages
│   ├── 📂 auth/                 # Authentication-related pages
│   ├── 📂 dashboard/            # User dashboard
│   ├── 📂 expenses/             # Expense management
│   ├── 📂 groups/               # Group management
│   ├── 📂 payments/             # Payment processing
│   ├── 📂 profile/              # User profile
│   └── 📄 layout.tsx            # Root layout component
├── 📂 components/               # Reusable UI components
│   ├── 📄 Button.tsx            # Custom button component
│   ├── 📄 ExpenseModal.tsx      # Expense creation modal
│   ├── 📄 Navbar.tsx            # Navigation component
│   └── ... (20+ components)
├── 📂 context/                  # React Context providers
│   ├── 📄 authContext.tsx       # Authentication context
│   ├── 📄 groupContext.tsx      # Group management context
│   └── ... (4 contexts)
├── 📂 public/                   # Static assets
├── 📂 utils/                    # Utility functions
│   └── 📂 api/                  # API client functions
└── 📂 types/                    # TypeScript type definitions

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

How to contribute

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

🎨 UI/UX Highlights

• Intuitive Interfaces with minimal learning curve
• Micro-interactions for user engagement
• Animated transitions for seamless navigation
• Mobile-first approach with responsive layouts
• Consistent design language across all components

🛣️ Roadmap

• Native Mobile App using React Native
• Push Notifications for real-time updates
• Currency conversion based on real-time exchange rates
• Expense scanning with OCR technology
• Budget planning and expense forecasting
• Group expense suggestions with AI

📫 Contact & Support

📄 License

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

Made with ❤️ by CodeTirtho97