Sticky Notes - Aplicación Todo en forma de Sticky Notes

Aplicación full-stack para gestión de notas adhesivas con un diseño moderno estilo dark mode.

Estructura del Proyecto

elmio_test/
├── backend/          # API REST con NestJS
├── frontend/         # Aplicación React con Vite
└── README.md

Requisitos Previos

• Node.js >= 18.x
• npm >= 9.x

Inicio Rapido con CLI

El proyecto incluye un CLI para facilitar la ejecucion:

# Ver ayuda
.\cli.ps1 help

# Instalar todas las dependencias
.\cli.ps1 install

# Iniciar frontend y backend
.\cli.ps1 start

# Ejecutar tests
.\cli.ps1 test

# Construir para produccion
.\cli.ps1 build

Comandos del CLI

Comando	Descripcion
.\cli.ps1 start	Inicia frontend y backend en modo desarrollo
.\cli.ps1 install	Instala dependencias de ambos proyectos
.\cli.ps1 test	Ejecuta todos los tests
.\cli.ps1 build	Construye para produccion
.\cli.ps1 help	Muestra la ayuda

Targets

Target	Alias	Descripcion
all	-	Frontend y backend (default)
frontend	f	Solo frontend
backend	b	Solo backend

Ejemplos:

.\cli.ps1 start           # Inicia todo
.\cli.ps1 test frontend   # Tests solo del frontend
.\cli.ps1 build b         # Build solo del backend

Instalacion Manual

Backend

cd backend
npm install

Frontend

cd frontend
npm install

Ejecucion Manual

Backend (Puerto 3000)

cd backend
npm run start:dev

Frontend (Puerto 5173)

cd frontend
npm run dev

Scripts Disponibles

Backend

Script	Descripción
npm run start:dev	Inicia el servidor en modo desarrollo con hot-reload
npm run build	Compila el proyecto para producción
npm run test	Ejecuta los tests unitarios
npm run test:e2e	Ejecuta los tests end-to-end
npm run lint	Ejecuta el linter

Frontend

Script	Descripción
npm run dev	Inicia el servidor de desarrollo
npm run build	Compila el proyecto para producción
npm run test	Ejecuta los tests con Jest
npm run test:watch	Ejecuta los tests en modo watch
npm run lint	Ejecuta el linter

Arquitectura

Backend - Clean Architecture con NestJS

El backend sigue los principios de Clean Architecture organizando el código en capas bien definidas:

backend/src/
├── main.ts                 # Punto de entrada
├── app.module.ts           # Módulo raíz
└── todos/
    ├── todos.module.ts     # Módulo de tareas
    ├── domain/
    │   └── entities/       # Entidades de dominio (Todo)
    ├── application/
    │   └── services/       # Lógica de negocio (TodoService)
    └── infrastructure/
        ├── controllers/    # Controladores HTTP (TodoController)
        └── repositories/   # Acceso a datos (SqliteTodoRepository)

Capas:

1. Domain: Entidades de negocio puras sin dependencias externas
2. Application: Casos de uso y servicios que orquestan la lógica
3. Infrastructure: Implementaciones concretas (controladores, repositorios, BD)

Patrones utilizados:

• Inyección de dependencias (DI) nativa de NestJS
• Repository Pattern para abstracción de datos
• DTOs con validación usando class-validator
• Base de datos SQLite con better-sqlite3

Frontend - Atomic Design con React

El frontend implementa Atomic Design para organizar los componentes de UI:

frontend/src/
├── components/
│   ├── atoms/          # Componentes básicos (Button, Input, Modal, etc.)
│   ├── molecules/      # Combinaciones de átomos (StickyNote, SearchBar)
│   ├── organisms/      # Secciones completas (TodoBoard, CreateTodoModal)
│   ├── templates/      # Layouts de página
│   └── pages/          # Páginas completas
├── hooks/              # Custom hooks
├── services/           # Servicios de API
├── store/              # Estado global (Zustand)
├── types/              # Tipos TypeScript
└── utils/              # Utilidades

Niveles de Atomic Design:

1. Atoms: Componentes más pequeños e indivisibles (Button, Input, Checkbox, Spinner, Modal)
2. Molecules: Combinaciones de átomos con una función específica (StickyNote, SearchBar)
3. Organisms: Secciones completas de UI (TodoBoard, TodoList, CreateTodoModal)
4. Templates: Estructuras de layout reutilizables (MainTemplate)
5. Pages: Páginas completas que usan templates (HomePage)

Stack tecnológico:

• React 19 con TypeScript
• Vite como bundler
• Tailwind CSS v4 para estilos
• Zustand para estado global
• Zod para validación de schemas
• Axios para peticiones HTTP
• GSAP para animaciones
• Jest + React Testing Library para tests

Patrones utilizados:

• Custom Hooks para separar lógica de presentación
• Single Responsibility Principle en cada componente
• Composition over Inheritance
• Container/Presentational pattern implícito en hooks

API Endpoints

Método	Endpoint	Descripción
GET	/api/v1/todos	Obtener todas las tareas
GET	/api/v1/todos/:id	Obtener una tarea por ID
POST	/api/v1/todos	Crear una nueva tarea
PATCH	/api/v1/todos/:id	Actualizar una tarea
PATCH	/api/v1/todos/:id/complete	Cambiar estado de completado
DELETE	/api/v1/todos/:id	Eliminar una tarea

Características

• Notas adhesivas arrastrables con persistencia de posición
• Colores pastel aleatorios para cada nota
• Modal de creación con validación
• Animaciones suaves con GSAP
• Tema dark mode inspirado en vite.dev
• API RESTful con validación
• Tests unitarios y de integración

Testing

Backend

cd backend
npm run test           # Tests unitarios
npm run test:cov       # Coverage
npm run test:e2e       # Tests E2E

Frontend

cd frontend
npm run test           # Tests unitarios
npm run test:watch     # Modo watch
npm run test:coverage  # Coverage