Never have another awkward "who owes what" conversation again!
📱 Mobile View
💻 Desktop Dashboard
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
|
|
|
|
|
|
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
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 |
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 |
- Node.js 18+ installed
- npm or yarn package manager
- MongoDB instance (local or Atlas)
-
Clone & Install
# Clone the repository git clone https://github.com/your-username/splitease-frontend.git cd splitease-frontend # Install dependencies npm install
-
Configure Environment
# Create .env.local file cp .env.example .env.local # Edit your environment variables nano .env.local
-
Start Development Server
npm run dev
-
Open Browser
http://localhost:3000
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
npm test # run all tests
npm run test:watch # watch mode
npm run test:coverage # with coverage report
npm run type-check # TypeScript checkTest files live under __tests__/ and use Jest + React Testing Library:
| Suite | Coverage |
|---|---|
utils/formatCurrency |
all currencies, string/NaN input, unknown codes |
utils/constants |
every exported array and object |
components/ErrorBoundary |
render, error fallback, custom fallback, refresh button |
Every push and pull request to master runs four jobs in sequence:
Lint → Type Check → Tests (+ coverage artifact) → Build
Set the NEXT_PUBLIC_API_URL repository secret for the Build step.
No build command changes needed — Vercel auto-detects Next.js and runs next build.
Add NEXT_PUBLIC_API_URL under Vercel → Settings → Environment Variables.
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
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- 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
- 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
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ by CodeTirtho97
