PourParler
A lot of apps are built with a free tier and paid tier or subscription model but sometimes, even the paid tier is not enough. For example, when dealing with video streaming, the bandwidth and processing power required is quite high so most companies will limit bitrate and framerate which results in a poor video quality that is far from what we should get in modern days.
Let’s take an example. Twitch is a popular platform to broadcast live video. This is the website entire purpose and still, they have a limit of 6.000 kbps and 60 fps. Macbook Pros have 120hz screens, a lot of phones releases with 90hz screens, most gaming monitors have even higher refresh rates. I personnally use a 280hz monitor. Being limited to 60 frames a second is rough and should not be the norm in 2024.
Me and my friends uses Discord to share our screens, so we can watch each other playing, but even with a paid plan, the limit is still really low. So I decided to build my own communication platform. Not only would it helps with video quality, but also privacy, integration with other services, and more. Users also do not have caps as they would on any service.
This was also a good opportunity to build a NextJS 15 App, learn React 19, TailwindCSS, and WebRTC.
Main Goals
- High framerate video streaming
- High bitrate video streaming
- Users can send/delete/edit messages
- Markdown rendering
- Users can login using their Discord account
Authentication
I decided to try Clerk to handle authentication. Clerk gives access to a lot of oauth providers and have a lot of React components to manage user authentication. I wanted oauth providers so people could just login with their Discord Account and I would not need to manage image uploads and other things I didn’t want to deal with for now.
I also wanted to use Discord OAuth to keep the users “anonymous”. The only thing I need is an ID, a username, and a profile picture. I didn’t want to get any mail address or other personal information from the user. This is why I stopped using Clerk. The discord provider they use requires two different scopes. The first one is the “identify” scope which gives perms to access user data. The second one is the “email” scope which adds the user’s email address to the user data on the /me endpoint.
This scope is optional and Clerk using it makes the whole provider pointless for my use case. You could write a custom flow for Clerk but at this point, you’re better off rolling your own auth. Which is made really easy with Lucia.
The Issue with the App Router
Using NextJS for this project was actually a terrible idea. The App Router works by prerendering pages on the server so it can be served faster to the client. This is great for SEO and performance when pages can be mostly static but this system falls apart when you need to build a SPA. Since every page is served, it means every route change will trigger a page load. Using Next preloading feature, you can preload every channel page so the delay for the switch is minimal but it can still be noticeable. The solution is to use a client side router. Content should be dynamic, but routes should be static or pseudo static. Even a dynamic route should be able to be generated by the client using content. In a SPA, most of the app context is stored and kept between route changes. Before fully migrating to React-Router, I will try to change Link components to only push the route to the history.
What’s next ?
So for now, things I got done:
- Authentication
- Markdown rendering
- Channel Creation
- Messages (Sending, Editing, Deleting)
- Websockets (for realtime updates)
I still need to do:
- Channels (Editing, Deleting)
- Voice Channels
- Video Streaming
- Image Uploading
- Custom Emojis