This repository contains various projects developed with React and Vite, mainly using TypeScript. Throughout the projects, different React tools have been used. The first projects listed below use the more simple tools like useState and useEffect and the later projects use more complex ones like useReducer, useContext or React Router Dom.
Below you will be able to find a description of every project in this repository, which will include the tools used and the functionality of the applications.
Project list
This is the most simple project in the repository, which consists of a web application that simulates an online shop where you have a collection of guitars that you can add or remove from your cart. This first version of the project (guitar-shop) is developed with JavaScipt and uses the tools useState and useEffect.
- Project guitar-shop-custom-hook is the second version of the project, where instead of using useState and useEffect a custom hook provides the functionality.
- Project guitar-shop-ts follows the previous version, but adding TypeScript code instead of JavaScript
- Project guitar-shop-reducer replaces the custom hook with useReducer
This project (order-calculator) consists of a web application that simulates the process of taking an order in a restaurant, being able to click on the different options to add them to the order and select a tip amount. It is developed with TypeScript, using a custom hook.
- Project order-calculator-reducer is the version of the project that implements useReducer
Web app that simulates a tracker for calories involved in food or exercise. There is a form where the user inputs the type of activity (exercise/food) and the amount of calories involved. The app keeps track of the calories to shoe the user a summary, as well as the list of activities registered. It is developed with TypeScript, using React's useReducer.
- Project calorie-tracker-contextAPI is the version of the project that is implemented with useContext
Web app that simulates a planner for expenses under a budget. The user submits a form with the information of a new expense, mainly its category and cost. The app saves the list of expenses to show graphically the percentage of the budget that has been spent. It is implemented with TypeScript, using context API (useContext).
Web app to monitor information about patients. The user submits a form with information of the patient, which is stored and can be viewed in the app until the user decides to delete it. It is implemented with TypeScript, using Zustand to manage the global state of the app.
Web app that reads an API to provide weather information. The user can search for a city from a list of countries to retrieve its weather. It is implemented with TypeScript, using Zustand for the global state of the app and Axios and Zod for the API management
Web app that reads an API to provide information about the most relevant cryptocurrencies. It is implemented with TypeScript, using Zustand for the global state and Axios and Zod for the API management
Web app that reads an API to get information about drink recipes. The user can mark a recipe as a favourite, which will be saved in the Favourites page. This project has a home page to search for recipes and a favourites page, with the drinks saved by the user. It is implemented with TypeScript and uses React Router Dom to manage the different pages of the app. Zustand controls the global state of the app and Axios and Zod are the tools used for the API management
Ángel Benítez Gómez - benitezgomezan@gmail.com
LinkedIn profile: https://www.linkedin.com/in/angel-benitez-gomez/