Well, not exactly the same. A trimmed-down version of it and its functionalities.
What is Nextjs Conf 2021?
Nextjs Conf is an annual event hosted by the awesome team at Vercel for their React framework called Nextjs. They started this last year (2020) and what I particularly like about it is that they use their own technology to successfully host this event for tens of thousands of people to participate live.
What an awesome way to show how stable your technology ecosystem is, right?
I like this. Today I stumbled upon a link to their conference registration page for this year and they made me fall in love with their team :)
They managed to stay creative despite all the work they have to do to develop and maintain their products.
The goal is to primarily practice my TypeScript and Nextjs skills. As they are technologies I'm currently interested in.
It's also a way for me to test the stability of the shiny new feature/tech of StackBlitz: WebContainers.
What are WebContainers?
I won't go into details about what a WebContainer is because Eric Simons already wrote a succinct article about it. I will just be testing its capabilities in StackBlitz for this challenge... yeah, I call it a challenge.
A self-imposed one XD
Whoa, is that all?
If you're reading this article very early after I publish it, you will probably notice how short it is. Thing is, as I'm writing this, I haven't even started working on this challenge.
I'm currently experimenting with something I just nicknamed live writing.
Okay, I just Googled it, it's not a new term, and it seems like other people have already done it. I'm not a tad bit surprised.
I will be writing what I will do next, and sometimes, what I've done.
I will also share code, screenshots, and links. You will have a taste of my mental process when working with new tech and (maybe) be able to see my writing pre-editing.
Since it's my first time doing it, I'm a little bit shy, I won't announce it anywhere. If you're visiting my website while I do this experiment, lucky you ;)
So, here we go.
What does it do?
When I got to the event registration page, the very first thing that grabbed my attention was that multiple cursors were moving around on the screen frantically without my input.
Didn't take too long for me to realize those were other people's cursors. For some users, you can see their GitHub profile image.
It allows users who are logged in with GitHub to send a temporary message to everyone else by pressing the slash key "/".
Oh, and I almost forgot, it also displays the amount of users online and the amount of people in the same room as you. I don't quite yet understand what the room means here.
Not what I expected from an event registration page. So my excitement for StackBlitz and this page functionalities got me to write this article.
Of course, there's more to the page:
- Minimum info about the event
- A registration form
- Minimum details about presenters
- Event ticket previewing
- The ability to log in with your GitHub account so you can customize your ticket
It's a pretty minimal page. But I don't need most of the functionalities above.
I want to reproduce the live cursor functionality along with the ability to send a temporary message. I'll also display the amount of users currently online.
I might even add a way to display your GitHub profile image.
Steps to Achieve it
So here's what I will do to get this done:
- Start a new Nextjs project on StackBlitz
- Design a minimal screen with Tailwindcss
- Setup Socket.io on both the front-end and back-end (Will use Nextjs for both)
- Live cursors functionality
- Temporary message with "/" command
- Online users
- (Optional) GitHub authentication
It's all live data, so I won't use any form of storage... well, except for variables. XD
Let's do this!
Start a new Nextjs project on StackBlitz
Man, oh man. StackBlitz is living up to its name as a company.
Their platform is so fast!