Build a Mobile App with Firebase
Build your first mobile app using HTML, CSS and JavaScript + Firebase. Firebase is a magical database service that lets you easily make realtime apps.
2 hrs
Content
About
Let's Build a Mobile App with Firebase
Setting up app skeleton
Adding CSS
Aside: Firebase Realtime Database
Adding Firebase to project
Security Rules
innerHTML to append li to ul
Refactoring
Aside: Turning an Object into an Array
Aside: Fetching database items in realtime using onValue
Updating items in realtime
For loop to render database items
Let's smash the bug
Aside: Flexbox flex-wrap
Aside: Flexbox gap
Adding CSS for <li> to wrap items
Getting ID of item in database
Replacing innerHTML with createElement
Aside: Removing items from Firebase
Removing an item when clicked
Only fetching items from database if snapshot exists
Adding hover styles to buttons
Aside: user-select
Don't over-use user-select!
Aside: Setting the viewport
Making the app more mobile-friendly
Aside: Favicon
Adding favicon and phone icons
Aside: Web Application Manifest
Turning web app into "mobile" app
Personalise your app
Deploy to Netlify
Add app to home screen
Share your creation
Recap
Solo Project (PRO) - We are the Champions
