Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[Juarez Filho] Building your own Google Keep clone powered by Firebase

[Juarez Filho] Building your own Google Keep clone powered by Firebase

Content level: Intermediate

Join me on an adventure cloning the famous Google Keep app taking advantage of Angular v6 and Firebase features. Following this talk, you will learn Angular CLI tips, Angular Best Practices including TypeScript and Modern JavaScript, Material Design for the UI components, AngularFire, and tons of Firebase awesomeness.

In a nutshell, it will cover: 🔒 Authentication with Google ✏️ Notes management using Firestore 🎈 Activity using the Realtime Database 🌈 Cloud Functions for advanced techniques including image thumbnails and sub-collections removal 🖼️ Cloud Storage for the built-in gallery section inside of each note 🌩️ Cloud Messaging to send push notifications when a new collaborator is added to a note 🌟 And of course, Firebase Hosting which provides a fast and secure web hosting

Did I mention it is a Progressive Web App? 🚀

by Juarez Filho
Google Developer Expert / Ireland

Google Developers Group Lviv

October 13, 2018
Tweet

More Decks by Google Developers Group Lviv

Other Decks in Programming

Transcript

  1. Born in Brazil Living the dream with my lovely wife

    in Dublin Senior Developer #jesusfreak
  2. Use tools (Angular CLI) for task automation Be curious about

    new possibilities to improve your current workflow Testing is indispensable. Just do it! Learn how to customize app settings (angular.json) STARTING THE PROJECT...
  3. ADDING PWA AWESOMENESS... Add PWA capabilities via Angular CLI Check

    Angular Docs for a better understanding Filling the manifest.json with real data Customize ngsw-config.json for advanced usage Test with --prod flag and Chrome DevTools
  4. Add PWA capabilities via Angular CLI Check Angular Docs for

    a better understanding Filling the manifest.json with real data Customize ngsw-config.json for advanced usage Test with --prod flag and Chrome DevTools SETTING UP ANGULAR MATERIAL...
  5. +

  6. “ First do it then do it right then do

    it better − Addy Osmani “
  7. Want to help shape Firebase? Join us for one of

    our future user studies! Firebase Alpha Program firebase.google.com/alpha
  8. Thank you! You have questions? You can reach me via

    email: [email protected] Juarez Filho Google Developer Expert