Firebase

calendarMay 31, 2023 · 1 min read · firebase fullstack css favicon web application manifest  ·
Share on: linkedincopy

Firebase Realtime Database

Yesterday I completed the newly added section on building a progressive web app that looks like a mobile app, using the core frontend trifecta, HTML, CSS, and JavaScript, hooked to a Firebase Realtime Database backend. Throughout the course I built a basic Add to Cart/todo list app. At the end I built the solo project We are the Champions.

The key strength of the Firebase Realtime Database is its onValue function, which enables your app to get a snapshot of the data, i.e. realtime READ, anytime something changes, whether it's a push, i.e. CREATE, update, or remove. The list of constants and functions I learned and used include:

  1. appSettings, in which you include the databaseURL
  2. initialiseApp()
  3. getDatabase()
  4. ref()
  5. push()
  6. onValue()
  7. remove()
  8. update()
  9. snapshot.exists()
  10. snapshot.val()
  11. Object.values()
  12. Object.keys()
  13. Object.entries()

CSS

In addition, I looked at some new CSS properties:

  1. flex-wrap: wrap;, to wrap children of a flexbox
  2. gap: 1em 2em;, for gaps among rows and columns
  3. user-select: none;, to prevent text selection

Favicon and the Web Application Manifest

I also looked at generating favicons and how to use the web application manifest to produce a mobile app like site.