Paso 2.4 - Dashboard Frontend (React + TypeScript)

Paso a paso

1. Crear el proyecto con Vite:

   npm create vite@latest frontend -- --template react-ts
   cd frontend
   npm install

2. Instalar Tailwind:

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p

   En tailwind.config.js agrega: ./index.html y ./src/**/*.{ts,tsx}.

   En src/index.css agrega:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

3. Instalar Supabase JS:

   npm install @supabase/supabase-js

4. Configurar variables de entorno en .env:

   VITE_SUPABASE_URL=your_supabase_url
   VITE_SUPABASE_ANON_KEY=your_anon_key

5. Crear un cliente Supabase y cargar tickets:
   • Usa select para listar tickets.
   • Escucha cambios con Realtime (canal en la tabla tickets).
6. Mostrar cards o una tabla con: description, category, sentiment, processed.
7. Desplegar en Vercel o Netlify.

Snippet base (Supabase client)

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

Volver al indice