🤝 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 [email protected] to discuss ideas or ask questions.

✨ Together, we can make this project even better! ✨

📄 SplitWise Clone Installation Guide

📚 Table of Contents

1. 📥 Clone the Repository
2. 📦 Install Dependencies
3. 🎨 Install and Configure Tailwind CSS
4. 🗄️ Setup Appwrite (Database Configuration)
   • 🔑 Create an Appwrite Account
   • 📁 Create a New Project
   • 🛠️ Setup the Database
   • 🏗️ Create Collections
   • 🔒 Update Collection Permissions
   • 🔑 Copy IDs to .env File
5. 🚀 Run the Project
6. 🌐 Deploy on Vercel
   • 🔌 Configure Appwrite Integration
7. 📧 Need Help?
8. 🎥 Appwrite Database Guide Video
9. 📑 Documentation
   • 📂 Google Drive
   • 📄 DOC PDF
10. 📊 Database Design
11. 🔄 Flowchart
12. 💸 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!

1. Create a new project in Appwrite.
2. Go to Settings → Migrations → Import Project Data.
3. Use the following required details:
   • Endpoint
   • Project ID
   • API Key

I can provide these details to you. Just email me at [email protected], 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.

1. Users

   • UserName: string (Default: -)
   • name: string (Default: -)
   • email: email (Default: -)
   • accountId: string (Default: -)

2. Groups

   • groupName: string (Default: -)
   • Creator: Relationship (Two-way Relationship with Users; 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)

3. 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)

4. 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)

5. 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)

🔒 Step 5: Update Collection Permissions

1. Navigate to Collection Settings:

   • In your Appwrite dashboard, open the Collection Settings for each collection that requires permission changes.

2. 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

3. Save Changes:

   • Repeat the process for each collection, ensuring the correct permissions are applied.

🔑 Step 6: Copy IDs to .env File

1. In Project Settings, copy the Project ID and API Endpoint.
2. Copy the Database ID and all Collection IDs from the database.
3. Create a .env.local file and add the copied IDs as follows:
4. 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

1. 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

2. 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 Name field, paste your Vercel deployment URL, and in the Hostname field, enter *.vercel.app.

3. 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

splitwise_documentation.pdf

📊 Database Design

🔄 Flowchart

💸 Simplify Debt Flowchart

Login

Signup

Home

All Activity

Group Activity

Profile

Built With

React - A JavaScript library for building user interfaces. React Router - Declarative routing for React.js. Tailwind CSS - A utility-first CSS framework.

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: ["./tsconfig.json", "./tsconfig.node.json"],
    tsconfigRootDir: __dirname,
  },
};

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list