---

📄 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)

🔑 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 within your database:

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:

Sample .env 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.

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

Splitwise.mp4

---

📑 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