This is a Next.js application with basic authentication functionality using React and TypeScript.
- User Registration: Form to create new accounts
- Login: Authentication for existing users
- Protected Home Page: Only accessible to authenticated users
- Responsive Design: Modern interface with Tailwind CSS
- Course Navigation: Sidebar with chapter organization
- Interactive Content: Videos, text content, and quizzes
/- Automatically redirects to/login/signup- Registration page/login- Login page/home- Main page (requires authentication)/home/introduccion- Course introduction/home/capitulo1/video- Chapter 1 video/home/capitulo1/texto- Chapter 1 text content/home/capitulo1/preguntas- Chapter 1 quiz/home/capitulo2/video- Chapter 2 video/home/capitulo2/texto- Chapter 2 text content/home/capitulo2/preguntas- Chapter 2 quiz
- Form with fields: Name, Phone, Email
- Registration button (placeholder - does nothing for now)
- Link to go to login
- Form with fields: Email, Password
- On successful login, sets a global user variable
- Automatically redirects to
/home
- Verifies if user is authenticated
- If no user, redirects to
/login - Shows course navigation with sidebar
- Includes logout button
- Introduction: Welcome content with course overview
- Videos: Embedded YouTube videos for each chapter
- Text Content: Detailed theoretical content with Lorem Ipsum placeholders
- Quizzes: Interactive questionnaires with multiple choice questions
- Next.js 15 - React framework
- React 19 - UI library
- TypeScript - Static typing
- Tailwind CSS - CSS framework
- Install dependencies:
npm install- Run in development mode:
npm run dev- Open http://localhost:3000 in your browser
The application includes a course with the following structure:
- Introduction: Course overview and objectives
- Chapter 1:
- Video: Fundamentals with embedded YouTube content
- Text: Detailed theoretical content
- Quiz: Interactive assessment
- Chapter 2:
- Video: Advanced concepts
- Text: In-depth theoretical material
- Quiz: Advanced assessment
La aplicación incluye integración con Stripe para procesar pagos del curso.
- Copia
.env.examplea.env.local - Añade tus claves de Stripe (Dashboard → Developers → API keys)
- Configura Firebase Admin:
- Opción A: Descarga la cuenta de servicio desde Firebase Console (Project Settings → Service accounts) y guarda como
serviceAccountKey.jsonen la raíz del proyecto - Opción B: Define
FIREBASE_SERVICE_ACCOUNT_JSONcon el contenido del JSON como string (útil para Vercel)
- Opción A: Descarga la cuenta de servicio desde Firebase Console (Project Settings → Service accounts) y guarda como
- Añade
FIREBASE_WEB_API_KEY(la misma apiKey defirebase.ts, en Firebase Console > Project Settings > General). Para que los emails funcionen:- Authentication > Sign-in method: habilitar "Email/Password"
- Project Settings > Authorized domains: incluir
localhost(dev) y tu dominio (producción)
Stripe necesita un endpoint público para enviar eventos. En local, usa Stripe CLI para reenviar eventos a tu servidor:
# Instala Stripe CLI: https://stripe.com/docs/stripe-cli
stripe listen --forward-to localhost:3000/api/stripe/webhookEl comando mostrará un webhook signing secret (empieza con whsec_). Añádelo a .env.local como STRIPE_WEBHOOK_SECRET.
En otro terminal, ejecuta la app y procesa un pago de prueba. Stripe CLI enviará el evento checkout.session.completed a tu webhook local.
- Usuario se registra como lead en
/signup(sin límite) - Usuario va a
/purchase, ingresa email y es redirigido a Stripe Checkout - Tras el pago, Stripe redirige a
/purchase/success - En la página de éxito, el usuario configura su contraseña (o recibe un email)
- Con la contraseña configurada, puede iniciar sesión en
/loginy acceder a/course
- El dashboard muestra leads y usuarios activos desde Firestore
- La autenticación usa Firebase Auth
- El contenido del curso usa placeholders (Lorem Ipsum, videos de ejemplo)