Aplicación fullstack desarrollada con Angular 18 (frontend), NestJS (backend) y MongoDB Atlas, que permite gestionar Posts y Comments cumpliendo los endpoints requeridos, incluyendo carga masiva de posts.

• Node.js (LTS recomendado)
• Angular CLI 18+
• MongoDB Atlas (o MongoDB local)
• Git

fullstack-lab/ ├─ backend/ # NestJS API └─ frontend/ # Angular app

cd backend

npm install

Crear un archivo .env en la carpeta backend con el siguiente connection string como contenido:

MONGODB_URI=mongodb+srv://applabuser:[email protected]/fullstack_lab?appName=fullstack-lab

npm run start:dev

📍 Backend disponible en: http://localhost:3000

El backend implementa un Global Exception Filter en NestJS que captura todas las excepciones (validaciones, not found y errores internos) y devuelve respuestas estandarizadas.

Formato de error:

{
  "statusCode": 400,
  "error": "Bad Request",
  "message": [],
  "method": "POST",
  "path": "/posts",
  "timestamp": "2026-01-12T..."

🌐 Frontend (Angular)

cd frontend

npm install

npm start

📍 Frontend disponible en: http://localhost:4200

🔗 Endpoints requeridos 📌 Posts (CRUD completo)

GET /posts — Listar todos

GET /posts/:id — Obtener uno

POST /posts — Crear

PUT /posts/:id — Editar

DELETE /posts/:id — Eliminar

📌 Carga masiva de Posts

POST /posts/bulk

Request (JSON) carga masiva

[ { "title": "Post 1", "body": "Contenido...", "author": "User 1" }, { "title": "Post 2", "body": "Contenido...", "author": "User 2" } ]

Características:

• Validación por DTO de cada elemento

• Inserción usando insertMany()

• Respuesta estandarizada

• La carpeta shared contiene componentes y pipes reutilizables utilizados por distintos features.

• Se implementó ConfirmDeleteComponent y DateDmyPipe como ejemplos de reutilización.

• Se utilizaron Angular Signals (signal, computed) para el manejo reactivo del estado en el frontend.

• Se utilizaron operadores RxJS como switchMap, tap, catchError y delay para manejo de flujos asíncronos.

• Se implementó un servicio de “error mapping” que traduce errores del backend a mensajes amigables para el usuario.

• Las validaciones principales se centralizaron en el backend utilizando DTOs y class-validator. El frontend mantiene un enfoque simple y funcional, delegando la validación final al backend para evitar duplicación de lógica.

💬 Comments

GET /comments?postId={id} — Listar comentarios por post

POST /comments — Crear comentario

DELETE /comments/:id — Eliminar comentario

🧪 Validaciones

-Validación de datos mediante DTOs + class-validator

-Manejo de errores y respuestas claras

-CORS habilitado para consumo desde Angular

📮 Postman

Se incluye una colección Postman con todos los endpoints requeridos:

📄 Archivo: postman_collection.json

✅ Funcionalidades en Frontend

-Listado de posts

-Crear, editar y eliminar posts

-Vista detalle de post

-Listar, crear y eliminar comentarios

-Carga masiva de posts desde UI

-Navegación mediante Angular Router

📝 Notas finales

-Se priorizó funcionalidad sobre diseño gráfico

-El proyecto cumple con todos los requisitos funcionales del laboratorio.