Eat-n-Split - Bill Splitting React Application

Welcome to Eat-n-Split, a handy React application that simplifies splitting bills with your friends, making your outings stress-free!

Screenshot

Image 1: Landing Page:

Image 2: Splitting Bill:

Image 3: Add Friend:

Featuers

• Split Bills Effortlessly: No more hassle when it comes to splitting the bill. Eat-n-Split makes it easy and quick to divide expenses among friends.

• Built with React: This application is developed using React, ensuring a seamless and interactive user interface.

• Utilizes React State and Hooks: With the power of React state and hooks, Eat-n-Split efficiently manages and updates data in real-time.

• Responsive CSS and Grids: The user interface is crafted with responsive CSS and grids, providing a visually appealing experience across various devices.

• Add Multiple Friends: Whether it's a small gathering or a large party, you can add as many friends as you need to split the bill accurately.

• Random Profile Pictures: Eat-n-Split uses an external API to generate random profile pictures for your friends, adding a touch of fun to the app.

• Clear Debts Overview: Always stay informed about how much you owe your friends and how much they owe you, ensuring everyone settles their dues without confusion.

How to Use

• Add Friends: Start by adding your friends to the application. Click on the "Add Friend" button, and a random profile picture will be assigned automatically.

• Enter Expenses: Input the expenses incurred during your outing. You can add individual expenses for each friend or split the bill equally among all.

• Check Debt Summary: The application will automatically calculate how much each person owes or is owed. Easily view the debt summary for a clear understanding.

• Settle Payments: Based on the debt summary, handle the payments accordingly, ensuring everyone settles up correctly.

Installation

1. Clone this repository to your local machine.

2. Navigate to the project directory and run npm install to install all the required dependencies.

3. Launch the application with npm start, and it will open in your default web browser.

Styling

To customize the styling of the component, you can define CSS classes and use them with the className prop. Here is an example of how you can define styles in your styles.css file: