DEV Community

loading...
Cover image for First Look at the No-Code Overlays Web App

First Look at the No-Code Overlays Web App

Ashlee (she/her)
Disabled Software Engineer and Web Accessibility Specialist helping people learn about accessibility
Originally published at nocodeoverlays.com ・2 min read

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.

The first merged PR as shown in GitHub.

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:

The No-Code Overlays login page. It shows email and password inputs in a white card on a dark purple background.

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! :)

Discussion (1)

Collapse
rleggos profile image
Rachel Leggett

Nice progress! I have to confess I've never set up authentication before because it really intimidates me. D: