- π₯ 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
Begin by cloning the SplitWise repository to your local machine:
git clone https://github.com/PawanSirsat/SplitWise.git
Navigate to the project directory and install the required Node.js packages:
cd splitwise
npm install
Install Tailwind CSS and initialize it in your project:
npm install -D tailwindcss
npx tailwindcss init
- Sign up for an Appwrite account at Appwrite.
- In the Appwrite dashboard, create a new project (e.g., Splitwise).
- Go to the Databases section and create a new database (e.g., Expense).
Create the following collections within your database:
-
Users
- UserName:
string
(Default:-
) - name:
string
(Default:-
) - email:
email
(Default:-
) - accountId:
string
(Default:-
)
- UserName:
-
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)
- 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:
-
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.
- In Project Settings, copy the Project ID and API Endpoint.
- Copy the Database ID and all Collection IDs from the database.
- Create a
.env.local
file and add the copied IDs as follows:
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'
Finally, start the development server:
npm run dev
-
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.
-
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 theHostname
field, 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! π
If you encounter any issues with the database or need further assistance, feel free to email me at: p1.sirsat1998@gmail.com.
Splitwise.mp4
Google Drive Complete Application DOC
React - A JavaScript library for building user interfaces. React Router - Declarative routing for React.js. Tailwind CSS - A utility-first CSS framework.
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
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
toplugin:@typescript-eslint/recommended-type-checked
orplugin:@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 theextends
list