Cómo construir un tablero de control de ventas en tiempo real con React y Supabase para tu pyme

¿Alguna vez has terminado un día agotador en tu negocio y te has puesto a adivinar cómo te fue en ventas? En el mundo acelerado del emprendimiento en Colombia, tomar decisiones basadas en suposiciones es como manejar por la Troncal del Magdalena con los ojos vendados. Saber cuánto vendiste, qué producto es el que más vuela del estante y en qué sucursal estás teniendo mejores resultados, todo en tiempo real, es un superpoder.

En esta guía técnica, vamos a construir un tablero de control (o dashboard) de ventas en tiempo real. Usaremos React, una de las tecnologías web más populares, y Supabase, una alternativa de código abierto a Firebase que está pisando fuerte gracias a su robustez y a que funciona sobre PostgreSQL. ¡Ponte el sombrero de desarrollador que empezamos!

¿Por qué un tablero en tiempo real y por qué Supabase?

Un tablero estático que actualizas a mano cada noche en Excel ya no es suficiente. Si tienes una tienda física y una online, o varias cajas registradoras, necesitas que los datos fluyan. React nos permite crear interfaces rápidas y dinámicas, mientras que Supabase nos ofrece una base de datos relacional con "suscripciones en tiempo real", lo que significa que cada vez que se registre una venta, tu pantalla se actualizará solita, sin tener que refrescar el navegador.

Paso 1: Configurar tu base de datos en Supabase

Lo primero es ir a supabase.com, crear una cuenta gratuita y generar un nuevo proyecto. Una vez dentro, ve a la sección "SQL Editor" y corre este código para crear una tabla sencilla de ventas:

CREATE TABLE ventas (
  id SERIAL PRIMARY KEY,
  producto TEXT NOT NULL,
  monto NUMERIC(10,2) NOT NULL,
  sucursal TEXT NOT NULL,
  fecha TIMESTAMP DEFAULT NOW()
);

Luego, ve a la sección de "Project Settings" > "API". Necesitarás copiar dos datos clave: la URL del proyecto y la anon key (clave pública). Guárdalas en un lugar seguro, las usaremos en un momento.

Paso 2: Inicializar el proyecto en React

Abre tu terminal (o línea de comandos). Vamos a usar Vite, una herramienta rapidísima para crear proyectos web modernos. Escribe lo siguiente:

npm create vite@latest mi-dashboard -- --template react
cd mi-dashboard
npm install
npm install @supabase/supabase-js

El último comando instala el cliente oficial de Supabase para JavaScript. Ahora, abre el proyecto en tu editor de código favorito (como VS Code).

Paso 3: Conectar React con Supabase

Crea un archivo llamado supabaseClient.js en la carpeta src. Aquí configuraremos la conexión con nuestra base de datos:

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

const supabaseUrl = 'https://TU-URL.supabase.co';
const supabaseKey = 'TU-ANON-KEY';

export const supabase = createClient(supabaseUrl, supabaseKey);

Asegúrate de reemplazar TU-URL y TU-ANON-KEY con los datos que copiaste en el Paso 1.

Paso 4: Escuchar y mostrar ventas en tiempo real

Ahora viene la magia. Vamos a editar el archivo src/App.jsx. Borramos todo y escribimos un componente que cargue las ventas existentes y se quede "escuchando" si hay nuevas inserciones en la base de datos:

import { useState, useEffect } from 'react';
import { supabase } from './supabaseClient';

function App() {
  const [ventas, setVentas] = useState([]);

  useEffect(() => {
    // 1. Cargar las ventas iniciales
    async function cargarVentas() {
      const { data } = await supabase
        .from('ventas')
        .select('*')
        .order('fecha', { ascending: false });
      setVentas(data || []);
    }
    cargarVentas();

    // 2. Suscribirse a cambios en tiempo real
    const channel = supabase
      .channel('custom-all-channel')
      .on('postgres_changes', 
        { event: 'INSERT', schema: 'public', table: 'ventas' }, 
        payload => {
          setVentas([payload.new, ...ventas]);
        }
      )
      .subscribe();

    // 3. Limpiar la suscripción al desmontar el componente
    return () => {
      supabase.removeChannel(channel);
    };
  }, [ventas]);

  const totalVentas = ventas.reduce((acc, v) => acc + parseFloat(v.monto), 0);

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial' }}>
      <h1>Tablero de Ventas en Tiempo Real</h1>
      <h2>Total: ${totalVentas.toFixed(2)}</h2>
      <ul>
        {ventas.map(venta => (
          <li key={venta.id}>
            <strong>{venta.producto}</strong> - ${venta.monto} 
            (Sucursal: {venta.sucursal})
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Para ver tu trabajo, ve a la terminal y ejecuta npm run dev. Abre el navegador en la dirección que te muestra (normalmente http://localhost:5173). Si insertas un dato directamente en Supabase, verás cómo aparece en tu pantalla instantáneamente. ¡Es como magia!

Consejos prácticos para pymes en Colombia

Seguridad ante todo (Row Level Security): En Supabase, por defecto, las tablas están bloqueadas para acceso externo. Tienes que ir a "Authentication" > "Policies" y crear reglas. Si tu dashboard es solo para uso interno, puedes permitir lectura a usuarios autenticados. No dejes tu base de datos expuesta a cualquiera.
Despliegue gratuito: Puedes subir este pequeño dashboard a plataformas como Vercel o Netlify de forma gratuita. Así, podrás abrir el link desde tu celular en cualquier parte de Bogotá, Medellín o donde estés, y ver tus números al instante.
Integración con tu POS: El siguiente paso lógico es hacer que tu punto de venta (POS) actual envíe los datos a esta tabla de Supabase cada vez que se cierre una transacción. Esto lo puedes hacer con un pequeño script en Python o Node.js conectado a tu sistema actual.

Conclusión

Tener visibilidad de tu negocio en tiempo real deja de ser un lujo de las grandes corporaciones para convertirse en una necesidad para las pymes colombianas. Con herramientas como React y Supabase, construir soluciones potentes es más accesible que nunca. Este tablero básico es solo el principio; a partir de aquí puedes agregar gráficas, filtros por fechas y alertas de inventario.

Sin embargo, sabemos que entre atender a los clientes, gestionar proveedores y llevar la contabilidad, el tiempo es escaso. Si quieres implementar un tablero de control profesional, integrado con tu facturación electrónica y tu inventario, pero no tienes el tiempo para codearlo tú mismo, en Camilincanins Company estamos listos para ayudarte. Escríbenos y construyamos juntos el software a medida que tu negocio necesita para escalar.