Supabase Realtime Playground

Fun & Simple Supabase Realtime Demo.
Realtime Play Button • Realtime Chat.

View Demo · Report Bug · Request Feature

🚀 Features

• 🐤 Twitter Auth
• 🎉 Play around with other user across the internet
• ⌚ Realtime update Cursor and Button Count
• ⛅ Realtime chat

📇 About The Project

TLDR - NextConf Realtime Clone using Supabase Realtime

I was heavily inspired by Next Conf realtime ⌚ functionalities, and take some time on learning how Next implement it. Seems like they are using Replicache to implement the Push/Pull realtime functionalities.

Then I look around the internet and couldn't find any similar example, thus inspired me to take on the challenge, and utilizing Supabase Realtime ⚡ to replicate similar effect.

After long hour of studying and replicating, I'm proud to present this Open Source Supabase Realtime Playground 🔥

⚠️ If you encountered any bugs🐛, please report it so that I can prepare my Bug Spray!

🔨 Built With

• Supabase
• Supabase Realtime
• Vue 3
• Vite
• WindiCSS

Supabase Backend Settings

⚠️ Repliation Settings (IMPORTANT)

Remember to follow Supabase Dashboard Realtime Settings to enable Realtime, as such

Schema

Generated by Supabase Schema

-- Schema
-- user table
create table realtime_user (
  id uuid default uuid_generate_v4() primary key,
  name text,
  x real,
  y real,
  message text,
  online boolean,
  color text,
  mobile boolean,
  last_active timestamp default now()
);

-- chat table
create table realtime_chat (
  id uuid default uuid_generate_v4() primary key,
  name_id uuid references realtime_user on delete cascade,
  created_at timestamp default now(),
  message text
);

-- playbutton table
create table realtime_playbutton (
  name text not null primary key,
  count integer
);


-- RLS
-- enable RLS for user table
alter table public.realtime_user enable row level security;

create policy "Enable access to all users" on public.realtime_user for
select using (true);

create policy "Enable insert for all users" on public.realtime_user for
insert with check (true);

create policy "Enable update for all users" on public.realtime_user for
update using (true) with check (true);


-- enable RLS for chat table
alter table public.realtime_chat enable row level security;

create policy "Enable access to all users" on public.realtime_chat for
select using (true);

create policy "Enable insert for all users" on public.realtime_chat for
insert with check (true);


-- enable RLS for play button table
alter table public.realtime_playbutton enable row level security;

create policy "Enable access to all users" on public.realtime_playbutton for
select using (true);

create policy "Enable update for all users" on public.realtime_playbutton for
update using (true) with check (true);


-- Function
-- CRON job as a fallback when frontend failed to detect user closed app or browser
create extension if not exists pg_cron;
grant usage on schema cron to postgres;
grant all privileges on all tables in schema cron to postgres;

select
  cron.schedule(
    'make-inactive-user-offline',
    '* * * * *', -- every minute
    $$
      update public.realtime_user
        set online = false
        where online = true and now() - INTERVAL '1 min' > last_active
    $$
  );

-- play button increment
create or replace function realtime_playbutton_addon(a text)
returns void as
  $$
  begin
    update public.realtime_playbutton
    set count = count + 1 where name = a;
  end;
  $$
language plpgsql;

🌎 Local Development

Prerequisites

Yarn

• npm install --global yarn

Development

1. Clone the repo

   git clone https://github.com/zernonia/supabase-realtime-playground.git

2. Install NPM packages

   yarn install

3. Run Development instance

   yarn dev

➕ Contributing

This project is just for fun, but if you have any crazy idea for Realtime function, feel free to contribute, or create request for the features. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

🙏 Acknowledgement

1. Next Conf for the inspiration.
2. Replicache for studying how to replicate similar effect

📜 License

Not Associated with Supabase.

Distributed under the MIT License. See LICENSE for more information.

📧 Contact

Zernonia - @zernonia - [email protected]

☕ Support

If you like my work, please buy me a coffee 😳