Split Wise

🔗 Live Preview

---

About Project 👋

This app was developed as a part of the 6-week Chingu Voyage 51 around September 2024. The purpose of the app is to solve the problem of splitting expenses with a group of friends or any number of people. In this app, the user is supposed to be able to create groups, input expenses/budget, add/remove friends, and many more functionalities. However, due to the complexity of the app logic and time constraints, the team did not manage to fully implement all the features, therefore it remains to be revisited and completed post voyage.

---

Features 👨‍💻

• Add/remove/edit groups

• Add/remove group members

• Add/update group expenses and budget

• Toggle dark/light mode across the app

• Be able to select different groups, from the sidebar and the homepage as well

• Edit how much percent each member contributes to the expense

---

How it works ⚙️

• Upon entering the app, the user sees a homepage and a sidebar on the left.

• On this homepage, the user can:

  1. Create a new group.
  2. Remove an existing group.
  3. Open details of the default group always present.
  4. Search groups, if there are many groups.

• Then the user can open group details by clicking a button insise a group card, for that specific group.

• The user is now on a dedicated group page with all the details for that group.

• From there, the user can do many things, such as:

  1. Edit group's name and image.
  2. Edit the group's budget and total expense.
  3. Add or remove members to the group .
  4. Assign different pictures to new members, if no picture is selected, a default picture will be assigned to member.
  5. See the contributions of the members to total expense. By default all members contribute equally.
  6. Edit contributions so that some members can contribute more and some less.

---

Technologies & Dependencies used 📦

• React: for all the logic, many React features were used: conditionals, components, useState, useEffect, functions...

• Redux Toolkit: for global state management.

• React Icons: for all the icons in the app.

• React Toastify: for all the beautiful notifications the user receives upon performing and action.

• React Router: for all routing needs.

• Tailwind: for all styling, dark mode, custom classes...

• Recharts: for all the charts used in the app.

dependencies:

• "@reduxjs/toolkit": "^2.2.7",
• "react": "^18.3.1",
• "react-dom": "^18.3.1",
• "react-icons": "^5.3.0",
• "react-redux": "^9.1.2",
• "react-router-dom": "^6.26.2",
• "react-toastify": "^10.0.5",
• "recharts": "^2.12.7"

devDependencies:

• "@eslint/js": "^9.9.0",
• "@types/react": "^18.3.3",
• "@types/react-dom": "^18.3.0",
• "@vitejs/plugin-react": "^4.3.1",
• "autoprefixer": "^10.4.20",
• "eslint": "^9.9.0",
• "eslint-plugin-react": "^7.35.0",
• "eslint-plugin-react-hooks": "^5.1.0-rc.0",
• "eslint-plugin-react-refresh": "^0.4.9",
• "globals": "^15.9.0",
• "postcss": "^8.4.45",
• "tailwindcss": "^3.4.10",
• "vite": "^5.4.1"

---

Prerequisites 📚

Ensure you have the following installed on your system:

Node.js v18.00.0
npm or yarn

---

Clone & Run locally 🏃‍♂️

1. Clone the Repository:

   • On the GitHub repo page, click the green "Code" button.

   • Copy the HTTPS URL.

2. Open the Terminal:

   • Open the terminal by typing "cmd" in your desktop's start menu, OR

   • Right-click on the desktop and select "Git Bash Here" (if you have Git Bash installed), OR

   • Open Visual Studio Code's terminal by clicking "Terminal" -> "New Terminal" inside the editor.

3. Navigate to Your Project Location:

   • In the terminal, navigate to your desired location (e.g., desktop) using the command: cd desktop. Adjust the path if your project is located elsewhere.

   • Ensure that your terminal's address is inside the project folder.

4. Clone the Repository:

   • Run the command: git clone /link/. Replace /link/ with the HTTPS URL from step 1.

5. Enter the Project Directory:

   • Navigate into the cloned repository by typing: cd /folder-name/. Replace /folder-name/ with the name of the cloned folder.

6. Install Dependencies:

   • Run the command: npm install to install all the necessary dependencies.

7. Start the Project:

   • Run the command: npm run dev or yarn dev to start the project. You will need to manually open the browser address at localhost:5173/

---

Contributing 💻

Even though the Voyage is over, Feel free to fork the project, and edit it, or play around, or maybe even implement a feature.

---

Team 🎇

Voyage 51 - team 22. September 2024

• Tochi, Product Owner: GitHub / LinkedIn

• Predrag (Peter), Developer: GitHub / LinkedIn

• Mandla (Cash), Developer: GitHub / LinkedIn

• Jordi, Developer: GitHub / LinkedIn

• Farzaneh, UX/UI Designer: GitHub / LinkedIn

• Afrah, Scrum Master: GitHub / LinkedIn

---

Special Thanks 🙏

We as a whole team would like to thank Chingu platform and community for this opportunity to learn, improve and collaborate. Even though we did not fulfill the MVP for our app, we have learned a great amount of things in technical and non-technical areas. Thank you Chingu !

Chingu is a platform that helps developers and other people in tech related roles practice in-demand skills and accelerate their learning through collaboration and project-building.

Learn more about Chingu platform at https://www.chingu.io/

---