🧮 Calculadora de Propinas y Consumo

Una aplicación web moderna y eficiente para calcular propinas. Este proyecto está desarrollado con las últimas tecnologías en el ecosistema de React, optimizado para el rendimiento y diseñado con una experiencia de usuario atractiva y funcional.

Pruébala aquí :

https://calculando-propinas.netlify.app/

🛠️ Tecnologías utilizadas

• React: Biblioteca para construir interfaces de usuario dinámicas y reutilizables.
• Vite: Herramienta de desarrollo que ofrece un entorno rápido y moderno para React.
• TailwindCSS: Framework de CSS para un diseño elegante y personalizable.

✨ Características principales

• Cálculo instantáneo: La aplicación calculará automáticamente los valores.
• Interfaz optimizada: Una experiencia de usuario fluida, con diseño responsivo para adaptarse a dispositivos móviles y de escritorio.
• Optimización de rendimiento: Uso eficiente de React para evitar renders innecesarios y mejorar la velocidad.
• Custom Hook: Implementación de un custom hook reutilizable que encapsula la lógica de cálculo de propinas y división del consumo.

🧩 Optimización y técnicas avanzadas

Este proyecto no solo implementa funcionalidades, sino que también está diseñado con un enfoque en el rendimiento y las buenas prácticas:

• useMemo: Utilizado para memorizar valores derivados que dependen de cálculos costosos, evitando su recálculo innecesario.
• useCallback: Implementado para memorizar funciones que se pasan como props a componentes secundarios, minimizando renders innecesarios.
• Diferencias entre useMemo y useCallback: Aunque ambos optimizan el rendimiento, useMemo está diseñado para memorizar valores derivados, mientras que useCallback memoriza funciones. En este proyecto, se usaron estratégicamente según el caso para garantizar una experiencia de usuario rápida y sin interrupciones.

⚙️ Instalación

1. Clona este repositorio:

   git clone https://github.com/tu-usuario/calculadora-propinas.git

2. Navega al directorio del proyecto:

   cd calculadora-propinas

3. Instala las dependencias:

   npm install

4. Inicia el entorno de desarrollo:

   npm run dev

📜 Cómo usar

1. Elige algo del menú.
2. Selecciona el porcentaje de la propina que deseas dejar.
3. Visualiza instantáneamente los cálculos en pantalla.

🙌 Por qué elegir esta aplicación

Como desarrollador, me enfoqué en aprovechar al máximo el potencial de React y las herramientas modernas para crear una aplicación eficiente, escalable y fácil de mantener. Este proyecto demuestra mi capacidad para:

• Diseñar soluciones modernas y eficientes con React.
• Aplicar principios avanzados de optimización en interfaces de usuario.
• Usar hooks personalizados para encapsular y reutilizar lógica.
• Integrar herramientas modernas como Vite y TailwindCSS para ofrecer un entorno de desarrollo de alto rendimiento y un diseño atractivo.

🐛 Contribuciones

Las contribuciones son bienvenidas. Si tienes ideas para mejorar esta aplicación, no dudes en abrir un issue o enviar un pull request.

📩 Contacto

Si tienes preguntas o deseas colaborar en futuros proyectos, puedes contactarme en:

• GitHub: lauracastadiaz
• Correo electrónico: lauracastadiaz@gmail.com