KARATE CLUB » KARA CLUB - WEB

1. Objetivo

Configurar la estructura base del proyecto Next.js con TypeScript, integrando Supabase para backend y desplegando en Vercel.

1. Descripción Técnica

Inicializar el proyecto web (PWA) con todas las dependencias, configuraciones y estructura de carpetas necesarias para el desarrollo. Este es el primer paso técnico y bloqueante para todo el desarrollo posterior.

1. Tareas Detalladas

1. 1. Inicialización del Proyecto
   - [ ] Crear proyecto Next.js 14+ con TypeScript
   - [ ] Configurar ESLint y Prettier
   - [ ] Configurar Tailwind CSS
   - [ ] Configurar estructura de carpetas:
   ```
   /app (App Router)
   /components
   /lib (utilidades y configuraciones)
   /types (TypeScript types)
   /hooks (React hooks personalizados)
   /services (API calls)
   /public (assets estáticos)
   ```

1. 2. Configuración de Supabase
   - [ ] Crear proyecto en Supabase
   - [ ] Instalar @supabase/supabase-js y @supabase/auth-helpers-nextjs
   - [ ] Configurar cliente de Supabase (lib/supabase.ts)
   - [ ] Configurar variables de entorno (.env.local):
   - NEXT_PUBLIC_SUPABASE_URL
   - NEXT_PUBLIC_SUPABASE_ANON_KEY
   - SUPABASE_SERVICE_ROLE_KEY
   - [ ] Crear archivo .env.example

1. 3. Configuración de PWA
   - [ ] Instalar next-pwa
   - [ ] Crear manifest.json
   - [ ] Configurar service worker
   - [ ] Configurar iconos de app (múltiples tamaños)
   - [ ] Configurar next.config.js para PWA

1. 4. Configuración de Autenticación
   - [ ] Configurar Supabase Auth
   - [ ] Crear AuthProvider context
   - [ ] Crear hook useAuth()
   - [ ] Crear middleware de Next.js para rutas protegidas

1. 5. UI Base
   - [ ] Instalar shadcn/ui (componentes base)
   - [ ] Configurar tema (colores, tipografías)
   - [ ] Crear layout principal (AppLayout)
   - [ ] Crear componente de navegación (Navbar/Sidebar)
   - [ ] Crear página de login
   - [ ] Crear página 404

1. 6. Configuración de Desarrollo
   - [ ] Configurar scripts en package.json (dev, build, test, lint)
   - [ ] Configurar Git hooks con Husky (pre-commit)
   - [ ] Configurar testing con Jest y React Testing Library
   - [ ] Documentar setup en README.md

1. 7. Deployment
   - [ ] Conectar repositorio con Vercel
   - [ ] Configurar variables de entorno en Vercel
   - [ ] Realizar primer deploy de prueba
   - [ ] Configurar dominio (si aplica)

1. Criterios de Aceptación

- ✅ El proyecto arranca en local con `npm run dev`
- ✅ Supabase conectado correctamente (sin errores)
- ✅ Sistema de autenticación funciona (login/logout)
- ✅ PWA instalable en navegadores compatibles
- ✅ Layout base renderiza correctamente
- ✅ Tests básicos pasan
- ✅ Deploy en Vercel exitoso
- ✅ README con instrucciones de setup claras

1. Dependencias

- Cuenta de Supabase creada
- Cuenta de Vercel creada
- Repositorio Git inicializado

1. Estimación

Horas: 8-13h

1. Notas Técnicas

- Usar App Router de Next.js 14 (no Pages Router)
- TypeScript strict mode habilitado
- Seguir las mejores prácticas de Next.js y Supabase
- Documentar todas las configuraciones con JSDoc

1. Referencias

- [Next.js Documentation](https://nextjs.org/docs)
- [Supabase Next.js Guide](https://supabase.com/docs/guides/getting-started/quickstarts/nextjs)
- [PWA con Next.js](https://github.com/shadowwalker/next-pwa)