Saltar al contenido principal

🥳 Welcome aboard

Bienvenido al onboarding de frontend

Esta documentación está pensada para leerse en orden, empecemos por el stack y conozcamos el turbo repo, para luego ver cómo construimos aplicaciones en producción, para ello seguimos el siguiente orden: primero entendemos cómo llegan los datos, luego cómo construimos piezas individuales (componentes), con los datos y componentes cómo ensamblamos todo como un sistema mantenible (Arquitectura), por último, nuestros estándares de coding y calidad.

Stack principal​

Usamos un stack moderno y probado en producción:

  • Next.js
    Framework base para routing, rendering y optimizaciones (SSR / RSC cuando aplique).

  • React
    UI basada en componentes, composición y estado explícito.

  • TypeScript
    Tipado estricto como primera línea de defensa contra errores.

  • React Hook Form
    Manejo de formularios de forma performante y declarativa.

  • React Query (@tanstack/react-query)
    Capa de acceso a datos remotos (queries, mutations, cache, retries).

  • shadcn/ui
    Librería de componentes base, accesibles y extensibles, integrada con Tailwind.

  • Algolia
    Librería para implementar buscadores rápidos, escalables y optimizados para grandes volúmenes de datos.

  • Better auth
    Librería para manejar autenticación y autorización de forma segura y centralizada.

  • Vitest
    Framework para realizar pruebas unitarias.

  • Cypress
    Framework para realizar pruebas end to end a los features del sistema.

1️⃣ Fundamentos de cómo hacer fetch: cómo llegan los datos a la aplicación​

Antes de escribir componentes, necesitamos entender cómo nos integramos con APIs y cómo aislamos la UI de los cambios del backend.

Aquí aprenderás:

  • Cómo integramos una API
  • Cómo llegan los datos a la aplicación
  • Cómo usamos queries, mutations y transformaciones
  • Por qué la UI nunca consume respuestas crudas

👉 Ir a: Cómo integramos una API

2️⃣ Componentes: cómo construimos UI​

Con los datos claros, pasamos a la unidad básica del frontend: el componente.

Aquí aprenderás:

  • Cómo escribimos componentes
  • Qué responsabilidades tiene (y cuáles no)
  • Cómo mantener componentes simples y reutilizables

👉 Ir a: Cómo escribimos componentes

3️⃣ Nuestra esencia: arquitectura, estándares y calidad​

Cuando sabemos traer datos y construir componentes, es momento de ensamblarlos bajo reglas claras.

Aquí aprenderás:

  • Nuestra arquitectura frontend
  • Nuestros estándares de código
  • Prácticas de calidad, testing y manejo de errores
  • Cómo mantenemos coherencia y escalabilidad en el tiempo

4️⃣ Fundamentos de Diseño: POO y SOLID​

Nuestras aplicaciones se apoyan en principios de Programación Orientada a Objetos y SOLID para estructurar la lógica de negocio fuera de los componentes.

👉 Ir a: Fundamentos de diseño

👉 Ir a: Arquitectura
👉 Ir a: Nuestros estándares
👉 Ir a: Calidad