Eat-n-Split is a small React application designed to simplify the process of splitting bills among friends after dining. This user-friendly app keeps track of owed money between friends and provides a hassle-free experience. eat-n-split allows you to input the bill amount, specify individual payments, and automatically tracks the money owed. No more worries about remembering who owes whatβeat-n-split takes care of it for you.
-
This project served as a valuable learning experience, enhancing my proficiency in React and reinforcing fundamental concepts:
-
State Management: Delved into the concept of state, understanding how it allows the application to keep track of data over time. Learned to implement state to add dynamic behavior and interactivity to components.
-
Effective Use of State: Improved skills in determining when and where to use state for optimal application performance. Recognized scenarios where state is essential for maintaining component-specific data.
-
Data-Flow with Props: Gained insights into the importance of props in establishing a data-flow within React components. Understood how to pass data between parent and child components, facilitating communication and reusability.
-
Component Composition: Learned the practice of breaking down user interfaces into smaller, manageable components. Explored the benefits of component composition in terms of code organization, maintainability, and scalability.
-
JSX: Mastered the construction of components using JSX. Leveraged JSX to declaritively describe the structure of UI elements.
To run this project on your local machine, follow these steps:
Prerequisites: Make sure you have the following installed on your machine.
- Node.js
- npm
- Clone the Repository
git clone https://github.com/williamGarcia99x/eat-n-split.git
- Install Dependencies:
cd eat-n-split.git
- Install Dependencies:
npm install
- Run the Development Server
npm run dev
- Open in Browser
Open your browser and navigate to http://localhost:5173 (or another port specified in the console)
- Explore the App:
The application should now be running locally π.