Teorico - Examen Teórico del Carnet de Conducir

Una aplicación móvil MVP para ayudar a usuarios a aprobar el examen teórico del permiso B del carnet de conducir en España.

🚀 Características

• Onboarding personalizado: 17 pantallas de onboarding que recopilan información del usuario
• Autenticación: Sign in con Google y Apple usando Supabase
• Paywall con prueba gratuita: 7 días de prueba gratuita con 3 planes de suscripción
• Diseño minimalista: Inspirado en Duolingo con paleta de colores azul
• Arquitectura escalable: Código limpio y estructura modular lista para crecer

📋 Requisitos Previos

• Node.js (v16 o superior)
• npm o yarn
• Expo CLI
• Cuenta de Supabase
• Cuenta de RevenueCat
• Xcode (para iOS) o Android Studio (para Android)

🛠️ Instalación

1. Clonar el repositorio

   cd app

2. Instalar dependencias

   npm install

3. Configurar variables de entorno

   cp .env.example .env

   Edita .env y añade tus credenciales:

   • Supabase URL y Anon Key
   • RevenueCat API Key (una sola clave para iOS y Android)

4. Iniciar el servidor de desarrollo

   npx expo start

🔧 Configuración de Servicios

Supabase

1. Crea un proyecto en Supabase
2. Copia la URL y Anon Key al archivo .env
3. Configura Google OAuth en Supabase:
   • Authentication → Providers → Google
   • Añade las credenciales de Google Cloud Console
4. Configura Apple OAuth en Supabase:
   • Authentication → Providers → Apple
   • Añade las credenciales de Apple Developer
5. Crea la tabla user_profiles (opcional):

   create table user_profiles (
     id uuid primary key default uuid_generate_v4(),
     user_id uuid references auth.users not null,
     study_level text,
     daily_goal text,
     notifications_enabled boolean,
     age integer,
     created_at timestamp with time zone default now(),
     updated_at timestamp with time zone default now()
   );

RevenueCat

1. Crea un proyecto en RevenueCat
2. Copia la API Key al archivo .env
   • Importante: RevenueCat usa una sola API Key para iOS y Android
   • Las claves que empiezan con test_ son para sandbox/pruebas
   • Para producción, obtendrás una clave diferente
3. Configura los productos en App Store Connect y Google Play Console
4. Crea los productos en RevenueCat:
   • Weekly: teorico_weekly (€3.99)
   • Monthly: teorico_monthly (€9.99)
   • 3 Months: teorico_three_months (€24.99)
5. Configura el entitlement "teorico premium" en RevenueCat
6. Actualiza los identificadores en src/services/revenueCat.ts si es necesario

Google Sign-In

1. Crea un proyecto en Google Cloud Console
2. Habilita Google Sign-In API
3. Crea credenciales OAuth 2.0
4. Añade las credenciales en Supabase y en app.json

Apple Sign-In

1. Configura Sign in with Apple en Apple Developer
2. Añade el capability en tu App ID
3. Configura las credenciales en Supabase
4. Actualiza el bundle ID en app.json

📱 Estructura del Proyecto

app/
├── src/
│   ├── components/         # Componentes reutilizables
│   ├── config/            # Configuración (tema, datos de onboarding)
│   ├── hooks/             # Custom hooks
│   ├── navigation/        # Configuración de navegación
│   ├── screens/           # Pantallas de la app
│   │   └── onboarding/   # Pantallas de onboarding
│   ├── services/          # Integraciones (Supabase, RevenueCat)
│   ├── store/             # Estado global (Zustand)
│   └── types/             # TypeScript types
├── assets/                # Imágenes y recursos
├── App.tsx               # Punto de entrada
└── app.json              # Configuración de Expo

🎨 Personalización

Colores del Tema

Edita src/config/theme.ts para cambiar la paleta de colores:

colors: {
  primary: '#1CB0F6',        // Color principal
  primaryDark: '#1899D6',    // Color principal oscuro
  // ... más colores
}

Contenido del Onboarding

Edita src/config/onboardingData.ts para modificar las pantallas de onboarding:

export const onboardingScreens: OnboardingScreen[] = [
  {
    id: 'welcome',
    type: 'feature',
    title: '¡Bienvenido a Teorico!',
    description: 'Tu compañero perfecto...',
  },
  // ... más pantallas
];

Precios de Suscripción

Edita src/config/constants.ts:

export const SUBSCRIPTION_PRICES = {
  weekly: { price: 3.99, currency: '€', period: 'semana' },
  monthly: { price: 9.99, currency: '€', period: 'mes' },
  threeMonths: { price: 24.99, currency: '€', period: '3 meses' },
};

🚀 Flujo de la Aplicación

1. Welcome Screen → Usuario ve "Empezar" o "Ya tengo una cuenta"
2. Onboarding Flow → 17 pantallas (features + preguntas)
3. Sign Up → Google/Apple authentication
4. Paywall → Selección de plan con 7 días gratis
5. Home Screen → "Hello World" (placeholder para features principales)

📦 Compilación

iOS

npx expo run:ios

Para compilar para App Store:

eas build --platform ios

Android

npx expo run:android

Para compilar para Google Play:

eas build --platform android

🔄 Estado de la Aplicación

• Onboarding: Estado efímero (no se persiste). Si el usuario cierra la app, vuelve a empezar.
• Autenticación: Persistida por Supabase
• Suscripción: Gestionada por RevenueCat

📝 Próximos Pasos

• Configurar Supabase con tus credenciales
• Configurar RevenueCat con tus productos
• Reemplazar el placeholder del mascota con tu diseño
• Actualizar iconos y splash screen
• Implementar la funcionalidad principal de tests (Home Screen)
• Añadir más pantallas de onboarding si es necesario
• Configurar analytics
• Probar el flujo completo en dispositivos reales

🐛 Troubleshooting

"Supabase not configured"

Asegúrate de que .env tiene las credenciales correctas y reinicia el metro bundler:

npx expo start --clear

"RevenueCat not initialized"

1. Verifica que las API keys están en .env
2. Asegúrate de que los productos están creados en RevenueCat
3. Revisa que los identificadores coinciden con tu configuración

Google/Apple Sign-In no funciona

1. Verifica que OAuth está configurado en Supabase
2. Comprueba que los redirect URIs son correctos
3. En iOS, asegúrate de que el bundle ID coincide
4. En Android, añade el SHA-1 fingerprint

📄 Licencia

Este proyecto es privado y confidencial.

👥 Soporte

Para preguntas o problemas, contacta al equipo de desarrollo.

---

Nota: Este es un MVP. El código incluye comentarios TODO para las áreas que necesitan configuración adicional.