Guía de configuración — Grupo Inversa Particulares

1

Crear cuenta gratuita en Supabase

Abrí supabase.com y hacé clic en "Start your project".
Podés registrarte con tu cuenta de GitHub o con email y contraseña.

El plan gratuito incluye base de datos, almacenamiento de fotos (1 GB) y API REST automática. No piden tarjeta de crédito.

2

Crear un nuevo proyecto

Una vez que estés en tu panel de Supabase:

Hacé clic en "New project"
Name: escribí algo como grupo-inversa-particulares
Database Password: elegí una contraseña (guardala, la vas a necesitar si querés conectar herramientas externas)
Region: seleccioná South America (São Paulo) — es el servidor más cercano a San Juan
Hacé clic en "Create new project"

Supabase tarda entre 30 y 60 segundos en preparar el proyecto. Esperá a que aparezca el panel principal.

3

Crear la tabla de avisos

Usamos el SQL Editor para crear la tabla con un solo copy/paste:

Código a pegar:

-- Tabla de avisos
create table public.listings (
  id          uuid        default gen_random_uuid() primary key,
  nombre      text        not null,
  telefono    text        not null,
  categoria   text        not null,
  operacion   text        not null,
  titulo      text        not null,
  precio      text,
  moneda      text        default 'ARS',
  zona        text        not null,
  descripcion text        not null,
  fotos       text[]      default '{}',
  status      text        default 'pendiente',
  created_at  timestamptz default now()
);

-- Seguridad: habilitar Row Level Security
alter table public.listings enable row level security;

-- Cualquiera puede VER los avisos que vos aprobaste
create policy "ver_aprobados"
  on public.listings for select
  using ( status = 'aprobado' );

-- Cualquiera puede ENVIAR un aviso nuevo (queda pendiente hasta que vos lo aprobés)
create policy "insertar_aviso"
  on public.listings for insert
  with check ( true );

-- Índices para que las búsquedas sean rápidas
create index on public.listings (status);
create index on public.listings (categoria);
create index on public.listings (created_at desc);

Después de hacer clic en "Run", abajo debería aparecer el mensaje:

Success. No rows returned

Eso significa que todo salió bien.

También podés abrir el archivo supabase-setup.sql que está en la carpeta del proyecto y copiar su contenido — es el mismo código.

4

Crear el almacenamiento de fotos (Storage)

Parte A — Crear el bucket:

Name: escribí exactamente listing-photos (sin mayúsculas, con guión)
Activá el interruptor "Public bucket" (para que las fotos se puedan ver en el sitio)
Hacé clic en "Create bucket"

Parte B — Permitir que los usuarios suban fotos:

Buscá la sección "OBJECTS" (no "Buckets")
Hacé clic en "Add policies"
En la pantalla que aparece, elegí "For full customization"
Completá los campos:
- Policy name: upload_publico
- Allowed operation: tildá INSERT
- Policy definition (USING expression): escribí true
Hacé clic en "Review" y luego en "Save policy"

Importante: el nombre del bucket debe ser exactamente listing-photos (con guión, sin espacios, todo en minúsculas). Si lo escribís diferente, las fotos no se van a subir.

La política true en INSERT permite que cualquier visitante suba fotos. Esto está bien porque cada foto queda ligada a un aviso pendiente que vos revisás antes de publicar.

5

Conectar el sitio con tu proyecto

Necesitás copiar dos valores de Supabase y pegarlos en el index.html.

¿Dónde encontrar esos valores?

Project URL — algo como https://abcdefgh.supabase.co
anon public — en la sección "Project API keys", una clave larga que empieza con eyJ...

¿Dónde pegarlos?

Abrí el archivo index.html con cualquier editor de texto (Bloc de Notas, Notepad++, VS Code, etc.) y buscá estas dos líneas al final del archivo (dentro del bloque <script>):

const SUPABASE_URL      = 'TU_SUPABASE_URL';
const SUPABASE_ANON_KEY = 'TU_SUPABASE_ANON_KEY';

Reemplazá los textos entre comillas con tus valores. Por ejemplo:

const SUPABASE_URL      = 'https://abcdefghij.supabase.co';
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...';

Guardá el archivo. Listo.

La clave anon (pública) está pensada para usarla en el navegador — podés incluirla en el HTML sin problema. Nunca uses la clave service_role en el front-end: esa clave tiene acceso total y debe quedar solo en servidores privados.

✓

¿Cómo aprobás los avisos que llegan?

Cada vez que alguien publica en tu sitio:

Te llega un mensaje por WhatsApp con los datos del aviso (nombre, teléfono, tipo, zona, descripción).
Entrás a supabase.com/dashboard → tu proyecto →
Table Editor → tabla listings
Ves el aviso nuevo con status = pendiente.
Hacés clic en la celda status de ese aviso, escribís aprobado y presionás Enter.
Hacés clic en el botón "Save changes" (aparece arriba de la tabla).

Al instante ese aviso aparece en el sitio con su tarjeta, fotos y botón de WhatsApp directo al publicante.

Más adelante podemos agregar un panel de moderación dentro del mismo sitio para aprobar avisos con un clic, sin tener que entrar a Supabase.

Resumen rápido — checklist

☐ Cuenta creada en supabase.com
☐ Proyecto nuevo creado (región São Paulo)
☐ SQL ejecutado en SQL Editor → "Success. No rows returned"
☐ Bucket listing-photos creado como público
☐ Política upload_publico creada (Storage → Policies → OBJECTS → INSERT)
☐ SUPABASE_URL y SUPABASE_ANON_KEY pegados en el index.html

Guía de configuración — Supabase

Crear cuenta gratuita en Supabase

Crear un nuevo proyecto

Crear la tabla de avisos

Crear el almacenamiento de fotos (Storage)

Conectar el sitio con tu proyecto

¿Cómo aprobás los avisos que llegan?

Resumen rápido — checklist

¡Todo listo para funcionar!