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.

• 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

• 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