SplitWise
Splitwise Clone is a group expense management web app, simplifying bill splitting and tracking. Built with React and Tailwind CSS, it offers an intuitive interface for managing groups, friends, and tracking expenditures
Install / Use
/learn @PawanSirsat/SplitWiseREADME
🤝 Looking for Collaborators
I’m actively looking for collaborators to help add new features and enhance this project further!
If you have ideas, expertise, or just the enthusiasm to contribute, feel free to:
- Fork this repository and start contributing.
- Reach out to me at p1.sirsat1998@gmail.com to discuss ideas or ask questions.
✨ Together, we can make this project even better! ✨
📄 SplitWise Clone Installation Guide
📚 Table of Contents
- 📥 Clone the Repository
- 📦 Install Dependencies
- 🎨 Install and Configure Tailwind CSS
- 🗄️ Setup Appwrite (Database Configuration)
- 🚀 Run the Project
- 🌐 Deploy on Vercel
- 📧 Need Help?
- 🎥 Appwrite Database Guide Video
- 📑 Documentation
- 📊 Database Design
- 🔄 Flowchart
- 💸 Simplify Debt Flowchart
📥 1. Clone the Repository
Begin by cloning the SplitWise repository to your local machine:
git clone https://github.com/PawanSirsat/SplitWise.git
📦 2. Install Dependencies
Navigate to the project directory and install the required Node.js packages:
cd splitwise
npm install
🎨 3. Install and Configure Tailwind CSS
Install Tailwind CSS and initialize it in your project:
npm install -D tailwindcss
npx tailwindcss init
🗄️ 4. Setup Appwrite (Database Configuration)
🚀 Quick Option: Import My Database Setup (Migration)
Skip the manual steps below and directly migrate my database configuration and data!
- Create a new project in Appwrite.
- Go to Settings → Migrations → Import Project Data.
- Use the following required details:
- Endpoint
- Project ID
- API Key
I can provide these details to you. Just email me at p1.sirsat1998@gmail.com, and I’ll share them with you!
This automated process ensures you avoid errors and get started instantly.
🛠️ Manual Option: Create the Database Yourself
If you prefer to set up the database manually, follow these steps:
🔑 Step 1: Create an Appwrite Account
- Sign up for an Appwrite account at Appwrite.
📁 Step 2: Create a New Project
- In the Appwrite dashboard, create a new project (e.g., Splitwise).
🛠️ Step 3: Setup the Database
- Go to the Databases section and create a new database (e.g., Expense).
🏗️ Step 4: Create Collections
- Create the following collections and there attributes within your database:
⚠️ Warning: Ensure that you use the attribute names and related collections exactly as mentioned below. To avoid errors, copy and paste the names directly where applicable.
-
Users
- UserName:
string(Default:-) - name:
string(Default:-) - email:
email(Default:-) - accountId:
string(Default:-)
- UserName:
-
Groups
- groupName:
string(Default:-) - Creator:
Relationship(Two-way Relationship withUsers;Many to one, Attribute Key (related collection):groups, Cascade on delete) - Members:
Relationship(Two-way Relationship with Users;Many to Many, Attribute Key (related collection):UserMember, Set Null on delete)
- groupName:
-
Friends
- friendsId:
Relationship(Two-way Relationship with Users;Many to many, Attribute Key (related collection):friendCollection, Set Null on delete) - CollectionId:
Relationship(Two-way Relationship with Users;Many to one, Attribute Key (related collection):List, Set Null on delete)
- friendsId:
-
Activity
- Desc:
string(Default:-) - Time:
DateTime(Default:-) - Amout:
string(Default:-) Note: If you change this spelling (Amout), update it in the React app. - IsSettled:
boolean(Default:false) - splitMember:
Relationship(Two-way Relationship with Users;Many to many, Attribute Key (related collection):members, Set Null on delete) - PaidBy:
Relationship(Two-way Relationship with Users;Many to one, Attribute Key (related collection):activity, Set Null on delete) - Group:
Relationship(Two-way Relationship with Groups;Many to one, Attribute Key (related collection):activity, Cascade on delete)
- Desc:
-
Transaction
- Amount:
string(Default:-) - Time:
DateTime(Default:-) - IsOld:
boolean(Default:false) - payerId:
Relationship(Two-way Relationship with Users;Many to one, Attribute Key (related collection):transaction, Set Null on delete) - receiverId:
Relationship(Two-way Relationship with Users;Many to one, Attribute Key (related collection):transactionId, Set Null on delete)
- Amount:
🔒 Step 5: Update Collection Permissions
-
Navigate to Collection Settings:
- In your Appwrite dashboard, open the Collection Settings for each collection that requires permission changes.
-
Modify Permissions:
- For each collection, go to the Settings tab.
- Under the Permissions section, update the role to
Any. - Ensure that the following permissions are checked:
- Create
- Read
- Update
- Delete
-
Save Changes:
- Repeat the process for each collection, ensuring the correct permissions are applied.
🔑 Step 6: Copy IDs to .env File
- In Project Settings, copy the Project ID and API Endpoint.
- Copy the Database ID and all Collection IDs from the database.
- Create a
.env.localfile and add the copied IDs as follows: - Now no need of
.env.sample
Sample .env.local File
VITE_APPWRITE_URL='https://cloud.appwrite.io/v1'
VITE_APPWRITE_PROJECT_ID='67c067565211fbcf173'
VITE_APPWRITE_DATABASE_ID='657c0953b37f27853d8'
VITE_APPWRITE_USER_COLLECTION_ID='657casd56db7f49cee3b20'
VITE_APPWRITE_GROUPS_COLLECTION_ID='657c09839424664asd87496'
VITE_APPWRITE_ACTIVITY_COLLECTION_ID='657c099dd2eda1ddebb'
VITE_APPWRITE_FRIENDS_COLLECTION_ID='681b28b356casds5dd28d'
VITE_APPWRITE_TRANSACTION_COLLECTION_ID='65aasd54f3a07aec3c8'
🚀 5. Run the Project
Finally, start the development server:
npm run dev
🌐 6. Deploy on Vercel
-
Deploy on Vercel:
- Go to Vercel and sign in or sign up.
- Connect your GitHub account and select the Git repository of the project you want to deploy.
- Follow the prompts to deploy your project. Vercel will handle the deployment and provide you with a live URL once completed.
- Add .env.local in Vercel Spliwise Project Go in Settings Environment Variables And Paste Your all .env.local in that
-
Configure Appwrite Integration:
- After deployment, copy the Vercel deployment URL (e.g.,
https://your-project-name.vercel.app). - Log in to your Appwrite dashboard.
- Go to your Project Overview and scroll down to the Integrations section.
- Click Add Platform and select
Web App. - In the
Namefield, paste your Vercel deployment URL, and in theHostnamefield, enter*.vercel.app.
- After deployment, copy the Vercel deployment URL (e.g.,
-
Complete Setup:
- Skip any additional configurations unless required by your project setup.
- Your app is now deployed and integrated with Appwrite! 🎉
📧 Need Help?
If you encounter any issues with the database or need further assistance, feel free to email me at: p1.sirsat1998@gmail.com.
🎥 Appwrite Database Guide Video
https://github.com/user-attachments/assets/a09c0edf-5d71-4417-b03d-39db91105be6
📑 Documentation
📂 Google Drive
Google Drive Complete Application DOC
📄 DOC PDF
📊 Database Design
🔄 Flowchart
💸 Simplify Debt Flowchart
Login
Signup
Home
All Activity
Grou
Related Skills
node-connect
341.0kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
84.4kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
341.0kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
commit-push-pr
84.4kCommit, push, and open a PR
