De una página web a una aplicación de negocio

1.1. Sitio informativo vs. aplicación web

Un sitio informativo muestra contenido: quién eres, qué haces, cómo contactarte. Es una vitrina. Una aplicación web además hace cosas: registra usuarios, guarda datos, cobra dinero, envía notificaciones y toma decisiones según reglas que tú defines.

1.2. Señales de que tu negocio necesita una aplicación

Toda aplicación web, desde un sistema de reservas hasta Rappi, se organiza en tres capas. Entenderlas te permite saber dónde va cada pieza de código que escribas en este curso.

2.1. El viaje de una reserva: de clic a confirmación

Sigamos qué pasa cuando un cliente reserva una cita en la app que vamos a construir:

1. El navegador muestra el formulario (frontend)

   El cliente elige servicio, barbero, fecha y hora. JavaScript valida en el momento que no falte ningún campo.

2. El servidor recibe la solicitud (backend)

   Aquí se aplican las reglas: ¿ese horario sigue libre? ¿el servicio existe? ¿el precio es el correcto? El frontend puede mentir; el backend nunca confía en él.

3. La base de datos guarda la cita

   Se inserta el registro con estado pendiente_pago. Una restricción de la base de datos impide dos citas en la misma silla a la misma hora.

4. La respuesta vuelve al navegador

   El cliente ve la pantalla de pago del anticipo. Todo el viaje tomó menos de un segundo.

Elegimos un stack que cumple tres condiciones: se usa en empresas reales de Latinoamérica, tiene plan gratuito suficiente para completar el curso, y una sola persona puede manejarlo de punta a punta.

3.1. Requisitos previos

• Antes de continuar, verifica que tienes:
• Bases de HTML, CSS y JavaScript (variables, funciones, arrays, objetos)
• Node.js 18 o superior instalado (node --version para verificar)
• Visual Studio Code (o tu editor preferido)
• Una cuenta de GitHub (gratuita) — la usaremos para Supabase y el deploy

ReservaYa es un sistema de reservas y pagos para "Don Barbas", la barbería de Julián en Medellín. Es el hilo conductor del curso: cada módulo le agrega una capacidad real, y al terminar tendrás una aplicación completa funcionando en producción — que puedes adaptar a restaurantes, consultorios, canchas sintéticas o cualquier negocio que agende y cobre.

4.1. Crear el proyecto Next.js

Abre la terminal en la carpeta donde guardas tus proyectos y ejecuta:

# Crea el proyecto con TypeScript, Tailwind y App Router
npx create-next-app@latest reservaya --typescript --tailwind --app --eslint

# Entra a la carpeta y arranca el servidor de desarrollo
cd reservaya
npm run dev

Abre http://localhost:3000 en el navegador. Si ves la página de bienvenida de Next.js, tu entorno funciona.

4.2. Crear el proyecto en Supabase

1. Crea la cuenta

   Entra a supabase.com, inicia sesión con GitHub y crea una organización gratuita.

2. Crea el proyecto "reservaya"

   Elige la región más cercana (São Paulo para Sudamérica) y guarda la contraseña de la base de datos en un lugar seguro.

3. Copia las credenciales

   En Settings → API encontrarás la Project URL y la clave anon public. Las usaremos ahora mismo.

4.3. Conectar Next.js con Supabase

Instala el cliente oficial y crea el archivo de variables de entorno:

# Instala los paquetes de Supabase para Next.js
npm install @supabase/supabase-js @supabase/ssr

Crea el archivo .env.local en la raíz del proyecto (nunca se sube al repositorio):

# .env.local — credenciales de desarrollo
NEXT_PUBLIC_SUPABASE_URL=https://TU-PROYECTO.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=TU-CLAVE-ANON-PUBLIC

Y crea el cliente que usará toda la aplicación, en lib/supabase/client.ts:

// lib/supabase/client.ts
// Cliente de Supabase para componentes que corren en el navegador
import { createBrowserClient } from "@supabase/ssr";

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,      // URL de tu proyecto
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!  // clave pública (segura de exponer)
  );
}

4.4. La página inicial de ReservaYa

Reemplaza el contenido de app/page.tsx con la landing de la barbería:

// app/page.tsx — página pública de Don Barbas
export default function Home() {
  return (
    <main className="min-h-screen bg-zinc-950 text-white">
      <section className="max-w-3xl mx-auto px-6 py-24 text-center">
        <p className="text-amber-500 font-semibold tracking-wide">
          BARBERÍA DON BARBAS · MEDELLÍN
        </p>
        <h1 className="text-5xl font-black mt-4">
          Reserva tu corte en 30 segundos
        </h1>
        <p className="text-zinc-400 mt-4">
          Elige tu barbero, paga el anticipo y llega sin filas.
        </p>
        {/* Este botón cobrará vida en el módulo 3 */}
        <a
          href="/reservar"
          className="inline-block mt-8 bg-amber-500 text-zinc-950
                     font-bold px-8 py-3 rounded-xl"
        >
          Reservar ahora
        </a>
      </section>
    </main>
  );
}

4.5. Mini-proyecto del módulo