📝 To-Do List con TypeScript y Redis

Una aplicación web moderna de To-Do list con frontend HTML/JavaScript y backend TypeScript + Redis.

🎯 ¿Qué es Redis?

Redis es una base de datos en memoria ultra rápida. En este proyecto se usa para:

• Almacenar tareas de forma rápida y confiable
• Cache: Los datos están en RAM (acceso instantáneo)
• Persistencia: Guarda automáticamente en disco para recuperar datos si se reinicia

Redis vs Base de Datos tradicional:

Aspecto	Redis	MySQL/PostgreSQL
Velocidad	⚡ Muy rápida (en memoria)	Normal (en disco)
Persistencia	✅ Sí (AOF)	✅ Sí
Ideal para	Cache, sesiones, datos frecuentes	Datos complejos, ACID

---

📋 Requisitos

• Node.js 16+
• Docker y Docker Compose (para Redis)
• npm o yarn

---

🚀 Instalación y Ejecución

1️⃣ Instalar dependencias

npm install

2️⃣ Iniciar Redis con Docker

npm run redis-up

Este comando ejecuta:

docker-compose up -d

Verificar que Redis está corriendo:

npm run redis-logs

Si tu backend corre en la misma red de Docker que Redis, usa el nombre del contenedor:

REDIS_HOST=redis-to-do-list npm run dev

Si el backend corre en tu PC fuera de Docker, normalmente debes usar localhost en vez del nombre del contenedor.

3️⃣ Iniciar el servidor

Modo desarrollo (con auto-reload):

npm run dev

Modo producción:

npm start

4️⃣ Abrir en el navegador

http://localhost:3000

---

📚 Estructura del Proyecto

├── index.html          # Frontend (UI con CSS bonito)
├── index.ts            # Backend (Express + Redis)
├── package.json        # Dependencias
├── docker-compose.yml  # Configuración de Redis
├── tsconfig.json       # Configuración de TypeScript
└── README.md           # Este archivo

---

🔌 API Endpoints

GET /api/tasks

Obtiene todas las tareas

Respuesta:

[
  {
    "id": "uuid-xxx",
    "text": "Hacer la tarea",
    "completed": false,
    "createdAt": "2024-01-01T10:00:00.000Z"
  }
]

POST /api/tasks

Crea una nueva tarea

Request:

{
  "text": "Nueva tarea"
}

PUT /api/tasks/:id

Actualiza una tarea (marcar como completada)

Request:

{
  "completed": true
}

DELETE /api/tasks/:id

Elimina una tarea

GET /api/health

Verifica el estado de la API y Redis

---

🛠️ Comandos útiles

Comando	Descripción
npm run dev	Inicia servidor en modo desarrollo
npm run redis-up	Inicia Redis con Docker
npm run redis-down	Detiene Redis
npm run redis-logs	Ver logs de Redis
npm run build	Compila TypeScript a JavaScript

---

🧠 Cómo funciona la aplicación

Frontend (index.html)

1. Interfaz HTML bonita con estilos CSS
2. JavaScript hace peticiones HTTP al backend
3. Mostrar, agregar, completar y eliminar tareas

Backend (index.ts)

1. Express crea un servidor HTTP
2. Redis almacena las tareas en clave: 'tasks'
3. Las rutas API manejan CRUD (Create, Read, Update, Delete)

Redis (Docker)

1. Contenedor Docker corriendo en localhost:6379
2. Guarda datos en memoria + disco
3. Se inicia automáticamente con docker-compose.yml

Flujo de una tarea:

Frontend (HTML)
      ↓
   API (POST /api/tasks)
      ↓
Backend (index.ts)
      ↓
   Redis (almacena)
      ↓
Respuesta al frontend
      ↓
UI se actualiza

---

🐛 Solucionar problemas

❌ "Connection refused" en Redis

# Verificar que Docker está corriendo
docker ps

# Reiniciar Redis
npm run redis-down
npm run redis-up

❌ Error en compilación de TypeScript

# Limpiar e instalar nuevamente
rm -rf node_modules package-lock.json
npm install

❌ Puerto 3000 ya está en uso

# En Windows
netstat -ano | findstr :3000

# Cambiar puerto en index.ts (línea: const PORT = 3000;)

---

📖 Aprender más

• Redis docs
• Express.js
• TypeScript
• Docker

---

📝 Notas para tu profesor

• ✅ Frontend: HTML/CSS/JavaScript moderno
• ✅ Backend: TypeScript con Express
• ✅ Base de datos: Redis (en memoria + persistencia)
• ✅ Containerización: Docker Compose
• ✅ API RESTful: CRUD completo
• ✅ CORS: Habilitado para peticiones cruzadas

---

💡 Mejoras futuras

• Autenticación de usuarios
• Categorías/Tags en tareas
• Sincronización en tiempo real (WebSockets)
• Exportar tareas (CSV/JSON)
• Deploy en la nube (Heroku, AWS, etc.)

---

¡Listo! Ahora puedes usar tu To-Do List. 🎉