2024-01-23_07-40-49.mp4
- based on jonas schmidtmaan's udemy course
DivvyUp is a modern web application built using HTML, CSS, and ReactJS, designed to simplify the process of splitting expenses among friends. This application provides a seamless experience for managing shared finances within a friend group. Let's explore the key features and technologies used in the project:
- Users can view and manage their list of friends, each represented with an image, name, and current balance. The friend list dynamically updates as new friends are added, ensuring an up-to-date overview of financial relationships.
- Users can easily add new friends to the list by providing their name and an image URL. The application validates input and prevents adding friends with missing information.
- Users can select a friend from the list, allowing them to view and manage specific expenses related to that friend. The selected friend is highlighted, providing a visual cue for the user.
- Users can split bills with the selected friend by entering the total bill amount and their individual expenses. The application calculates the remaining balance between the user and the selected friend, updating in real-time.
- The application displays a color-coded balance, indicating whether the user owes money, is owed money, or the balance is even. A red color represents an outstanding debt, while green signifies money owed to the user.
- The project utilizes responsive design principles, ensuring a consistent and user-friendly experience across various devices and screen sizes.
- The core of Divvy Up is built using ReactJS, a powerful JavaScript library for building interactive user interfaces. React components are employed to create a modular and maintainable codebase.
- Stateful components use React Hooks, such as useState, for efficient state management. This enables dynamic updates and responsiveness in the application.
Conditional Rendering:
- Conditional rendering is employed to show or hide components based on user interactions, providing a clean and intuitive user interface.
- React-controlled components and form handling techniques are used to collect user input, ensuring accurate data submission.
- Cascading Style Sheets (CSS) are applied for styling and theming, creating an aesthetically pleasing and cohesive design.
- The project follows the principles of component-based architecture, promoting reusability and maintainability of code. Divvy Up offers an efficient and enjoyable solution for friends to manage their shared expenses, fostering transparency and fairness in financial transactions. The combination of ReactJS and thoughtful design choices results in a user-friendly application for hassle-free expense splitting.