MSohailShahzad1/Expense-Splitter: An app which easily manages the shared expenses between roommates · GitHub

Expense Splitter is a full-stack web application built using the MERN stack (MongoDB, Express.js, React, Node.js) with Tailwind CSS for styling and Chart.js for visualizing shared expenses.

It helps roommates, friends, or groups track shared expenses, split costs, and see who owes whom, with a user-friendly interface and clear debt summaries.

• ✅ Add expenses with name and amount
• ✅ View all expenses in a compact list
• ✅ Auto-calculate individual balances and shares
• ✅ Visual summary of who owes whom
• ✅ Pie chart using Chart.js to show debt flows
• ✅ Update and delete individual expenses
• ✅ Responsive design with Tailwind CSS
• ✅ No page reloads — all updates handled via shared React state

1. User adds an expense with name and amount
2. Expense is stored in MongoDB
3. React state updates in real-time — no reload needed
4. Split logic calculates who overpaid/underpaid
5. Debt graph shows "who owes whom" visually
6. Users can edit/delete any expense using buttons and popup forms

/client     → React frontend (Tailwind + Chart.js)
/server     → Express backend (MongoDB + REST API)
/README.md  → Project info

(You can add screenshots of your app interface here before committing to GitHub)

1. Clone the repo:

git clone https://github.com/yourusername/expense-splitter.git
cd expense-splitter

2. Setup .env file:

Add .env file in the backend folder
Add your PORT and MONGO_URL in it
Add .env file in the frontend 
Add your VITE_API_URL in it. 

3. Setup server:

cd backend
npm install
npm start

4. Setup client:

cd client
npm install
npm run dev

This app showcases:

• Full-stack MERN development
• Shared state handling
• Real-world utility
• React component structuring
• Data visualization

Great for internship, job applications, and portfolio!