Instalación y Estructura Base del Frontend (React + Vite + TypeScript + MUI)
=============================================================================

Objetivo
--------
Dejar creado el proyecto `frontend/listin` con una estructura limpia por capas:
- `app`: arranque global (router, providers, tema).
- `core`: servicios transversales (api, config, utilidades).
- `features`: módulos funcionales por dominio.
- `shared`: componentes reutilizables.

Ejecuta todo desde `frontend/`, salvo cuando se indique lo contrario.

0) Prerrequisitos (Node con NVM)
--------------------------------
Si no tienes NVM:

```bash
sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
```

Cierra y abre la terminal. Luego:

```bash
nvm install 22
nvm use 22
node -v
npm -v
```

1) Crear proyecto base con Vite
-------------------------------
Desde `frontend/`:

```bash
npm create vite@latest listin -- --template react-ts
cd listin
npm install
```

2) Instalar dependencias del stack
----------------------------------
UI:

```bash
npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
```

Navegación + API:

```bash
npm install react-router-dom axios
```

Estado remoto + formularios (recomendado):

```bash
npm install @tanstack/react-query @tanstack/react-query-devtools
npm install react-hook-form zod @hookform/resolvers
```

Seguridad y hashing (para caso MD5 + sanitización):

```bash
npm install crypto-js dompurify
npm install -D @types/crypto-js @types/dompurify
```

Notas rápidas:
- Usa MD5 solo para compatibilidad o huellas/checksum, no para contraseñas.
- Para lógica sensible de seguridad, prioriza SHA-256/512 (Web Crypto) y validación en backend.
- `dompurify` es útil si vas a renderizar HTML dinámico (evitar XSS).

2.1) Configurar variables de entorno (`.env`)
---------------------------------------------
En Vite las variables accesibles desde frontend deben empezar por `VITE_`.

Dentro de `frontend/listin`:

```bash
cp .env.example .env.local
```

Variables base recomendadas:

```env
VITE_APP_NAME=Listin Frontend
VITE_API_BASE_URL=http://localhost:8000
VITE_API_TIMEOUT_MS=10000
VITE_AUTH_TOKEN_STORAGE_KEY=listin_token
VITE_ENABLE_MD5=true
```

Notas:
- Usa `.env.local` para valores de tu entorno y no versionarlo.
- Mantén `.env.example` como plantilla compartida para el equipo.
- Para leer variables en código usa `src/core/config/env.ts` (no uses `import.meta.env` repartido por toda la app).

3) Reorganizar `src` con arquitectura base
------------------------------------------
Dentro de `frontend/listin`:

```bash
rm -f src/App.tsx src/App.css src/index.css
mkdir -p src/app/providers src/app/router src/app/styles
mkdir -p src/core/api src/core/config src/core/utils
mkdir -p src/features/auth/{api,components,hooks,pages,types}
mkdir -p src/features/dashboard/{api,components,hooks,pages,types}
mkdir -p src/shared/components src/shared/layouts src/shared/types src/shared/constants
touch src/app/router/index.tsx
touch src/app/providers/index.tsx
touch src/app/styles/theme.ts
touch src/core/api/http.ts
touch src/core/config/env.ts
touch src/features/auth/pages/LoginPage.tsx
touch src/features/dashboard/pages/DashboardPage.tsx
touch src/shared/layouts/AppLayout.tsx
touch src/shared/components/PageLoader.tsx
```

4) Punto de entrada mínimo recomendado
--------------------------------------
Actualiza `src/main.tsx` para arrancar con Providers y Router:

```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { CssBaseline, ThemeProvider } from '@mui/material';
import { BrowserRouter } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { theme } from './app/styles/theme';
import { AppRouter } from './app/router';

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <BrowserRouter>
          <AppRouter />
        </BrowserRouter>
      </ThemeProvider>
    </QueryClientProvider>
  </React.StrictMode>
);
```

5) Verificar que arranca
------------------------

```bash
npm run dev
```

Si todo está correcto, Vite mostrará la URL local (normalmente `http://localhost:5173`).

6) Configurar VSCode si usas la raiz del monorepo (`listin`)
-------------------------------------------------------------
Si abres VSCode en la raiz `listin` (para trabajar frontend + backend), configura
TypeScript para que use el SDK local del frontend y evitar errores falsos.

Crea `listin/.vscode/settings.json` con:

```json
{
  "typescript.tsdk": "frontend/listin/node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "eslint.workingDirectories": [
    { "directory": "frontend/listin", "changeProcessCWD": true }
  ]
}
```

Despues en VSCode:
1. `TypeScript: Restart TS Server`
2. `Developer: Reload Window`

Notas
-----
- Si `frontend/listin` ya existe y tiene contenido, no vuelvas a ejecutar `npm create vite...`.
- En ese caso, instala dependencias faltantes y aplica solo la parte de estructura (`src`).
- Si debes enviar un hash al backend, confirma primero el algoritmo requerido por contrato (MD5, SHA-256, etc.).
- Si VSCode sigue marcando errores de TS, confirma:
  - `frontend/listin/node_modules/typescript/lib/tsserver.js` existe.
  - `node -v` devuelve Node 22 en la terminal integrada.
