SplitSmart is a modern, AI-powered expense sharing application designed to simplify group expense management. Built with React, TypeScript, and enhanced with beautiful animations, it offers an intuitive way to track, split, and settle expenses among friends, family, or colleagues.
- 🤖 AI-Powered Receipt Scanning - Automatically extract expense details from receipts
- 🧠 Smart Expense Categorization - AI suggests categories based on expense descriptions
- 👥 Group Management - Create and manage multiple expense groups
- 💰 Flexible Splitting - Equal, exact amounts, or percentage-based splits
- 📊 Real-time Balance Tracking - See who owes what at a glance
- 🔔 Smart Notifications - Stay updated on group activities
- 📱 Responsive Design - Works seamlessly on desktop and mobile
- 🎨 Beautiful UI/UX - Modern design with smooth animations
- 🌙 Dark Theme - Easy on the eyes with a sleek dark interface
Experience SplitSmart live: https://bright-bonbon-42beac.netlify.app
Demo Credentials:
- Email:
rahul@example.com - Password:
any password
Login and signup screens with animated backgrounds
Overview of your financial status and recent activities
Create and manage expense sharing groups
Smart expense creation with AI assistance
Track and review all your expenses
Manage your account and preferences
- React 18.3.1 - Modern React with hooks and functional components
- TypeScript 5.5.3 - Type-safe development
- Tailwind CSS 3.4.1 - Utility-first CSS framework
- Framer Motion 10.16.16 - Smooth animations and transitions
- Lucide React - Beautiful, customizable icons
- React Hot Toast - Elegant notifications
- Vite 5.4.2 - Fast build tool and development server
- ESLint - Code linting and quality assurance
- PostCSS - CSS processing with Autoprefixer
- React Context API - Global state management
- useReducer Hook - Complex state logic handling
- Local Storage - Persistent user sessions
graph TD
A[Landing Page] --> B{User Logged In?}
B -->|No| C[Auth Screen]
C --> D[Login Form]
C --> E[Signup Form]
D --> F[Validate Credentials]
E --> G[Create Account]
F -->|Success| H[Dashboard]
G -->|Success| H[Dashboard]
F -->|Error| I[Show Error Message]
G -->|Error| I[Show Error Message]
I --> C
Key Features:
- Animated login/signup forms with smooth transitions
- Form validation with real-time feedback
- Demo credentials for easy testing
- Persistent sessions using localStorage
- Beautiful error handling with toast notifications
graph TD
A[Groups Page] --> B[View All Groups]
B --> C[Create New Group]
B --> D[Select Existing Group]
C --> E[Fill Group Details]
E --> F[Add Members by Email]
F --> G[Create Group]
D --> H[Group Details View]
H --> I[View Members]
H --> J[View Expenses]
H --> K[View Balances]
H --> L[Edit Group]
H --> M[Delete Group]
Key Features:
- Visual group cards with member avatars
- Real-time balance calculations
- Member management with email invitations
- Group statistics and expense summaries
- Animated modals for create/edit/delete operations
graph TD
A[Add Expense] --> B[Choose Input Method]
B --> C[Manual Entry]
B --> D[Receipt Upload]
D --> E[AI Processing]
E --> F[Extract Data]
F --> G[Review & Confirm]
C --> H[Enter Details]
H --> I[AI Categorization]
I --> J[Select Group]
J --> K[Choose Split Method]
K --> L[Equal Split]
K --> M[Custom Split]
K --> N[Percentage Split]
L --> O[Calculate Shares]
M --> O
N --> O
O --> P[Save Expense]
P --> Q[Update Balances]
Q --> R[Send Notifications]
Key Features:
- AI-powered receipt scanning and data extraction
- Smart expense categorization with confidence scores
- Multiple splitting methods (equal, exact, percentage)
- Real-time split calculations
- Visual split preview with member avatars
graph TD
A[View Balances] --> B[Group Balance]
A --> C[Overall Balance]
B --> D[Individual Debts]
B --> E[Individual Credits]
D --> F[Settlement Options]
E --> F
F --> G[Record Payment]
G --> H[Update Balances]
H --> I[Notify Parties]
Key Features:
- Real-time balance calculations
- Visual debt/credit indicators
- Settlement tracking and history
- Automatic balance updates
- Notification system for payments
graph TD
A[User Action] --> B[Trigger Event]
B --> C[Create Notification]
C --> D[Store in Context]
D --> E[Update UI Badge]
E --> F[User Views Notifications]
F --> G[Mark as Read]
G --> H[Update Badge Count]
Key Features:
- Real-time notification updates
- Categorized notification types
- Unread count badges
- Interactive notification dropdown
- Automatic read status management
- Node.js 18+
- npm or yarn package manager
-
Clone the repository
git clone <repository-url> cd splitsmart
-
Install dependencies
npm install
-
Start development server
npm run dev
-
Open in browser
http://localhost:5173
# Build the application
npm run build
# Preview production build
npm run preview-
Sign Up/Login
- Use demo credentials:
rahul@example.comwith any password - Or create a new account with your details
- Use demo credentials:
-
Create Your First Group
- Navigate to Groups tab
- Click "Create Group"
- Add group name, description, and member emails
- Save to create the group
-
Add Your First Expense
- Go to Add Expense tab
- Choose between manual entry or receipt upload
- Let AI categorize your expense
- Select the group and split method
- Save the expense
-
Track Balances
- View dashboard for overall summary
- Check individual group balances
- Monitor who owes what to whom
- Upload receipt images (JPG, PNG)
- AI extracts amount, merchant, and items
- Automatic categorization with confidence scores
- Review and edit extracted data before saving
- Type expense description
- Click AI button for smart categorization
- Get category suggestions with reasoning
- High accuracy for common Indian expenses
- Equal Split: Divide equally among all members
- Exact Amount: Specify exact amounts for each person
- Percentage: Split by percentage shares
- Filter by group, category, or date range
- Search expenses by description
- View detailed expense breakdowns
Currently, the app uses mock data and doesn't require external APIs. For production deployment with real backends, you would configure:
VITE_API_URL=your_api_endpoint
VITE_AI_SERVICE_URL=your_ai_service_endpointThe app uses a dark theme by default. To customize:
- Modify Tailwind config in
tailwind.config.js - Update color schemes in component files
- Adjust gradient combinations for visual elements
Currently supports INR (₹) with infrastructure for:
- USD ($)
- EUR (€)
- GBP (£)
Add new currencies in src/components/Profile.tsx
The app is optimized for Netlify deployment:
-
Automatic Deployment
- Connect your GitHub repository
- Netlify auto-detects Vite configuration
- Builds and deploys automatically
-
Manual Deployment
npm run build # Upload dist/ folder to Netlify
- Vercel: Works out of the box with Vite
- GitHub Pages: Requires base path configuration
- Firebase Hosting: Standard static site deployment
We welcome contributions! Here's how to get started:
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature
- Make your changes
- Commit with descriptive messages
git commit -m "Add amazing feature" - Push to your branch
git push origin feature/amazing-feature
- Open a Pull Request
- Follow TypeScript best practices
- Use Tailwind CSS for styling
- Maintain component modularity
- Add proper error handling
- Write descriptive commit messages
This project is licensed under the MIT License - see the LICENSE file for details.
- Design Inspiration: Modern fintech applications
- Icons: Lucide React
- Images: Pexels
- Animations: Framer Motion
- UI Framework: Tailwind CSS
For support, questions, or feature requests:
- Create an issue on GitHub
- Email: support@splitsmart.app
- Documentation: Wiki
- Real-time synchronization
- Mobile app (React Native)
- Payment gateway integration
- Advanced AI insights
- Multi-currency support
- Expense analytics and reports
- Social features and sharing
- Offline mode support
- v1.0.0 - Initial release with core features
- v1.1.0 - AI-powered receipt scanning
- v1.2.0 - Enhanced notifications system
- v1.3.0 - Advanced splitting options
Made with ❤️ by the SplitSmart Team