https://github.com/ignag-dev/contadorcalorias-react

Contador de Calorias con React con TypeScript implementando useReducer
https://github.com/ignag-dev/contadorcalorias-react

hooks localstorage react states types typescript usereducer usestate vite

Last synced: 22 days ago
JSON representation

Contador de Calorias con React con TypeScript implementando useReducer

• Host: GitHub
• URL: https://github.com/ignag-dev/contadorcalorias-react
• Owner: IgnaG-Dev
• Created: 2024-05-15T12:54:27.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-05-21T11:03:24.000Z (9 months ago)
• Last Synced: 2024-11-23T01:14:06.845Z (3 months ago)
• Topics: hooks, localstorage, react, states, types, typescript, usereducer, usestate, vite
• Language: TypeScript
• Homepage: https://calories-tracker-ignacio.netlify.app/
• Size: 43 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Contador de Calorías y Ejercicios 🏋️‍♂️

### En este proyecto tendremos un formulario, leeremos sus datos, los procesaremos y realizaremos algunas operaciones como validación

> Explora la demo del sitio web en el siguiente enlace: [Contador de Calorias](https://calories-tracker-ignacio.netlify.app/)

![Imagen de Pagina Web](https://github.com/IgnaG-Dev/ContadorCalorias-React/assets/163780789/b9e195f4-4dc9-4aa5-9ae4-78dd8e35d8c5 "Pagina Web Contador de Calorias")

## Funcionalidades principales 🥇

- `Registro de Calorías`: Los usuarios pueden registrar sus comidas diarias y las calorías consumidas.

- `Seguimiento de Ejercicios`: Los usuarios pueden añadir y monitorear sus rutinas de ejercicios y las calorías quemadas.

- `Procesamiento de Formularios`: Validación y manejo de datos de formularios para asegurar entradas correctas y consistentes.

## Tecnologías Utilizadas 🧑‍💻

- `React`:  Frontend desarrollado con React para la creación de componentes reutilizables y estado manejado de manera eficiente.

- `TypeScript`: Mejora de la robustez del código con tipado estático y detección temprana de errores.

- `Tailwind CSS`: Estilización y maquetación utilizando Tailwind CSS para un diseño atractivo y responsivo.

- `useReducer`: Gestión de estado complejo utilizando useReducer para manejar múltiples estados interdependientes.

## Configuración del Proyecto ⚒️

>[!NOTE]

>Asegúrate de tener Node.js y npm instalados en tu sistema.

1. Clona este repositorio en tu máquina local.

   

   ``` 

     git clone https://github.com/IgnaG-Dev/ContadorCalorias-React

   ```

## Rendimiento ✅

A continuación te dejamos algunos parametros de rendimiento de la página web utilizando el plugin [LIghthouse](https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?pli=1)

![Rendimiento](https://github.com/IgnaG-Dev/ContadorCalorias-React/assets/163780789/01f45bb7-e975-45b9-8969-f5ead3069c81 "Rendimiento de Contador de Calorias")

## Contribución 📨

¡Las contribuciones son bienvenidas! Si tienes ideas para mejorar esta aplicación, por favor abre un issue para discutir los cambios propuestos o envía una pull request.

## Contacto 👤

Si tienes alguna pregunta o sugerencia, no dudes en ponerte en contacto.