search

chingu-voyages / v51-tier2-team-28

Add-project-description-here | Voyage-51 | https://chingu.io/ | Twitter: https://twitter.com/ChinguCollabs
0 stars 2 forks source link

readme

Expense Splitter

Screenshot

Overview:

This app was created to have a convenient way to split the bill between a group of friends. With a focus on smooth UX, we've designed our app to feel intuitive for the user to use and understand.

Features

Friends: Get started by adding friends. Add a friend to your friends list for expense group creation purposes. Friends have names and emails and can be removed or edited. Friends cannot be removed if connected to a group or expense.

Expense Group Management: After adding the friends you want for a group, you may now create an expense group. Create a group with a group name, description, budget, and friends. Individual groups keep track of progress for how much of the group's budget has been spent in expenses. Group details include a pie chart of how much of the budget was spent for each expense category. Once an expense group is created, you may now create expenses for the group.

Expense Management: Create an expense with details such as; name, description, category, amount, and group. When a group is selected, the friends will automatically populate with default weight contributions of 0. If any members have a value of 0, the remaining weight will be distributed evenly amongst them. (For example: if one group member's contribution is 40% and the remaining 2 friends have a 0% contribution, the app will calculate a 30% distribution for each of the 2 remaining friends.) The contribution is converted to a dollar amount and displayed on the create expense form. Once an expense is created, you may now see the expense under the expenses tab. Expense details contain information for the expense name, cost, category, description, a pie chart with distributions, group associated with expense, expense members and contributions, and a receipt as downloadable PDF.

Analytics: Our pie charts provide a visual breakdown of expenses by Friend in the Expense view and by Category in the Group view. The progress bar makes it easy to see at first glance, how close everyone is to balance out their accounts.

Edit: Don't have all the info at once? Feel free to Create Your Expense and go back to Edit it anytime. Your saved expense information will dynamically update, including the new total amounts each friend owes.

Receipt Upload: For easier reference, share the receipt in your group with our Upload feature.

User Interface: Our app is easy to navigate and limits clicks needed to reach destinations. When viewing a group, you may simply click an expense to view the details of the associated expense. When viewing an expense, you may simply click on the group name to view the associated group. Our Nav Bar is accessible on every page. Our delete and edit buttons for a group and expense are fixed on screen in order to prevent the user from unnecessary scrolling.

Filtered View Tabs: View relevant information by tab for: Group, Friend, and Expense to focus on what you specifically want access to.

Summary: Our homepage offers a consolidated view of the top three recent activities for Groups and *Expenses.

Search: An easy to use search bar is accessible on each tab to search for your group, friend, and/or individual expense.

Running the Project

  1. Clone this project locally
  2. cd into the project directory
  3. cd into expense-splitter
  4. To run the app on your local device, make sure to install the appropriate packages and run using the following command:
npm install
npm run dev
  1. Get started adding your Friend, creating your Group, and creating your Expense

Dependencies

React, Tailwind, React Hook Forms, Firebase, html2pdf, Local Storage DB, Zod, Nanoid, MUI, Font Awesome.

Deployed

https://expensesplittermain.netlify.app/

Meet the Creators

Special Thanks

Special thanks to Carlos Cespedes and Alex Singh for leading the development team.
Special thanks to Chingu for organizing this project.