Pomodoro Timer es una aplicación web diseñada para mejorar la productividad y gestión del tiempo utilizando la técnica Pomodoro. Esta herramienta es ideal para aquellos que buscan una forma eficiente de dividir su tiempo entre periodos de trabajo intenso y descansos cortos, favoreciendo la concentración y la prevención del agotamiento.
- Tiempo de ciclos: Define la duración de los ciclos de trabajo y descanso. Configura desde 1 hasta 60 minutos para cada uno.
- Restricciones de descansos: La duración de un descanso corto no puede ser más larga que la de un descanso largo.
- Cantidad de ciclos: Elige cuántos ciclos de trabajo y descanso corto realizarás antes de un descanso largo, con un límite de 1 a 10 ciclos.
- Autoplay: Activa el modo de reproducción automática para pasar al siguiente ciclo sin interacciones, o configúralo para manual si prefieres un mayor control.
Una vez iniciado el temporizador, las configuraciones se bloquean hasta que se presione 'restart' o se finalicen todos los ciclos.
- Barra de progreso circular: Visualiza el tiempo restante de cada ciclo con una interfaz intuitiva y atractiva.
- Sonido de notificación: Al finalizar cada ciclo, se reproduce un sutil sonido de clic, proporcionando una señal auditiva del cambio de estado.
- Fondos diferenciados: Cada tipo de ciclo (trabajo, descanso corto, descanso largo) cuenta con un fondo único, facilitando la identificación del estado actual.
- Controles de play, pause y restart: Gestiona el progreso del temporizador según tus necesidades.
- Indicador de ciclo actual: Mantente informado sobre el progreso de tus ciclos con un indicador que muestra el ciclo actual respecto al total (ejemplo: 1/4).
- Vite & ReactJS: Utilizado para una experiencia de usuario fluida y un desarrollo eficiente.
- Bootstrap & Sass: Para un diseño responsivo y personalizable.
- Cypress para Testing: Para desarrollar pruebas automatizadas con Cypress y así garantizar la calidad y la estabilidad de la aplicación.
Asegúrate de tener instalado Node.js y npm (incluido con Node.js) en tu computadora.
- Clonar el Repositorio:
git clone https://github.com/frani-be/neuralclocks-pomodoro.git- Instalar Dependencias:
cd neuralclocks-pomodoro
npm install- Iniciar el Servidor de Desarrollo:
npm run dev- Acceder a la Aplicación:
Abre tu navegador y visita http://localhost:[port]/neuralclocks-pomodoro/.
Para experimentar la aplicación, visita Pomodoro Timer en producción.
- Mejoras en los Range Inputs: Agregar etiquetas con valores mínimos y máximos, y permitir la entrada de valores mediante teclado.
- Sonidos Diferenciados por Tipo de Ciclo: Implementar sonidos distintos para el final de cada tipo de ciclo.
- Añadir soporte multilingüe (en proceso).
- Optimización de Bootstrap/Tailwind: Evaluar y posiblemente migrar a Tailwind CSS para un rendimiento más eficiente y una personalización más flexible.
Desarrollado con ❤ por frani.be