Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Jason-AML/MonzaSport-Nextjs/llms.txt

Use this file to discover all available pages before exploring further.

Monza Motors uses Supabase for three core concerns: authentication (sign-up, login, and session management via @supabase/ssr), the vehicle database (the vehiculos and fabricas tables queried throughout the collection and detail pages), and real-time AI chat messaging (the messages table, which streams assistant replies to the browser). You’ll need to create four tables and configure Row-Level Security before the app works end-to-end.

​
Create a Supabase project

1

Create a new project

Go to supabase.com, sign in, and click New project from your organization dashboard. Give the project a name (e.g., monza-motors), set a strong database password, and save it somewhere safe — you’ll need it if you ever connect directly via psql.
2

Choose a region

Select the region closest to the majority of your users to minimize database query latency. For a globally distributed user base, choose a central region such as us-east-1 (N. Virginia) or eu-west-1 (Ireland).
3

Note your project URL and API keys

Once the project has finished provisioning, navigate to Settings → API. You’ll find the values you need here — keep this tab open while you configure your environment variables.

​
Required tables

All four tables below should be created using the SQL Editor in the Supabase dashboard (Database → SQL Editor → New query). Run each block independently so you can catch and fix errors one step at a time.
1

Create the fabricas table

The fabricas (factories/manufacturers) table stores information about each vehicle manufacturer and their production plant. Each vehicle in the vehiculos table references a row here via fabrica_id.
create table fabricas (
  id uuid primary key default gen_random_uuid(),
  fabricante text not null,
  nombre_planta text,
  ciudad text,
  pais text
);
2

Create the vehiculos table

The vehiculos (vehicles) table is the heart of the Monza Motors catalogue. It stores all technical specifications, pricing, and media URLs. The collectionClient.js service queries this table for the collection grid, year-based filters, and individual vehicle detail pages.
create table vehiculos (
  id uuid primary key default gen_random_uuid(),
  nombre_vehiculo text not null,
  modelo text,
  anio integer,
  precio integer,
  motor text,
  poder_hp integer,
  aceleracion_0_100 numeric,
  velocidad_maxima integer,
  torque_nm integer,
  peso_kg integer,
  url_img text,
  description text,
  fabrica_id uuid references fabricas(id)
);
3

Create the stored table

The stored table holds additional media URLs (e.g., gallery images or videos) linked to a specific vehicle. The detail page query joins this table via stored(*) when fetching a vehicle by ID.
create table stored (
  id uuid primary key default gen_random_uuid(),
  vehiculo_id uuid references vehiculos(id),
  url text
);
4

Create the messages table

The messages table persists the conversation history for the Groq-powered AI assistant. Each row is tied to an authenticated user and carries a role of either user or assistant, matching the shape expected by the Vercel AI SDK.
create table messages (
  id uuid primary key default gen_random_uuid(),
  user_id uuid references auth.users(id) on delete cascade,
  role text not null check (role in ('user', 'assistant')),
  content text not null,
  created_at timestamptz default now()
);

​
Enable Realtime

The AI chat UI subscribes to new rows in the messages table so that assistant replies appear in the browser without a page refresh. Realtime must be explicitly enabled on this table.
1

Enable Realtime in the dashboard

In the Supabase dashboard, go to Database → Replication. Under Tables, find the messages table and toggle Realtime on.
2

Or enable via SQL

Alternatively, run the following in the SQL Editor to add the table to the supabase_realtime publication directly:
alter publication supabase_realtime add table messages;

​
Row-Level Security policies

Enabling Row-Level Security (RLS) ensures that users can only access the data they’re allowed to see. Run the following SQL block in the SQL Editor to configure all necessary policies across the four tables. 
-- vehiculos: public read
alter table vehiculos enable row level security;
create policy "Public read" on vehiculos for select using (true);

-- fabricas: public read
alter table fabricas enable row level security;
create policy "Public read" on fabricas for select using (true);

-- messages: users can only see and write their own messages
alter table messages enable row level security;
create policy "Users read own messages" on messages
  for select using (auth.uid() = user_id);
create policy "Users insert own messages" on messages
  for insert with check (auth.uid() = user_id);
The AI chat API route uses SUPABASE_SERVICE_ROLE_KEY to initialise its Supabase client, which bypasses RLS entirely. This is intentional — it allows the server-side route to insert assistant messages on behalf of any user without needing to impersonate their session. Never expose SUPABASE_SERVICE_ROLE_KEY to the browser or commit it to source control.

​
Retrieve API keys

Three environment variables must be copied from Supabase into your Vercel project settings (or your local .env.local file).
VariableLocation in Supabase Dashboard
NEXT_PUBLIC_SUPABASE_URLSettings → API → Project URL
NEXT_PUBLIC_SUPABASE_ANON_KEYSettings → API → Project API keys → anon / public
SUPABASE_SERVICE_ROLE_KEYSettings → API → Project API keys → service_role
The SUPABASE_SERVICE_ROLE_KEY grants unrestricted access to your database and bypasses all RLS policies. Only use it in server-side code (API routes and Server Components) and never prefix it with NEXT_PUBLIC_ — doing so would expose it to the browser.

​
Seed sample data

Once the tables and policies are in place, insert at least one manufacturer and one vehicle before testing the UI. The collection page renders an empty grid if vehiculos contains no rows.
Insert a fabricas row first to get its id, then use that id as the fabrica_id when inserting into vehiculos. At minimum, populate nombre_vehiculo, precio, url_img, and fabrica_id to render a complete vehicle card in the collection grid. You can use the Supabase Table Editor for a quick point-and-click insert, or use the SQL Editor for bulk seeding.

Build docs developers (and LLMs) love

Get started for freeTalk to us