https://github.com/ignag-dev/calculadorapropinas-react-ts-usereducer

Pagina web donde se podrá generar una orden con consumos y la persona podrá elegir la propina que desea dejar.
https://github.com/ignag-dev/calculadorapropinas-react-ts-usereducer

localstorage react tailwindcss typescript usereducer usestate vite

Last synced: 22 days ago
JSON representation

Pagina web donde se podrá generar una orden con consumos y la persona podrá elegir la propina que desea dejar.

• Host: GitHub
• URL: https://github.com/ignag-dev/calculadorapropinas-react-ts-usereducer
• Owner: IgnaG-Dev
• Created: 2024-05-16T13:53:02.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-05-17T12:27:54.000Z (9 months ago)
• Last Synced: 2024-11-23T01:14:07.913Z (3 months ago)
• Topics: localstorage, react, tailwindcss, typescript, usereducer, usestate, vite
• Language: TypeScript
• Homepage: https://calculadora-ignacio.netlify.app/
• Size: 40 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Calculadora de Propinas y Consumos 🍽️

### Pagina web para restaurantes donde se podrá generar una orden con consumos y la persona podrá elegir la propina que desea dejar.

> Explora la demo del sitio web en el siguiente enlace: [Calculadora de Propina](https://calculadora-ignacio.netlify.app/)

![Imagen de Pagina Web](https://github.com/IgnaG-Dev/CalculadoraPropinas-React/assets/163780789/259acfc6-0af3-4cdf-afa1-7dac768b6b15 "Pagina Web Calculadora de Propina")

## Funcionalidades principales 🥇

- `Generación de Ordenes`: Los usuarios pueden crear órdenes con múltiples consumos, visualizando el total de cada ítem.

- `Cálculo de Propinas`: Los usuarios pueden seleccionar el porcentaje de propina que desean dejar, con actualización en tiempo real del total a pagar.

- `Interactividad en Tiempo Real`: Actualización dinámica de la orden y propina sin recargar la página utilizando React y useState.

- `Interfaz Atractiva y Responsiva`: Diseño moderno y adaptativo utilizando Tailwind CSS para una experiencia de usuario óptima en dispositivos móviles y de escritorio.

## Actualización del Código 🔄

He mejorado la gestión del estado en la aplicación utilizando useReducer. Esto permite manejar la lógica de actualización de manera más estructurada y predecible, especialmente cuando el estado es complejo y las actualizaciones dependen de múltiples acciones.

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

## 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/CalculadoraPropinas-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/CalculadoraPropinas-React/assets/163780789/35fb612a-1f48-49e7-84b4-f0e9b7a5444e "Rendimiento de Calculadora de Propina")

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