https://github.com/gah-code/eat-n-split

A simple web application built with React for managing a list of friends and splitting bills with them.
https://github.com/gah-code/eat-n-split

Last synced: about 1 year ago
JSON representation

A simple web application built with React for managing a list of friends and splitting bills with them.

• Host: GitHub
• URL: https://github.com/gah-code/eat-n-split
• Owner: gah-code
• License: mit
• Created: 2023-09-22T04:40:00.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-11-14T22:44:12.000Z (over 2 years ago)
• Last Synced: 2025-01-04T06:37:02.325Z (about 1 year ago)
• Language: JavaScript
• Size: 45.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# eat-n-split

A simple web application built with React for managing a list of friends and splitting bills with them.

Initial Data:

The code starts with an array named initialFriends containing objects that represent friends. Each object includes an id, name, image (avatar URL), and balance (amount of money owed or owed by the friend).

React Component:

The code defines a React functional component called App. This is the main component responsible for rendering the user interface and managing the application's state.

State Management:

Within the App component, several pieces of state are managed using React's useState hook. c.clThese include friends (for storing the list of friends), showAddFriend (for controlling the visibility of an "Add Friend" form), and selectedFriend (for tracking the currently selected friend).

UI Components:

The code defines several UI components, including Button, FriendsList, Friend, FormAddFriend, and FormSplitBill, which are used to structure and render different parts of the application's user interface.

User Interaction:

Users can interact with the application in various ways:

They can select a friend from the list, which displays details about the friend and allows them to split a bill with that friend.

They can add new friends using the "Add Friend" form, providing a name and an image URL.

Users can enter bill details and specify who is paying the bill when splitting bills with a selected friend.

User Interface:

The user interface displays a list of friends, each with their name, image, balance information, and buttons for selecting and splitting bills.

The application handles bill splitting calculations based on user input.