[Angular] Light Pomodoro

Light Pomodoro es una aplicación de temporizador Pomodoro con gestión de tareas, cuyo diseño y experiencia de usuario están inspirados en Pomofocus, construida en Angular y estilizada con TailwindCSS bajo la paleta Gruvbox Light. Todo el estado (tareas, configuración y progreso del temporizador) persiste localmente en el navegador, sin necesidad de backend ni base de datos.

## Funcionalidades principales

### Temporizador Pomodoro

- Tres modos de trabajo: Pomodoro, Descanso Corto y Descanso Largo, con cambio instantáneo entre ellos.
- Theming dinámico: Toda la interfaz se adapta automáticamente según el modo activo.
- Conteo real: El temporizador calcula el tiempo restante contra un timestamp real, por lo que no se desincroniza si se cierra o recarga la pestaña mientras corre.
- Transición automática: Al completar un pomodoro, la app avanza sola a Descanso Corto o Descanso Largo según el intervalo configurado, y viceversa.
- Notificaciones: Sonido y notificación del sistema operativo al finalizar cada ciclo, incluso con la pestaña en segundo plano.

### Gestión de tareas

- Control total: Creación, edición inline, marcado como completada y eliminación de tareas.
- Reordenamiento: Organización de tareas mediante Drag & Drop.
- Persistencia: Las tareas y su orden se mantienen guardadas en el navegador aunque se cierre la aplicación.

### Configuración

- Modal de ajustes: Duración personalizada (en minutos) de Pomodoro, Descanso Corto y Descanso Largo.
- Auto Inicio: Activación opcional de inicio automático para breaks y pomodoros.
- Intervalo de Descanso Largo: Configuración de cada cuántos pomodoros corresponde un descanso largo.
- Validación: Los campos numéricos solo aceptan enteros positivos.

## Capturas de pantalla

A continuación, se muestran algunas imágenes de la aplicación en funcionamiento:

 

### Instalación del proyecto 

1. Clonar el repositorio

git clone https://github.com/IsmaelHeredia/light-pomodoro-angular.git
cd light-pomodoro-angular

 
2. Instalación de dependencias

npm install

 
3. Ejecución del proyecto en modo desarrollo

ng serve

Una vez iniciado, se podrá acceder desde la siguiente URL:

http://localhost:4200

 
4. Build de producción

ng build

### Pruebas E2E

El proyecto incluye tests end-to-end reales sobre la interfaz, cubriendo navegación entre modos, conteo del temporizador, CRUD de tareas, drag & drop, persistencia en `localStorage` y validación de configuración.

Para ejecutar los tests:

npm run test:e2e

También están disponibles los siguientes modos:

npm run test:e2e:ui
npm run test:e2e:headed

Link del proyecto  

[Django + Angular] Fast Music 1.0

En este proyecto se hizo un completo reproductor de música, las tecnologías que usa son Django como Backend y Angular como Frontend, la base de datos que usa es MySQL.

Las funciones incorporadas son :

Inicio de sesión obligatorio para usar el sistema protegido con JWT.

Posibilidad de cambiar usuario y contraseña.

Posibilidad de cambiar el theme completo del sistema a un modo oscuro o claro.

Se puede sincronizar una carpeta de Google Drive con la carpeta local del sistema donde se guardara toda la música, también se puede hacer el efecto contrario, que seria sincronizar la carpeta local del sistema con la carpeta de Google Drive.

Incorpora un escaneo de carpeta local donde se deben registrar todas las canciones guardadas cada una en su playlist o carpeta correspondiente.

En el reproductor de música se puede filtrar por playlists que serán guardadas en Redux, lo mismo seria para filtrar por nombre de canción. Ademas se pueden fijar canciones como favoritas lo que hará que se cree una playlist aparte al principio de la lista para poder localizar de una forma mas eficiente.

También incorpora un reproductor de estaciones o streams, en esa sección se pueden registrar, editar y borrar estaciones, para mayor comodidad incorpora un buscador por nombre que usa Redux. Ademas contiene las funciones de importar las estaciones en formato json, exportar las estaciones para descargar en formato json y la función de validar todas las estaciones para verificar su correcto funcionamiento y borrarlas en caso de no estén funcionando.

A continuación se muestran unas imágenes del sistema en funcionamiento.

 

 

Para la correcta instalación del sistema se deben seguir los siguiente pasos.

En la carpeta del Backend que sería "sistemaApi" se debe renombrar el archivo .env.example a solo .env y editar la configuración con los datos de tu conexión MySQL. También se debe editar el SECRET_KEY con tu propia clave, se puede generar una con el siguiente comando :

python3 -c 'from django.core.management.utils import get_random_secret_key; print(get_random_secret_key())'

Después se tienen que crear las credenciales para el servicio "Google Drive API" en la URL https://console.cloud.google.com, una vez creado todo se descargan las credenciales y se guardan en el mismo directorio del archivo manage.py con el nombre de client_secrets.json.

Una vez terminado todo se deben seguir estos pasos :

Para instalar las dependencias de Django :

pip install django djangorestframework djangorestframework_simplejwt

sudo apt install pkg-config

sudo apt-get install gcc libmysqlclient-dev python3-dev

pip install mysqlclient

pip install django-cors-headers

pip install python-dotenv

Para instalar el modulo necesario para sincronizar con Google Drive :

pip install PyDrive

Para realizar las migraciones de Django :

python3 manage.py makemigrations

python3 manage.py migrate

Para crear el usuario por defecto :

python3 manage.py createsuperuser

Finalmente para iniciar el servidor se debe ejecutar este comando :

python3 manage.py runserver 7777

En la carpeta del Frontend que sería "sistemaFrontend" se debe ejecutar el siguiente comando para instalar las dependencias :

npm install

En esa misma carpeta deben ir al directorio "environments" para modificar los archivos environment.ts reemplazando las variables "apiUrl" y "filesUrl" por la ruta de su servidor Backend.

Finalmente para iniciar el servidor se debe ejecutar este comando :

npm run start

Github

[Laravel + Angular] Fenix Tasks 1.0

 

En este proyecto se hizo un sistema para registrar espacios de trabajo en los cuales se pueden asignar tareas y registrar los tiempos de trabajo. Este sistema usa Laravel como Backend y desde el lado de Frontend usa Angular con Material. La base de datos elegida para este proyecto fue MySQL.

Las funciones incorporadas son :

Inicio de sesión obligatorio para usar el sistema protegido con JWT.

Posibilidad de cambiar usuario y contraseña.

Posibilidad de cambiar el theme completo del sistema a un modo oscuro o claro.

Se puede agregar, editar y borrar espacios de trabajo. En la misma sección se maneja un filtro de redux para buscar por nombre. En cada espacio de trabajo se puede establecer la fecha de inicio, la fecha de finalización y el estado en el que se encuentra el espacio.

Dentro de los espacios se pueden crear, editar y borrar tareas, las mismas también se manejan por fechas de inicio y finalización, además poseen un cronómetro para medir el tiempo que lleva cada tarea.

En el inicio del dashboard se muestran unas estadísticas del sistema que consisten en mostrar dos gráficos, en el primero se muestran los espacios que tuvieron más días de trabajo y en el segundo gráfico se muestran los que demoraron menos. También se muestran dos tablas, en la primera se muestran las 3 tareas que llevaron más tiempo y en la segunda se muestran las que menos.

Se incluye un calendario donde se muestran las fechas de inicio y finalización de todas los espacios y tareas creados.

A continuación se muestran unas imágenes del sistema en funcionamiento.

 

Para la correcta instalación del sistema se deben seguir los siguiente pasos.

En la carpeta del Backend que sería "sistema-api" se debe renombrar el archivo .env.example a solo .env y editar la configuración con los datos de tu conexión MySQL, el SECRET_KEY que sería la clave para generar el JWT.

Una vez editado el archivo .env se deben ejecutar los siguiente comandos :

composer install

php artisan key:generate

php artisan migrate

php artisan db:seed --class=DatabaseSeeder

php artisan storage:link

Finalmente para iniciar el servidor se debe ejecutar este comando :

php artisan serve --port=7777

En la carpeta del Frontend que sería "sistema-frontend" se debe ejecutar el siguiente comando para instalar las dependencias :

npm install

En esa misma carpeta deben ir al directorio "environments" para modificar los archivos environment.ts reemplazando las variables "apiUrl" y "imagesUrl" por la ruta de su servidor Backend.

Finalmente para iniciar el servidor se debe ejecutar este comando :

npm run start

  

Github