Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Scrimba

Build a Mobile App with Firebase

via Scrimba

Overview

Build your first mobile app using HTML, CSS and JavaScript + Firebase. Firebase is a magical database service that lets you easily make realtime apps.
  • import
  • Firebase: initializeApp
  • Firebase: getDatabase
  • Firebase: reference
  • Firebase: push
  • Firebase: onValue
  • Firebase: snapshot
  • Firebase: remove
  • IDs
  • Object → Array
  • createElement
  • Flexbox: flex-wrap
  • Flexbox: gap
  • user-select
  • Setting the viewport
  • Favicon
  • Web Application Manifest

Syllabus

  • Build a Mobile App with Firebase
    • 1. Let's Build a Mobile App with Firebase
    • 2. Setting up app skeleton
    • 3. Adding CSS
    • 4. Aside: Firebase Realtime Database
    • 5. Adding Firebase to project
    • 6. Security Rules
    • 7. innerHTML to append li to ul
    • 8. Refactoring
    • 9. Aside: Turning an Object into an Array
    • 10. Aside: Fetching database items in realtime using onValue
    • 11. Updating items in realtime
    • 12. For loop to render database items
    • 13. Let's smash the bug
    • 14. Aside: Flexbox flex-wrap
    • 15. Aside: Flexbox gap
    • 16. Adding CSS for
    • to wrap items
    • 17. Getting ID of item in database
    • 18. Replacing innerHTML with createElement
    • 19. Aside: Removing items from Firebase
    • 20. Removing an item when clicked
    • 21. Only fetching items from database if snapshot exists
    • 22. Adding hover styles to buttons
    • 23. Accessibility fix
    • 24. Aside: user-select
    • 25. Don't over-use user-select!
    • 26. Aside: Setting the viewport
    • 27. Making the app more mobile-friendly
    • 28. Aside: Favicon
    • 29. Adding favicon and phone icons
    • 30. Aside: Web Application Manifest
    • 31. Turning web app into "mobile" app
    • 32. Personalise your app
    • 33. Deploy to Netlify
    • 34. Add app to home screen
    • 35. Share your creation
    • 36. Recap
    • 37. Solo Project (PRO) - We are the Champions

Reviews

Start your review of Build a Mobile App with Firebase

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.