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

Calculadora de Propinas y Consumos hecho con React
https://github.com/ignag-dev/calculadorapropinas-react

custom-hooks custom-hooks-in-react react tailwind tailwind-css tailwindcss typescript usememo usestate usestate-hook vite vitejs

Last synced: 2 months ago
JSON representation

Calculadora de Propinas y Consumos hecho con React

• Host: GitHub
• URL: https://github.com/ignag-dev/calculadorapropinas-react
• Owner: IgnaG-Dev
• Created: 2024-05-12T11:35:03.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-17T12:25:56.000Z (about 2 years ago)
• Last Synced: 2025-06-09T05:04:12.584Z (about 1 year ago)
• Topics: custom-hooks, custom-hooks-in-react, react, tailwind, tailwind-css, tailwindcss, typescript, usememo, usestate, usestate-hook, vite, vitejs
• Language: TypeScript
• Homepage: https://calculadora-ignacio.netlify.app/
• Size: 47.9 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.

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