I’ve wanted to build a PWS (progressive web app) with a database for a long time. So when I saw that Scrimba launched a class to make one I was very excited. We’re building a shopping list app that will use Firebase for the database. The app will be deployed to Netlify. The second-to-last lesson step is a Recap reviewing how the code for the app works.
Firebase
We start by setting up a Firebase database. Firebase makes this super simple and after a few clicks we have a Realtime Database. The class was written recently so all of the images of the UI look the same as the site – which is always super helpful when you’re trying something new. I also used a Firebase db in the React for Beginners Wes Bos course which you can read about here.
We initially set read and write to true. The instructor shows that they’ve set write to false, which will keep students from writing to their db. I wonder if we’ll get to the point of securing the database so that it can be written to with a login. (We don’t but I might give it a go. 🤷♀️)
We import two links, one to initialize the app and the other to get and interact with the database. I wonder if this is Scrimba specific code or part of Firebase? Might have to look over the docs. 😄 Here are the docs. Firebase can be used with a CDN (like we’re doing in this class) or using npm for Node.js apps. 🙌 You can also the use Firebase’s SDK. Firebase is popular so there are plenty of articles and YouTube videos that can help. When you search, be sure to prioritize resources created in the last year or two which should have current instructions and images of the UI.
PWA
A PWA is a Progressive Web app. A PWA looks like a native app including an icon you can add to your screen. But is really a website. We created a favicon using favicon.io.
The JavaScript
One of the more interesting experiences when you complete a tutorial from an instructor you haven’t seen before, is that they might write a line differently.
We’re adding a list item to a <ul> that’s already in the HTML. And it has two list items already. The syntax is:
variableName.innerHTML += <li>${inputValue}</li>I’ve never used += to add innerHTML before (I think! 🤷♀️🙂)
The CSS
Yes – my wheelhouse. Anytime I feel a little dumb that I missed a bit of syntax in JavaScript, all I need to do is write some CSS to feel better. If you’re not there yet, no worries. Keep coding and you’ll start to feel the pieces coming together.
The deployed app is mostly Scrimba CSS. I figure it will give me a good chance to see an alternative to what I would write. I did change the font, and hover colors. I love the little kitty image so I definitely wanted to keep it!
Scrimba style
I’ve noticed that Scrimba seems to have a style they use for their code. I’m used to for…of loops for arrays for (let item of items) {}. But I see more iteration type loops like for (let i = 0; i < itemsArray.length; i++) {}. They originally write code within a function but then refactor it as its own function and call it in the function instead.
Obviously either way will work. It’s good to keep in mind that there are many ways of writing code so it’s great to work through tutorials from different people so you can see different syntax. On a job you might see both or there might be a preference. So it’s great to be familiar with multiple ways of writing the same code.
Finished
The finished app is now deployed. I would link to it but the database isn’t secure so it isn’t going to be a functioning app for long. We did secure the Wes Bos app linked above. So I might give that a go at some point. For now I’ve changed the rules so that someone can’t write to the database. I’ve wanted to give a PWA a try for a long time and I’m pretty happy. 🙂