TaskFlow - To-Do List (Redis Ready)

Una aplicación web de lista de tareas moderna, limpia, responsiva y diseñada específicamente para ser integrada fácilmente con Redis como base de datos en memoria / caché.

🚀 Características Visuales y Funcionales

• Interfaz Moderna: Diseño con estética glassmorphic, modo oscuro elegante, efectos de brillo ambiental y tipografía con la fuente Outfit.
• Gestión Completa de Tareas:
  • Agregar tareas.
  • Marcar como completadas con animación y tachado.
  • Eliminar tareas con transición suave.
  • Filtrado en tiempo real (Todas, Pendientes, Completadas).
  • Contadores dinámicos.
  • Limpieza en lote de tareas completadas.
• Preparado para Backend & Redis: Organizado mediante la clase ApiService en app.js.

---

📁 Estructura del Proyecto

To-do-list-redis/
├── index.html   # Estructura semántica HTML5
├── style.css    # Sistema de diseño CSS, variables y animaciones
├── app.js       # Lógica JavaScript y capa de servicio para Redis
└── README.md    # Documentación e integración con Redis

---

⚡ Cómo conectar con Redis (Ejemplos)

Actualmente la app usa LocalStorage para que funcione de manera inmediata al abrir index.html. Para conectar con Redis:

1. Cambia la variable USE_BACKEND_API = true dentro de app.js.
2. Implementa un servidor Backend sencillo. A continuación tienes ejemplos rápidos:

Opción A: Node.js + Express + ioredis / redis

// server.js
const express = require('express');
const Redis = require('ioredis');
const app = express();
const redis = new Redis(); // Conecta por defecto a localhost:6379

app.use(express.json());
app.use(express.static('.'));

// Obtener todas las tareas (Redis Hash o List)
app.get('/api/todos', async (req, res) => {
    const todosRaw = await redis.hvals('todos');
    const todos = todosRaw.map(item => JSON.parse(item));
    res.json(todos);
});

// Crear tarea en Redis
app.post('/api/todos', async (req, res) => {
    const todo = req.body;
    await redis.hset('todos', todo.id, JSON.stringify(todo));
    res.json(todo);
});

// Actualizar tarea en Redis
app.put('/api/todos/:id', async (req, res) => {
    const todo = req.body;
    await redis.hset('todos', req.params.id, JSON.stringify(todo));
    res.json(todo);
});

// Eliminar tarea en Redis
app.delete('/api/todos/:id', async (req, res) => {
    await redis.hdel('todos', req.params.id);
    res.sendStatus(204);
});

app.listen(3000, () => console.log('Servidor corriendo en http://localhost:3000'));

Opción B: Python + FastAPI + redis-py

# main.py
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
import redis
import json

app = FastAPI()
r = redis.Redis(host='localhost', port=6379, db=0, decode_responses=True)

@app.get("/api/todos")
def get_todos():
    raw_todos = r.hvals("todos")
    return [json.loads(t) for t in raw_todos]

@app.post("/api/todos")
def create_todo(todo: dict):
    r.hset("todos", todo["id"], json.dumps(todo))
    return todo

@app.delete("/api/todos/{todo_id}")
def delete_todo(todo_id: str):
    r.hdel("todos", todo_id)
    return {"status": "ok"}

app.mount("/", StaticFiles(directory=".", html=True), name="static")

🐳 Ejecución con Docker y Docker Compose

La forma recomendada de ejecutar toda la aplicación (Servidor Node.js Express + Base de datos Redis) es mediante Docker Compose:

1. Asegúrate de tener Docker Desktop instalado y en ejecución.
2. Clona o abre la carpeta del proyecto en la terminal.
3. Ejecuta el siguiente comando para levantar los servicios:

docker compose up -d --build

4. Abre tu navegador e ingresa a http://localhost:3000.

Para detener los servicios:

docker compose down

---

🛠️ Probar Localmente (sin Docker)

1. Instala las dependencias con npm install.
2. Asegúrate de tener una instancia local de Redis escuchando en localhost:6379.
3. Inicia el servidor con npm start.
4. Abre http://localhost:3000 en el navegador.