DEV Community

loading...
Cover image for NextConf Clone (Supabase Realtime) - Introduction

NextConf Clone (Supabase Realtime) - Introduction

Zernonia
VueJS ๐Ÿ’š + IndieHacker
ใƒป2 min read

Next Conf Realtime Playground

Have you seen the awesome Realtime Playground for Next Conf? I believe most of you did. I thought this is just a fun playground for React/Next Dev to play around when they are claiming their tickets, but it turns out to be something much BIGGER! โš  Risk of jaw dropping

Then, the Frontend Dev in me started to wonder how they implement such features. I Right Click -> Inspect and started to dig and study how the magic works.


Realtime sync (Replicache)

It turns out their magic is backed by the Backstage assistant, Replicache. Replicache makes it easy to add realtime collaboration, lag-free UI, and offline support to web apps. Most importantly, it works with any backend stack ๐Ÿคฏ.

If you are planning to add Realtime Collaboration into your project/products, be sure to check it out


Too Complicated?

But, if you find it too complicated ๐Ÿ˜ซ and involves too many steps just to add Realtime Collaboration into your project, then the following guide and series will definitely help you.

We won't dig too deep into Replicache, but trying to replicate similar features by using Supabaseโšก

Be sure to Bookmark๐Ÿ”– and follow my steps in this Series


Preview

If you are intrigued and want to know where this series will bring you to, you check it out Here

Supabase Realtime NextConf Clone

OR

If you just wanna read codes and ignore the rest of the post, no worry, here's the Github Repo


Logo

Supabase Realtime NextConf Clone

Fun & Simple Supabase Realtime NextConf Clone.
Realtime Play Button โ€ข Realtime Chat

View Demo ยท Report Bug ยท Request Feature

Supabase Schema

๐Ÿš€ Features

  • ๐ŸŽ‰ 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 NextConf Clone Playground ๐Ÿ”ฅ

โš ๏ธ If you encountered any bugs๐Ÿ›, please report itโ€ฆ


Ready โ“

In the next post, I will start sharing about How Supabase Realtime can achieve this features, Why I decided to use Supabase, and etc.

Feel free to follow my Twitter:
@zernonia

Discussion (0)