Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Stivenz3/Nexu/llms.txt

Use this file to discover all available pages before exploring further.

Nexu is built on a two-layer architecture: a React 18 + Vite single-page application served from Vercel’s CDN, communicating directly with Firebase Auth and Firestore from the browser, with a single Vercel serverless function handling the one task that requires a server-side secret. There is no traditional Express/Node API layer — Firebase Security Rules are the enforcement boundary, and the app treats Firestore as its backend.

​
Architecture Layers

​
Frontend — React 18 + Vite on Vercel

The entire user experience lives in src/. Vite builds static assets that Vercel deploys to its CDN globally. The app calls Firebase Auth and Firestore directly using the Firebase JS SDK — there is no proxy or middleware server between the browser and Google’s infrastructure.

​
Backend — Firebase + One Serverless Function

Firebase provides two backend primitives:
  • Firebase Auth — manages user identity (email/password sign-up and sign-in).
  • Firestore — stores all application data: lessons, user progress, and certificates. Security Rules in firestore.rules enforce who can read or write which documents.
The one exception to “browser talks directly to Firebase” is reCAPTCHA verification. The RECAPTCHA_SECRET_KEY must never be exposed in frontend code, so it lives in a Vercel serverless function:
  • /api/verify-recaptcha (Edge Function, api/verify-recaptcha.ts) — accepts a reCAPTCHA token from the browser, exchanges it with Google’s siteverify endpoint using the server-side secret, and returns a { success, score } response.

​
Seed Scripts — Content Loading

Lesson content (blocks, questions, and normative references) is loaded into Firestore by Node.js seed scripts run from a developer terminal, not by the application itself. The app only reads lesson content. 
User Browser
  └── React App (Vercel CDN)
        ├── Firebase Auth        (email/password login & session)
        ├── Firestore            (lessons, progress, certificates)
        └── /api/verify-recaptcha  (Vercel Edge Function)

Developer Terminal
  └── seed scripts → Firestore  (lesson content)
There is no large “API with 50 routes.” The React app communicates with Firebase from the browser; Firestore Security Rules are the only server-side enforcement layer for data access. The single serverless function at /api/verify-recaptcha exists solely because a reCAPTCHA secret key cannot safely live in client-side code.

​
Application Routes

All routes are defined in src/App.tsx. Protected routes are wrapped in ProtectedRoute, which reads isAuthenticated from AuthContext and redirects unauthenticated users to /login.
RouteAuth RequiredPage ComponentDescription
/PublicWelcomePageWelcome / landing screen
/loginPublicLoginPageEmail/password sign-in
/registroPublicRegisterPageNew user registration with reCAPTCHA
/forgot-passwordPublicForgotPasswordPagePassword reset request
/rutaProtectedLearningPathPageFull learning path with lesson cards
/leccion/:idProtectedLessonFlowPageSequential block flow (video → theory → game → exam)
/leccion/:id/mapaProtectedLessonMapPageLesson map / block overview
/leccion/:id/evaluacionProtectedLessonExamPageFinal exam for a specific lesson
/certificadoProtectedCertificatePageUser’s earned certificates
/certificado/documentoProtectedCertificateOfficialPageOfficial certificate document view
/verificar/:codePublicVerificationPagePublic QR code certificate verification
The :id parameter for the first lesson is lesson_01_higiene_personal.
The ProtectedRoute wrapper renders a centered spinner while isLoading is true (Firebase Auth state not yet resolved), preventing a flash-redirect to /login on page refresh.

​
Source Directory Map

src/
├── pages/          Top-level page components (one per route)
├── components/
│   ├── layout/     Shell, navigation, sidebar
│   ├── lesson/     Block views (video, theory, game, exam)
│   ├── certificate/Certificate card, PDF, QR
│   └── ui/         Generic design-system components
├── services/
│   ├── lessonService.ts      Firestore reads for lessons, blocks, questions
│   ├── progressService.ts    Read/write user progress subcollection
│   └── certificateService.ts Issue, fetch, and verify certificates
├── contexts/
│   └── AuthContext.tsx       React context — auth state, login, register, logout
├── types/
│   ├── lesson.ts             LessonDoc, LessonBlock, LessonQuestion, LessonProgress
│   └── certificate.ts        CertificateRecord, CertificatePublicRecord, CertificateView
├── firebase/
│   └── config.ts             Firebase app init; reads VITE_FIREBASE_* env vars
firestore-seed/               JSON content files for each lesson
scripts/                      Node.js seed scripts (seed-lesson.mjs)
api/
└── verify-recaptcha.ts       Vercel Edge Function — reCAPTCHA server verification
firestore.rules               Firestore Security Rules
firestore.indexes.json        Composite index definitions

​
Environment Variables

The Firebase configuration is read from VITE_FIREBASE_* environment variables at build time. In local development, if these variables are absent, src/firebase/config.ts falls back to hardcoded development project values for the shared nexu-156ce Firebase project. In production (Vercel), all variables must be set explicitly — the build will throw if any are missing.
VariableUsed by
VITE_FIREBASE_API_KEYFirebase JS SDK
VITE_FIREBASE_AUTH_DOMAINFirebase Auth
VITE_FIREBASE_PROJECT_IDFirestore
VITE_FIREBASE_STORAGE_BUCKETFirebase Storage (reserved)
VITE_FIREBASE_MESSAGING_SENDER_IDFirebase SDK
VITE_FIREBASE_APP_IDFirebase SDK
RECAPTCHA_SECRET_KEYapi/verify-recaptcha.ts (Vercel, server-only)
RECAPTCHA_SECRET_KEY is a Vercel environment variable, not a VITE_ variable. It is never included in the frontend bundle. Setting it as a VITE_ variable would expose it to every user’s browser.

Build docs developers (and LLMs) love

Get started for freeTalk to us