🗣️ Semáforo Descarte

🌐 Ir a GitHub y registrarse

Clic en "Sign up" → rellena email, contraseña y username → confirma email.

🔥 Ir a Firebase Console

Inicia sesión con tu cuenta de Google (Gmail).

➕ Crear nuevo proyecto

• Clic en "Crear un proyecto"
• Nombre del proyecto: semaforo-descarte
• Desactiva Google Analytics (no es necesario)
• Clic en "Crear proyecto" → espera 30 segundos

🗄️ Paso 3A — Activar Firestore Database

• Menú izquierdo → Firestore Database
• Clic en "Crear base de datos"
• Selecciona "Comenzar en modo de producción"
• Ubicación: us-central1 (o la que aparezca por defecto)
• Clic en "Listo"

Espera ~20 segundos a que se active.

🔐 Paso 3B — Reglas de Firestore

Una vez creada la base de datos → pestaña "Reglas" → borra todo → pega esto:

Clic en "Publicar".

🔑 Paso 3C — Activar Email/Password Authentication

• Menú izquierdo → Authentication
• Clic en "Comenzar"
• Pestaña "Método de acceso"
• Clic en "Correo electrónico/contraseña"
• Activa el primer toggle ("Correo electrónico/contraseña")
• Clic en "Guardar"

📱 Paso 3D — Añadir App Web (obtener credenciales)

Aquí es donde usas la opción "Add Firebase to your web app":

• En Firebase Console → haz clic en el ⚙️ (engranaje) → "Configuración del proyecto"
• Baja hasta la sección "Tus apps"
• Clic en el ícono </> (Web)
• Apodo de la app: semaforo-descarte-web
• NO marques "Firebase Hosting" (usaremos Vercel)
• Clic en "Registrar app"

Firebase te mostrará exactamente esto (el bloque firebaseConfig):

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyD-ejemplo123abc456def789ghi_ESTE-ES-TU-API-KEY",
  authDomain: "semaforo-descarte.firebaseapp.com",
  projectId: "semaforo-descarte",
  storageBucket: "semaforo-descarte.firebasestorage.app",
  messagingSenderId: "123456789012",
  appId: "1:123456789012:web:abcdef1234567890"
};

Después de copiar → clic en "Ir a la consola" (no necesitas instalar SDK).

🛠️ Cómo crear el usuario admin

• En Firebase Console → Authentication
• Pestaña "Usuarios"
• Clic en "Añadir usuario"
• Email: admin@semaforo.app
• Contraseña: Semaforo2025!
• Clic en "Añadir usuario"

✓ Usuario creado correctamente

Identificador        Proveedores     Creado          UID
admin@semaforo.app   Email/Cont.     Hoy             abc123xyz...

📦 Paso 5A — Extraer semaforo-descarte.zip

• Descarga semaforo-descarte.zip
• Clic derecho → "Extraer aquí"
• Se crea carpeta semaforo-descarte
• Muévela a Desktop para fácil acceso

📄 Paso 5B — Crear archivo .env.local

Dentro de la carpeta semaforo-descarte:

• Clic derecho en espacio vacío → "Nuevo" → "Documento de texto"
• Nómbralo .env.local (con punto al inicio, SIN .txt)
• Abre con Notepad o VS Code

🔑 Paso 5C — Pegar credenciales Firebase

Tienes en Notepad el bloque de Firebase. Conviértelo así:

De (Firebase Console te da esto):

A (esto va en tu .env.local — solo los valores, sin comillas):

💾 Paso 5D — Guardar y verificar

Guarda el archivo .env.local en la raíz de semaforo-descarte/

semaforo-descarte/
├── .env.local          ← TU ARCHIVO (no se sube a GitHub)
├── .env.example        ← plantilla de referencia
├── .gitignore          ← protege el .env
├── package.json
├── vercel.json
├── vite.config.js
├── index.html
└── src/

⬇️ Paso 6A — Instalar Git para Windows

Ejecuta el instalador → Siguiente en todo (opciones por defecto están bien).

Verifica instalación en CMD:

C:\Users\TuNombre> git --version
git version 2.43.0.windows.1

⚙️ Paso 6B — Configurar identidad Git (primera vez)

Reemplaza con tu nombre y el email de GitHub.

📂 Paso 6C — Crear repositorio en GitHub

• GitHub.com → Clic en "+" (arriba derecha) → "New repository"
• Repository name: semaforo-descarte
• Visibilidad: "Private" ← importante
• NO marques ninguna opción adicional (README, .gitignore, license)
• Clic en "Create repository"

🔧 Paso 6D — Abrir Git Bash en la carpeta del proyecto

• Navega a carpeta semaforo-descarte en el Explorador de Windows
• Clic derecho en espacio vacío → "Open Git Bash here"
• Aparece una ventana de terminal negra

📤 Paso 6E — Inicializar y subir código

En Git Bash, ejecuta estos comandos (uno por uno):

$ git init
Initialized empty Git repository in C:/Users/.../semaforo-descarte/.git/

$ git add .
(no output - normal)

$ git commit -m "Semaforo Descarte v1 - Deploy inicial"
[main (root-commit) abc1234] Semaforo Descarte v1 - Deploy inicial
 24 files changed, 1234 insertions(+)

Ahora vincula con GitHub (copia la URL de TU repo en GitHub):

Reemplaza TU_USUARIO con tu usuario de GitHub.

$ git push -u origin main
Enumerating objects: 31, done.
Counting objects: 100% (31/31), done.
Delta compression using up to 8 threads
Compressing objects: 100% (28/28), done.
Writing objects: 100% (31/31), 45.23 KiB | 5.03 MiB/s, done.
Total 31 (delta 2), reused 0 (delta 0), pack-reused 0
Branch 'main' set up to track remote branch 'main' from 'origin'.

🔐 Paso 6F — Si pide usuario y contraseña

GitHub ya NO acepta contraseña normal. Necesitas un Personal Access Token:

• GitHub → Tu foto (arriba derecha) → Settings
• Baja al final → Developer settings
• Personal access tokens → Tokens (classic)
• Clic en "Generate new token (classic)"
• Nota: semaforo-descarte-deploy
• Expiration: 90 days
• Marca: ✅ repo (todo lo de repo)
• Clic en "Generate token"
• Copia el token AHORA (solo lo ves una vez)

Usa el token como "contraseña" cuando Git Bash te la pida.

🚀 Paso 7A — Registrarse en Vercel

• Clic en "Sign Up"
• Selecciona "Continue with GitHub"
• Autoriza Vercel a acceder a GitHub

📊 Paso 7B — Importar repositorio

• Dashboard Vercel → "Add New..." → "Project"
• Busca semaforo-descarte en la lista
• Clic en "Import"

Import Git Repository

📁 semaforo-descarte          Private   [Import]

⚙️ Paso 7C — Configuración automática (Vite detectado)

No cambies nada aquí, Vercel detecta Vite automáticamente.

🔑 Paso 7D — Añadir Variables de Entorno en Vercel

En la página de configuración, baja hasta "Environment Variables".

Añade estas 6 variables (Name + Value por cada una):

Name                              Value
──────────────────────────────────────────────────────────────────
VITE_FIREBASE_API_KEY             AIzaSyD-tu-api-key-real-de-firebase
VITE_FIREBASE_AUTH_DOMAIN         semaforo-descarte.firebaseapp.com
VITE_FIREBASE_PROJECT_ID          semaforo-descarte
VITE_FIREBASE_STORAGE_BUCKET      semaforo-descarte.firebasestorage.app
VITE_FIREBASE_MESSAGING_SENDER_ID 123456789012
VITE_FIREBASE_APP_ID              1:123456789012:web:abcdef1234567890
──────────────────────────────────────────────────────────────────
6 variables added ✅

🚀 Paso 7E — Deploy

• Confirma que las 6 variables VITE_ están añadidas
• Clic en el botón azul "Deploy"
• Vercel clona el repo → instala deps → hace build
• Espera 2-4 minutos

[00:01] Cloning github.com/TU_USUARIO/semaforo-descarte (Branch: main)
[00:03] Running "npm install"
[00:18] added 421 packages in 15s
[00:20] Running "npm run build"
[00:21] vite v5.0.8 building for production...
[00:26] transforming...
[00:28] ✓ 421 modules transformed.
[00:29] dist/index.html             0.77 kB
[00:29] dist/assets/index.css       18.69 kB
[00:29] dist/assets/index.js      1,194 kB
[00:30] ✓ built in 6.5s
[00:32] Build completed. Uploading output...
[00:35] ✅ Deployment completed!

🎉 Paso 7F — ¡Tu app está en vivo!

Vercel te muestra:

🎉 Congratulations! Your deployment is live.

Production Deployment
https://semaforo-descarte.vercel.app

Domains:
  ✓ semaforo-descarte.vercel.app (Production)
  ✓ semaforo-descarte-TU_USUARIO.vercel.app (Alias)

Build time:  6.5s
Status:      ● Ready

¡Esa URL es tu app en vivo! Compártela con padres.

🧪 Test 1 — Código de acceso regular

• Abre https://semaforo-descarte.vercel.app
• Ingresa código: ACC001
• Acepta el disclaimer
• Selecciona rango de edad
• Responde las preguntas → ve el resultado

✅ Pantalla de Login carga → ACC001 funciona
✅ Disclaimer aparece correctamente
✅ 8 rangos de edad disponibles
✅ Preguntas se muestran una a una
✅ Resultado final con semáforo
✅ Botón WhatsApp funciona
✅ Botón PDF descarga correctamente

🔒 Test 2 — Verificar single-use (no repetición)

• Ingresa NUEVAMENTE con ACC001
• Debe mostrar directamente el resultado anterior
• No debe permitir repetir el test

🛡️ Test 3 — Panel Admin

• En login → clic en "🔐 Acceso de administrador"
• Email: admin@semaforo.app
• Contraseña: Semaforo2025!
• Debe cargar el Panel Admin con los 100 códigos
• ACC001 debe aparecer como ✓ Usado con el resultado

✅ Login admin funciona (Firebase Auth)
✅ Panel carga 100 códigos ACC001-ACC100
✅ ACC001 aparece como "Usado"
✅ Se puede editar nombre/email/teléfono
✅ Filtros y búsqueda funcionan

📱 Test 4 — Multi-dispositivo

Abre la URL en tu teléfono → ingresa con un código distinto (ej: ACC002)

Completa el test → luego en PC verifica en el Panel Admin → debe aparecer ACC002 como usado.