Split Bill

A web application built with React.js, Tailwind CSS, and Vite to help users split bills among multiple people accurately. The app allows users to input bill details, add participants, and calculate each person's share of the bill with ease.

Features

• Bill Splitting: Easily split the bill among multiple people.
• Custom Inputs: Add individual contributions if necessary.
• Real-time Calculation: Instantly calculate the amount each person owes or receives.
• User-Friendly UI: Simple and intuitive design built with Tailwind CSS.
• Fast Build: Powered by Vite for a smooth development experience.

Technologies Used

• React.js: JavaScript library for building user interfaces.
• Tailwind CSS: Utility-first CSS framework for fast and flexible styling.
• Vite: Modern build tool for fast development and optimized production builds.

Setup & Installation

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn (package manager)

Steps to Run the Project Locally

1. Clone the repository:

   git clone https://github.com/Alwin-Sajan/Split_Bill.git

2. Navigate into the project directory:

   cd Split_Bill

3. Install dependencies:

   npm install
   # or using yarn
   yarn install

4. Start the development server:

   npm run dev
   # or using yarn
   yarn dev

5. Open your browser and visit http://localhost:3000.

Usage

1. Enter the total amount of the bill in the input field.
2. Add the names of people who will share the bill.
3. If any person has already paid a part of the bill, input their contribution.
4. The app will automatically calculate how much each person owes or should receive.
5. You can add or remove people and adjust the bill as necessary.

Folder Structure

• src/ - Contains all the source files for the project.
  • components/ - Reusable components like BillForm, Participant, etc.
  • App.js - The main React component where the bill-splitting logic happens.
  • index.js - Entry point for the React app.
  • assets/ - Contains static files like images (if any).
• public/ - Static files that are directly served (e.g., index.html).
• vite.config.js - Configuration file for vite.

Customization

Tailwind CSS Configuration

You can customize the styling of the application by modifying the tailwind.config.js file. Tailwind offers a range of options for colors, spacing, fonts, and more.

Additional Features

If you want to add more advanced features, such as:

• Different Payment Methods: Allow users to select how they paid (cash, card, etc.).
• Expense Categories: Split a bill into different categories (e.g., food, drinks, tip, etc.).
• Mobile Support: Tailwind CSS's responsive utilities ensure the app works on mobile devices out of the box.

Contributing

1. Fork the repository.
2. Create a new branch for your feature or bugfix (git checkout -b feature-branch).
3. Commit your changes (git commit -am 'Add new feature').
4. Push to your branch (git push origin feature-branch).
5. Open a pull request.

License

Distributed under the MIT License. See LICENSE for more information.

Acknowledgements

• React.js - JavaScript library for building user interfaces.
• Tailwind CSS - Utility-first CSS framework for fast UI development.
• Vite - Next-generation, fast build tool.