Bill-Splitting-App

A simple bill-splitting app coded in React JS using Tailwind CSS, Lucide React and Shadcn/UI.

Overview

The Bill Splitting App is a React-based web application designed to help users easily split bills among multiple people. It features a dark mode interface for comfortable use in low-light environments and provides an intuitive slider-based mechanism for adjusting individual contributions.

Technical Highlights

The app is built with React and styled with Tailwind CSS and demonstrates modern web development practices. It utilizes custom hooks for state management and side effects, showcasing efficient handling of component logic and user interactions. The integration of shadcn/ui components and Lucide React icons enhance the UI/UX while maintaining a lightweight and performant application.

This Bill Splitting App is a practical, user-friendly solution for a common real-world problem, wrapped in an aesthetically pleasing and technically sound package.

Features

• Dark Mode Interface: Easy on the eyes, perfect for night-time use.

• Dynamic Bill Splitting: Automatically calculates each person's share based on percentage.

• Slider-based Input: Intuitive sliders for adjusting individual percentages.

• Add/Remove Participants: Flexibility to add (up to 10) or remove (minimum 2) people from the split.

• Real-time Calculations: Instant updates as you adjust the total bill or individual percentages.

• 100% Total Guarantee: Ensures that percentages always add up to 100%.

Use Cases

The Bill Splitting App is versatile and can be used in numerous scenarios:

• Restaurant Outings: Easily split the check among diners, accounting for individual orders or preferences.

• Shared Households: Manage recurring bills like rent, utilities, or groceries among roommates.

• Group Travel: Divide costs for accommodations, transportation, or group activities during trips.

• Team Lunches: Quickly calculate each person's share for office meals or team-building events.

• Gift Contributions: Organize group gifts by assigning different contribution percentages to participants.

Benefits

• Time-Saving: Eliminates the need for manual calculations, reducing the time and effort required to split bills.

• Accuracy: Minimizes errors that can occur with mental math or calculator use, especially in social situations.

• Fairness: Allows for precise percentage-based splitting, accommodating scenarios where equal splits aren't appropriate.

• Reduced Social Friction: By providing a clear, objective breakdown of expenses, the app helps avoid misunderstandings or disputes over bill payments.

• Accessibility: The dark mode design ensures the app is usable in various environments and is gentle on users' eyes.

Technologies Used

• React

• Tailwind CSS

• shadcn/ui components

• Lucide React icons

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/bill-splitting-app.git
   

2. Navigate to the project directory:

   cd bill-splitting-app
   

3. Install dependencies:

   npm install
   

4. Start the development server:

   npm start
   

Usage

1. Enter the total bill amount in the "Total Bill" input field.

2. Use the sliders to adjust the percentage each person will pay.

3. To add more people (up to 10), click the "Add Person" button.

4. To remove a person (minimum 2), click the minus icon next to their slider.

5. The app will automatically calculate each person's share based on the percentages.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.

Acknowledgments

• Thanks to the creators of React, Tailwind CSS, and shadcn/ui for their fantastic tools.

• Inspired by the need for an easy-to-use, visually appealing bill splitting solution.