Skip to content
JR Joey Rodriguez
← Todos los proyectos

Caso de estudio · Full-stack

Registro de visitantes (MEAN)

Una app full-stack compacta construida sobre el stack MEAN — un front-end en Angular servido por una API de Express + MongoDB en un solo origen — con crear/leer/actualizar/eliminar completo sobre una lista de visitantes y sus comentarios.

Rol
Full-stack — diseño y construcción, en solitario
Front-end
Angular 19, TypeScript
Back-end
Express, MongoDB, Mongoose
Contexto
Harvard Extension — Desarrollo de apps web

Demo pública — los datos de ejemplo se restablecen periódicamente y el servidor gratuito puede tardar ~30–50s en despertar en la primera carga.

Lista de visitantes en Angular — nombres y comentarios con acciones de editar/eliminar Formulario Agregar Visitante — ingresando un nombre y un comentario
El cliente Angular — la lista de visitantes y el formulario de alta/edición, comunicándose con la API de Express.

Qué es

Un registro de visitantes donde agregas un visitante con un comentario, ves a todos en una lista y editas o eliminas entradas. Es pequeño a propósito — el objetivo era practicar una construcción limpia de principio a fin con Angular + Express + MongoDB, la contraparte en Angular de mi app de checklist en React/MERN.

Cómo está construido

Es un monolito: el servidor de Express construye y sirve la app de Angular compilada y expone la API REST bajo /api, así que todo corre en un solo origen — sin CORS, sin un host de front-end aparte.

Cliente Angular

SPA en Angular 19 · vistas de lista y alta/edición · HttpClient → /api · router

API Express

REST /api/visitors · rutas → servicios → modelo · sirve el build de Angular

MongoDB

Modelo Visitor de Mongoose · nombre + comentario

Flujo de la petición: HttpClient de Angular → /api/visitors → ruta de Express → servicio → Mongoose → MongoDB, y de vuelta.

Stack

Front-end

  • Angular 19
  • TypeScript
  • RxJS
  • Angular Router
  • HttpClient

Back-end

  • Node.js
  • Express
  • MongoDB
  • Mongoose

Contexto honesto

Esto comenzó como trabajo de curso de mi micro-certificado de Desarrollo de Aplicaciones Web de Harvard Extension. Lo incluyo para completar la historia del stack — Angular junto a React — y porque es código full-stack real y funcional que diseñé y desplegué en solitario (Render + MongoDB Atlas). Los siguientes pasos naturales serían validación de formularios, paginación y pruebas.