Notes App

EmpresaAplicacion de Notas

Año2025

TipoFull Stack · REST API · CRUD

RolBackend · Frontend

01El Desafío

Necesitaba una aplicacion de notas completa que fuera mas alla de un simple CRUD: con categorias para organizar las notas, sistema de archivado para ocultar notas sin eliminarlas, y una interfaz moderna y responsive que reflejara buenas practicas de desarrollo fullstack con NestJS y React.

02La Solución

Desarrolle una aplicacion fullstack con NestJS en backend (TypeORM + PostgreSQL) y React + TypeScript en frontend. El backend expone una API REST con endpoints para notas y categorias, relacion many-to-many entre ambas, y funcionalidad de archive/unarchive. El frontend consume la API con una interfaz limpia que permite crear, editar, archivar y filtrar notas por categoria — todo con estado manejado via hooks y comunicacion tipada con el backend.

API REST con NestJS: modulos de Notes y Categories con controllers, services y entities separados por responsabilidad

TypeORM con PostgreSQL: entidades Note y Category con relacion ManyToMany via tabla intermedia generada automaticamente

CRUD completo de notas: crear (titulo + contenido + categorias opcionales), leer (todas o por ID), actualizar (parcial con PATCH), eliminar (DELETE fisico)

CRUD completo de categorias: crear, listar, actualizar nombre, eliminar — con validacion de nombre unico

Sistema de archivado: endpoint PATCH /notes/:id/archive y /notes/:id/unarchive — las notas archivadas no aparecen en la lista principal pero se pueden recuperar

Filtrado por categoria: query parameter categoryId en GET /notes para obtener solo las notas de una categoria especifica

Filtrado por estado: query parameter archived=true/false para listar notas activas o archivadas separadamente

Validacion con class-validator: DTOs con decoradores @IsString(), @IsNotEmpty(), @IsOptional(), @IsArray() para validar cada request

Pipes globales de NestJS: ValidationPipe con whitelist y forbidNonWhitelisted para rechazar propiedades no declaradas en el DTO

Configuracion de base de datos con variables de entorno via @nestjs/config — host, port, username, password y database configurables sin hardcodear

Frontend React + TypeScript con interfaz moderna: lista de notas con preview de contenido, badge de categorias, y acciones rapidas (editar, archivar, eliminar)

Formulario de creacion/edicion con campos de titulo, contenido (textarea expandible) y selector de categorias multiples

Vista dual: pestanas para alternar entre notas activas y notas archivadas — con contador de notas en cada pestana

Filtro por categoria en el sidebar: click en una categoria filtra las notas mostradas sin recargar la pagina

Gestion de categorias inline: crear nuevas categorias desde un input en el sidebar sin navegar a otra pagina

Feedback visual: confirmacion de eliminacion con modal, toast de exito al archivar/desarchivar, estados de loading en cada operacion

Modulos NestJS separados: NotesModule y CategoriesModule con imports explicitos — cada modulo registra su entity, service y controller

TypeORM migrations para versionado del schema de base de datos — cambios reproducibles en cualquier entorno

Docker Compose para PostgreSQL en desarrollo — un comando para levantar la base de datos

Scripts npm para desarrollo: start:dev (backend con hot-reload), start:frontend (Vite dev server), ambos en paralelo

FLUJO — Crear nota con categorias: [Frontend] POST /notes {title, content, categoryIds: [1, 3, 5]} → [ValidationPipe] class-validator: title @IsNotEmpty, content @IsString, categoryIds @IsArray @IsOptional → [NotesService] crea nota con TypeORM → resuelve categorias por IDs → establece relacion ManyToMany en tabla intermedia notes_categories → save() persiste nota + relaciones en una transaccion → response 201 con nota + categorias expandidas

FLUJO — Archivar y desarchivar: [Frontend] PATCH /notes/{id}/archive → [NotesService] busca nota por ID → nota.isArchived = true, nota.archivedAt = now → save() → response 200. La nota desaparece de GET /notes (que filtra archived=false por defecto) → aparece en GET /notes?archived=true. [Desarchivar] PATCH /notes/{id}/unarchive → isArchived = false, archivedAt = null → vuelve a la lista principal

FLUJO — Filtrado por categoria: [Frontend] GET /notes?categoryId=3&archived=false → [NotesController] extrae query params → [NotesService] QueryBuilder con LEFT JOIN en notes_categories → WHERE categoryId = 3 AND isArchived = false → ORDER BY updatedAt DESC → response con notas filtradas, cada una con sus categorias cargadas (eager loading)

FLUJO — Interaccion completa: [React] usuario escribe titulo y contenido → selecciona categorias del multi-select (cargadas via GET /categories al montar) → submit → POST /notes con body → [NestJS] valida, persiste, retorna nota → [React] agrega nota al estado local → renderiza NoteCard con titulo, preview de contenido (primeros 100 chars) y badges de categorias → toast de exito

03Stack Tecnológico

NestJS

TypeORM

PostgreSQL

React

TypeScript

Vite

class-validator

Docker

Node.js

04Resultados

2 CRUDsNotes y Categories completos