DivvyUP (Friend Expense Splitting App)

2024-01-23_07-40-49.mp4

Still working on it to make a perfect App 💻🎈

• 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:

Dynamic Friend List:

• 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.

Add New Friend:

• 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.

Friend Selection:

• 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.

Expense Tracking:

• 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.

Balance Visualization:

• 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.

Responsive Design:

• The project utilizes responsive design principles, ensuring a consistent and user-friendly experience across various devices and screen sizes.

Technologies Used:

ReactJS:

• 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.

State Management with React Hooks:

• 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.

Form Handling:

• React-controlled components and form handling techniques are used to collect user input, ensuring accurate data submission.

CSS Styling:

• Cascading Style Sheets (CSS) are applied for styling and theming, creating an aesthetically pleasing and cohesive design.

Component Reusability:

• 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.