https://github.com/devraider/split-the-bill
Split the Bill is a ReactJS-based application designed to simplify dividing expenses among friends or group members. It allows users to add expenses, track shared costs, and automatically calculate the amount each person owes or is owed. Built with React 18.3, the app uses controlled components for form inputs and dynamic content rendering.
https://github.com/devraider/split-the-bill
Last synced: about 1 month ago
JSON representation
Split the Bill is a ReactJS-based application designed to simplify dividing expenses among friends or group members. It allows users to add expenses, track shared costs, and automatically calculate the amount each person owes or is owed. Built with React 18.3, the app uses controlled components for form inputs and dynamic content rendering.
- Host: GitHub
- URL: https://github.com/devraider/split-the-bill
- Owner: devraider
- License: mit
- Created: 2025-01-03T14:10:31.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-03T22:01:49.000Z (over 1 year ago)
- Last Synced: 2025-02-25T03:42:51.051Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 686 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Split the Bill Application 💰
## Motivation
The "Split the Bill" project is a ReactJS-based application designed to simplify the process of dividing expenses among friends or group members.
In this project, I deepened my understanding of several key React concepts, including:
- **Data Flow**: Mastering the flow of data through the application, and determining when to use global vs. local state based on the nature of the data.
- **Props Children**: Passing nested elements into components to enable dynamic content rendering.
- **Derived State**: Creating states that are derived from other existing states, ensuring efficient data handling.
- **Lifting State Up**: Moving state to a higher component to enable sharing of data between multiple child components.
- **Forms and Controlled Components**: Managing form inputs through controlled components, ensuring form data is consistently synced with state.
- **Props Destructuring**: Using destructuring to cleanly extract props in a more concise and readable manner.
It serves as a practical implementation to reinforce the knowledge gained from various React learning resources.
## Features ✨
1. **ReactJS** - Utilizes React version 18.3 for building user interfaces.
2. **CSS Modules** - CSS Modules for component-scoped styling, ensuring modular and maintainable CSS.
3. **JavaScript (ES6)** - JavaScript features such as array methods, template literals, and destructuring for cleaner and more efficient code.
4. **Expense Management** - Allows users to add expenses, facilitating effective tracking of shared costs.
5. **Debt Calculation** - Automatically calculates the amount each person owes or is owed, simplifying the settlement of shared expenses.
## Component Structure 🛠️
The application is structured with a focus on modularity and reusability. Components are organized to manage different aspects of the application, such as expense input, group listings, and debt summaries. This approach facilitates:
- **State Management** - Efficient handling of application state to reflect real-time data updates.
- **Conditional Rendering** - Dynamic display of content based on user interactions and application state.
- **Reusable Components** - Creation of generic components that can be utilized across different parts of the application, promoting code reuse and consistency.
## Demo / Walkthrough
### 1. Overview
### 2. Add friend to share expenses
### 3. Add friend to share expenses
### 4. Share a new expense with your new friend
## How to Get and Run the Application 🛠️
### 1. Clone the application
```bash
git clone https://github.com/devraider/split-the-bill.git
cd split-the-bill
```
### 2. Install Dependencies
```bash
npm install
```
### 3. Run application in developemnt mode
```bash
npm start
```
### 4. Build for Production
```bash
npm run build
```
## Credits
- [**Facebook React Team**](https://github.com/facebook/react) for great documentation: [Learn React from Docs](https://react.dev/learn)
- 🧑🏫 [**Jonas Schmedtmann**](https://github.com/jonasschmedtmann)
- 🎓 [The Ultimate React Course 2024: React, Next.js, Redux & More](https://www.udemy.com/course/the-ultimate-react-course/)