# ClassBoard

**Tu espacio digital para crear, diseñar y compartir.**

ClassBoard es una pizarra digital colaborativa para crear diagramas, dibujar y organizar ideas, con guardado en la nube y (en fases futuras) colaboración en tiempo real.

> Estado actual: **FASE 1 — Base del proyecto**. Aún no hay autenticación, base de datos ni CRUD funcionales.

## Stack

- **Frontend:** React + Vite, Tailwind CSS, React Router, [tldraw](https://tldraw.dev/), [Remix Icon](https://remixicon.com/) vía `@remixicon/react`.
- **Backend:** Supabase (Auth, PostgreSQL, Storage, Realtime, Row Level Security).

## Estructura del repositorio

```text
classboard/
├── frontend/          # Aplicación React + Vite
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── services/
│   │   ├── hooks/
│   │   ├── context/
│   │   ├── lib/
│   │   └── utils/
│   ├── public/
│   └── .env.example
├── supabase/
│   ├── migrations/
│   ├── schema.sql
│   └── seed.sql
└── README.md
```

## Requisitos

- Node.js 18+ y npm.
- Una cuenta y proyecto en [Supabase](https://supabase.com/) (se configurará a partir de la Fase 2).

## Instalación

```bash
cd frontend
npm install
```

## Variables de entorno

Copia `frontend/.env.example` a `frontend/.env` y completa con los datos de tu proyecto de Supabase (Project Settings → API):

```env
VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=
```

Nunca uses la `service_role key` en el frontend.

## Ejecutar en desarrollo

```bash
cd frontend
npm run dev
```

La app quedará disponible en `http://localhost:5173`.

## Rutas actuales

| Ruta | Descripción |
| --- | --- |
| `/` | Redirige a `/dashboard` |
| `/login` | Placeholder de inicio de sesión (Fase 2) |
| `/register` | Placeholder de registro (Fase 2) |
| `/dashboard` | Placeholder del panel de proyectos (Fase 4) |
| `/projects/:id` | Editor con tldraw funcionando (persistencia en Fase 6) |
| `/profile` | Placeholder de perfil |
| `/settings` | Placeholder de configuración |
| `/shared/:id` | Placeholder de proyecto compartido |

## Roadmap por fases

1. **Base del proyecto** ✅ (actual)
2. Supabase y autenticación
3. Base de datos y RLS
4. Dashboard y CRUD de proyectos
5. Editor tldraw (herramientas y toolbar)
6. Persistencia y autosave
7. Storage (avatares, imágenes, miniaturas)
8. Compartir proyectos y permisos
9. Historial de versiones
10. Colaboración en tiempo real
11. Exportación (PNG, SVG, PDF)
12. Calidad final (responsive, accesibilidad, rendimiento)
