Realtime Dashboard

Customizable realtime dashboard built with Next.js, Tailwind, react-grid-layout, and Supabase Realtime.

Supabase setup

1. Create a Supabase project and open the SQL editor.
2. Run the SQL below to create the widgets table and enable Realtime.

create extension if not exists "pgcrypto";

create table if not exists public.widgets (
  id uuid primary key default gen_random_uuid(),
  title text not null,
  data jsonb not null default '{}'::jsonb,
  layout jsonb not null default '{"x":0,"y":0,"w":3,"h":3}'::jsonb,
  created_at timestamp with time zone default now()
);

alter table public.widgets enable row level security;

create policy "public read" on public.widgets
for select using (true);

create policy "public write" on public.widgets
for insert with check (true);

create policy "public update" on public.widgets
for update using (true);

alter publication supabase_realtime add table public.widgets;

3. Seed a couple of widgets (optional):

insert into public.widgets (title, data, layout) values
('Weather', '{"temp":72,"unit":"F"}', '{"x":0,"y":0,"w":3,"h":3}'),
('Markets', '{"BTC": -4.8, "ETH": -1.3}', '{"x":3,"y":0,"w":3,"h":3}');

The policies above are open for demo purposes. Tighten them for production.

Environment variables

Create .env.local:

NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

Development

npm install
npm run dev

Open http://localhost:3000.

Deploy to Vercel

1. Push this repo to GitHub.
2. Import it in Vercel.
3. Add the two environment variables above.
4. Deploy.