{"id":22490504,"url":"https://github.com/zernonia/supabase-realtime-playground","last_synced_at":"2025-08-02T22:33:11.945Z","repository":{"id":49301529,"uuid":"376054746","full_name":"zernonia/supabase-realtime-playground","owner":"zernonia","description":null,"archived":true,"fork":false,"pushed_at":"2022-05-04T08:58:20.000Z","size":529,"stargazers_count":43,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-02T05:27:13.526Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zernonia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-11T14:42:02.000Z","updated_at":"2023-01-28T01:06:01.000Z","dependencies_parsed_at":"2022-08-27T04:50:13.245Z","dependency_job_id":null,"html_url":"https://github.com/zernonia/supabase-realtime-playground","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zernonia%2Fsupabase-realtime-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zernonia%2Fsupabase-realtime-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zernonia%2Fsupabase-realtime-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zernonia%2Fsupabase-realtime-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zernonia","download_url":"https://codeload.github.com/zernonia/supabase-realtime-playground/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228501264,"owners_count":17930223,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-06T17:22:16.482Z","updated_at":"2024-12-06T17:25:11.239Z","avatar_url":"https://github.com/zernonia.png","language":"Vue","funding_links":["https://www.buymeacoffee.com/zernonia"],"categories":["Vue"],"sub_categories":[],"readme":"\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/zernonia/supabase-realtime-playground\"\u003e\n    \u003cimg src=\"images/main.svg\" alt=\"Logo\" width=\"80\" height=\"80\"\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003eSupabase Realtime Playground\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    Fun \u0026 Simple \u003cstrong\u003e\u003ca href=\"https://supabase.io/\"\u003eSupabase\u003c/a\u003e Realtime Demo.\u003c/strong\u003e\n    \u003cbr /\u003e\n    Realtime Play Button • Realtime Chat.\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://supabase-realtime-playground.vercel.app/\"\u003eView Demo\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/zernonia/supabase-realtime-playground/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/zernonia/supabase-realtime-playground/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n![Supabase Schema](images/main.png)\n\n## ⚠️ Archived\nThis repo has been archive in favor of the new Multiplayer features that is coming soon on Supabase.\nRead more about it [here](https://supabase.com/blog/2022/04/01/supabase-realtime-with-multiplayer-features)\n\n***\n\n## 🚀 Features\n\n- 🐤 Twitter Auth\n- 🎉 Play around with other user across the internet\n- ⌚ Realtime update Cursor and Button Count\n- ⛅ Realtime chat\n\n## 📇 About The Project\n\n\u003e _TLDR_ - **NextConf Realtime Clone using Supabase Realtime**\n\nI was heavily inspired by [Next Conf](https://nextjs.org/conf#room-9q0s8) realtime ⌚ functionalities, and take some time on learning how Next implement it. Seems like they are using [Replicache](https://doc.replicache.dev/how-it-works) to implement the `Push/Pull` realtime functionalities.\n\nThen I look around the internet and couldn't find any similar example, thus inspired me to take on the challenge, and utilizing [Supabase Realtime ⚡](https://supabase.io/docs/reference/javascript/subscribe) to replicate similar effect.\n\nAfter long hour of studying and replicating, I'm proud to present this **Open Source Supabase Realtime Playground** 🔥\n\n\u003e ⚠️ If you encountered any bugs🐛, please report it so that I can prepare my Bug Spray!\n\n### 🔨 Built With\n\n- [Supabase](https://supabase.io/)\n- [Supabase Realtime](https://supabase.io/docs/reference/javascript/subscribe)\n- [Vue 3](https://v3.vuejs.org/)\n- [Vite](https://vitejs.dev/)\n- [WindiCSS](https://windicss.org/)\n\n## Supabase Backend Settings\n\n### :warning: Repliation Settings (IMPORTANT)\n\nRemember to follow [Supabase Dashboard Realtime Settings](https://supabase.io/docs/guides/api#managing-realtime) to enable **Realtime**, as such\n\n![Supabase Realtime](images/realtime_main.png)\n![Supabase Realtime 2](images/realtime.png)\n\n### Schema\n\n![Supabase Schema - generated from Supabase Schema](images/schema.png)\n\n\u003e Generated by [Supabase Schema](https://supabase-schema.vercel.app/)\n\n```sql\n-- Schema\n-- user table\ncreate table realtime_user (\n  id uuid default uuid_generate_v4() primary key,\n  name text,\n  x real,\n  y real,\n  message text,\n  online boolean,\n  color text,\n  mobile boolean,\n  last_active timestamp default now()\n);\n\n-- chat table\ncreate table realtime_chat (\n  id uuid default uuid_generate_v4() primary key,\n  name_id uuid references realtime_user on delete cascade,\n  created_at timestamp default now(),\n  message text\n);\n\n-- playbutton table\ncreate table realtime_playbutton (\n  name text not null primary key,\n  count integer\n);\n\n\n-- RLS\n-- enable RLS for user table\nalter table public.realtime_user enable row level security;\n\ncreate policy \"Enable access to all users\" on public.realtime_user for\nselect using (true);\n\ncreate policy \"Enable insert for all users\" on public.realtime_user for\ninsert with check (true);\n\ncreate policy \"Enable update for all users\" on public.realtime_user for\nupdate using (true) with check (true);\n\n\n-- enable RLS for chat table\nalter table public.realtime_chat enable row level security;\n\ncreate policy \"Enable access to all users\" on public.realtime_chat for\nselect using (true);\n\ncreate policy \"Enable insert for all users\" on public.realtime_chat for\ninsert with check (true);\n\n\n-- enable RLS for play button table\nalter table public.realtime_playbutton enable row level security;\n\ncreate policy \"Enable access to all users\" on public.realtime_playbutton for\nselect using (true);\n\ncreate policy \"Enable update for all users\" on public.realtime_playbutton for\nupdate using (true) with check (true);\n\n\n-- Function\n-- CRON job as a fallback when frontend failed to detect user closed app or browser\ncreate extension if not exists pg_cron;\ngrant usage on schema cron to postgres;\ngrant all privileges on all tables in schema cron to postgres;\n\nselect\n  cron.schedule(\n    'make-inactive-user-offline',\n    '* * * * *', -- every minute\n    $$\n      update public.realtime_user\n        set online = false\n        where online = true and now() - INTERVAL '1 min' \u003e last_active\n    $$\n  );\n\n-- play button increment\ncreate or replace function realtime_playbutton_addon(a text)\nreturns void as\n  $$\n  begin\n    update public.realtime_playbutton\n    set count = count + 1 where name = a;\n  end;\n  $$\nlanguage plpgsql;\n\n\n```\n\n## 🌎 Local Development\n\n### Prerequisites\n\nYarn\n\n- ```sh\n  npm install --global yarn\n  ```\n\n### Development\n\n1. Clone the repo\n   ```sh\n   git clone https://github.com/zernonia/supabase-realtime-playground.git\n   ```\n2. Install NPM packages\n   ```sh\n   yarn install\n   ```\n3. Run Development instance\n   ```sh\n   yarn dev\n   ```\n\n## ➕ Contributing\n\nThis 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**.\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 🙏 Acknowledgement\n\n1. [Next Conf](https://nextjs.org/conf) for the inspiration.\n2. [Replicache](https://doc.replicache.dev/how-it-works) for studying how to replicate similar effect\n\n## 📜 License\n\nNot Associated with Supabase.\n\nDistributed under the MIT License. See `LICENSE` for more information.\n\n## 📧 Contact\n\nZernonia - [@zernonia](https://twitter.com/zernonia) - zernonia@gmail.com\n\n## ☕ Support\n\nIf you like my work, please buy me a coffee 😳\n\n[![\"Buy Me A Coffee\"](https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png)](https://www.buymeacoffee.com/zernonia)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzernonia%2Fsupabase-realtime-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzernonia%2Fsupabase-realtime-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzernonia%2Fsupabase-realtime-playground/lists"}