Budget Calculation App 💵

App developed with React and Tailwind. It calculates via checkboxes the total budget for an hypothetical web developer site.

The Budget Calculation App was the 6th project for my Barcelona ITAcademy course.

Skills

React

• Components
• Props
• Hooks (useState, useContext, useRef, useEffect...)
• Conditional Rendering
• Event Handling
• React folder structure
• Efficient Navigation with React Router

CSS

• Tailwind
• DaisyUI
• Responsive Design

Images

Services checkboxes and dynamic total price

Saving and listing different budgets. Order filter by date, name and amount.

Theme toggler

Responsive Design

Description

The objective of this app to create a budget list of web development services, letting the user choose and calculate the total price for a web dev service.

1. Given an array of objects with services information, the app prints a list of checkable services with its price and description. These services can have extra options, which will print with an add and delete buttons, and also an information button which shows a modal with information.
2. Using a State of an array of booleans for each service (to check if a service is selected), the information will be captured to a newUser context, which will be recieving the information of the user budget dynamically.
3. This newUser context will also recieve information from writable inputs (name, phone and email).
4. On submit, every information recieved in this newUser, will be pushed to a context of an array of users, and the newUser context will be empty again, reseting every service checkbox, input values and total price.
5. Every object inside the users array will be printed with its name, phone and email, the selected services and its total price.
6. There will be also a togglable option at the top of the app which will allow the user to choose between monthly and yearly payment. The yearly payment will add a discount of the 20% to the total price.
7. As an addition to the project, there will be a theme selector at the top-right corner, which will allow us tot toggle between light, dark or cupcake themes, given by Tailwind DaisyUI component library.