Antes de escribir una sola línea de código nuevo, necesitas dejar listo el repositorio base del curso de Angular avanzado. Este punto de partida es un e-commerce funcional al que vas a llevar a otro nivel con server-side rendering, nueva reactividad y buenas prácticas de ingeniería pensadas para equipos que tienen Angular en su core.

¿Cómo clonar el repositorio del curso de Angular avanzado?

El flujo es directo: vas a GitHub, copias la URL del repo Curso Angular avanzado y lo clonas en cualquier carpeta de tu máquina desde la terminal [00:36].

Una vez clonado, entras a la carpeta del proyecto y ejecutas la instalación de dependencias con npm i. Este comando descarga todo lo que el proyecto necesita para correr, incluido Angular, Tailwind y demás librerías ya configuradas.

¿Qué versión de Node necesito para este proyecto? Funciona con Node 20, pero puedes usar cualquier versión LTS vigente sin problema [01:09].

¿Cómo levantar el servidor local con ng serve?

Con las dependencias listas, corres el proyecto con ng serve. Angular lo despliega por defecto en localhost:4200, así que ahí vas a ver el e-commerce en acción.

Al ejecutar el comando vas a notar algunos alerts en la consola. No son errores que rompan el proyecto: son malas prácticas que ya vienen incluidas a propósito y que iremos solucionando a lo largo del curso.

¿Qué incluye el proyecto base del e-commerce en Angular?

El proyecto que ves en localhost:4200 es un e-commerce con funcionalidad básica: navegación, páginas como about y location, manejo de un 404 intencional en la ruta de service, y un carrito de compras al que puedes agregar productos y ver cómo aumentan las piezas [01:53].

Abriendo el código en tu editor preferido, ya sea Visual Studio Code o Cursor (un fork de VS Code con inteligencia artificial integrada), vas a encontrar una arquitectura organizada por dominios.

¿Cómo está organizada la arquitectura de carpetas?

Dentro del proyecto encontrarás una carpeta domains con tres áreas claras:

• shared: componentes, directivas y modelos compartidos entre todo el proyecto.
• info: páginas informativas como about y not found.
• products: páginas de listado y detalle de producto, junto con sus servicios.

Cada dominio agrupa sus páginas, componentes y, cuando aplica, sus servicios. Esta separación es clave porque escala mejor que tener todo en una sola carpeta y refleja una práctica real de equipos profesionales.

Los servicios son la pieza que conecta el front con datos reales, y ahí entra la API que vamos a consumir.

¿Qué API usa el proyecto y por qué importa?

El proyecto se conecta a la Platzi Fake Store API, una API pública que entrega productos, categorías, órdenes de compra y localizaciones para trabajar con datos reales [03:16].

¿Para qué sirve la Platzi Fake Store API? Es una API de prueba que devuelve datos reales de un e-commerce: productos, categorías, filtros y órdenes. Sirve para practicar consumo de datos sin montar un backend propio.

La documentación de esta API cubre cómo filtrar productos, buscar por título, paginar resultados e incluso usar GraphQL. Todas estas capacidades las vamos a aprovechar de forma avanzada más adelante en el curso.

¿Por qué trabajar sobre código existente y no desde cero?

Empezar con un repositorio que ya funciona, pero que tiene espacio de mejora, replica lo que vas a vivir en tu día a día profesional. Casi nunca arrancas un proyecto from scratch: lo normal es que te integren a un legacy code, un código heredado que funciona pero necesita refactor.

Este proyecto base es justo eso. Tiene cosas que ya están bien resueltas con el nuevo estándar de Angular visto en el curso básico de Platzi, pero también tiene oportunidades claras de mejora con prácticas avanzadas.

Sé curioso: navega el código, revisa los endpoints de la API, identifica cuáles están implementados y cuáles no. Esa exploración es parte del músculo que necesitas desarrollar como ingeniero o ingeniera de front-end.

¿Ya clonaste el repo y corriste ng serve? Cuéntame en los comentarios qué alerts te aparecieron al levantar el proyecto.