First Look at the No-Code Overlays Web App

#nocodeoverlays #justfingshipit #womenmakechallenge

Guess what I did today? I planned the features for the MVP, set up a Next.js app and its GitHub repository, and I merged the first PR for the No-Code Overlays Web App! If you'd like to read all of the details in the PR, you can do so here, but I'll give you a quick run down.

So, when you arrive at the app, you need to log in with an email and password. Having a login keeps everyone's information separate and private. I don't want anyone to be able to edit my streaming overlay, and no one wants me to edit theirs either! Here's a preview of that page:

To put all of this together, I added a couple of pages to the app, installed the Firebase npm package, set up a new Firebase project, added a test user for logging in, and set up some functions for interacting with Firebase auth in this API file. This part was a little tedious, but pretty straightforward!

The last step was to handle redirects to the login page when a page that requires a logged in user is trying to be reached. Next's router makes it very easy to redirect, so the hardest part was checking with Firebase for a logged in user. In the API file I mentioned, I wrote a function for getting the current user. If there's no current user, then there's a redirect to the login page.

I'm thinking about writing a blog post on this for my personal site, but no promises. This project has me pretty busy at the moment! Stay tuned for the next update! :)

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →