Quasar V1: Pwa (With Vue Js 2, Firebase, Nodejs & Express)

Create a Beautiful Instagram-Style Progressive Web App with Vue 2, Quasar V1, Firebase, NodeJS & Express

What you'll learn
How to create a beautiful Instagram clone PWA with Vue JS, Quasar & Firebase
How to integrate the 5 Core PWA Features: Home Screen Installation, Precaching, Caching Strategies, Background Sync & Push Notifications
How to make a PWA fully functional offline
How to create a gorgeous responsive design that adapts across Mobile & Desktop
How to access the device's Native Camera & Location
All about Service Workers, Workbox, Firebase Cloud Firestore, Firebase Storage, NodeJS & Express and much more
Requirements
Basic HTML, CSS & JavaScript knowledge is required
Basic VueJS knowledge is beneficial but not required
A Mac for development is preferred (for testing the app on iOS)
Description
In this course, I'm gonna show you how to use Quasar Framework V1, Vue JS 2 and Firebase to create an amazing Progressive Web App (PWA).We're gonna create a gorgeous Instagram clone called Quasagram. In this app we can display a list of posts; each post has an image, location, caption and the date the image was taken.We can access the user's camera and take a photo, enter a caption, find the user's location and create a new post.It's gonna have a beautiful responsive design that adapts across Desktop & Mobile.We're gonna store all our data in a Firebase Cloud Firestore database.We'll store our photos in Firebase Storage.We're gonna create our own NodeJS & Express backend with several different endpoints for interacting with the database.We'll incorporate all of the 5 Core PWA features:Home Screen InstallationPrecachingCaching StrategiesBackground SyncPush NotificationsWe'll get the app working on iOS, Android & all the main desktop browsers, and it'll even fall back gracefully for older browsers like Internet Explorer.You'll also learn about Service Workers, Workbox, Firebase Cloud Firestore database, Firebase Storage, NodeJS & Express and much more.By the end of this course, you'll be able to create your own Progressive Web Apps using Vue JS, Quasar Framework, Firebase, NodeJS & Express.NOTE: This course is for Quasar V1 (with Vue 2). Quasar V2 (with Vue 3) is not covered in this course.

Overview

Section 1: Introduction

Lecture 1 Introduction & Course App: Quasagram

Lecture 2 What is Quasar?

Lecture 3 What is a Progressive Web App?

Lecture 4 How this Course is Structured

Lecture 5 My Editor & Software Setup

Lecture 6 Why do we need a Backend?

Section 2: Getting Started

Lecture 7 Module Introduction

Lecture 8 Install Node.js and Quasar CLI

Lecture 9 Create & Launch a New Quasar Project (not in PWA mode yet)

Lecture 10 Update: Quasar V1 Documentation

Lecture 11 Folder Structure - Layouts, Pages & Routes

Lecture 12 Install Vue Devtools on Chrome

Lecture 13 Vue.js Basics

Lecture 14 Clean up the Project

Lecture 15 Developing on Android & iOS

Section 3: Layout, Pages & Routes - Start building Quasagram

Lecture 16 Module Introduction

Lecture 17 Pages and Routes

Lecture 18 Footer with Tab Navigation

Lecture 19 Footer - Add Some Style

Lecture 20 Footer - Change the Icon Set

Lecture 21 Header - Styles

Lecture 22 Header - Instagram-Style Title (Install Custom Font)

Lecture 23 Desktop - Hide Footer on Larger Displays

Lecture 24 Desktop - Show Navigation in Header on Larger Displays

Lecture 25 Desktop - Make the Header More Desktopy on Larger Displays

Lecture 26 Desktop - Constrain Content for Wider Screens

Lecture 27 Finished Module Code

Section 4: Design - Home Page

Lecture 28 Module Introduction

Lecture 29 Constrain the Page Content & Add Background Color

Lecture 30 Create a List of Posts - Post Header

Lecture 31 Create a List of Posts - Image

Lecture 32 Create a List of Posts - Caption and Date

Lecture 33 Add a Posts Array to Data Object

Lecture 34 Connect the Posts Array to the View with v-for

Lecture 35 Format the Date with a Filter

Lecture 36 Add a Mini-Profile for Desktop

Lecture 37 Hide the Mini-Profile on Mobile

Lecture 38 Finished Module Code

Section 5: Design - Camera Page

Lecture 39 Module Introduction

Lecture 40 Add a Photo Frame & Capture Button

Lecture 41 Add Text Fields & Submit Button

Lecture 42 Adapt the Design for Desktop

Lecture 43 Setup a Data Object for the Post Data

Lecture 44 Finished Module Code

Section 6: Native Device Features - Camera

Lecture 45 Module Introduction

Lecture 46 Display Camera Feed in Photo Frame

Lecture 47 getUserMedia - Browser Support and Polyfill

Lecture 48 Capture the Image

Lecture 49 Convert the Image to a Blob

Lecture 50 Add a Fallback Image Upload Field

Lecture 51 Display Fallback Image in Canvas

Lecture 52 Disable Camera After Capture & When User Leaves Page

Lecture 53 Finished Module Code

Section 7: Native Device Features - Location

Lecture 54 Module Introduction

Lecture 55 Get User’s Location Coordinates

Lecture 56 Get Users’s City & Country Names

Lecture 57 Handle Errors

Lecture 58 Add a Loading State

Lecture 59 Hide Location Button if Geolocation Not Supported

Lecture 60 Finished Module Code

Section 8: Firebase - Cloud Firestore Database & Storage

Lecture 61 Introduction to Firebase

Lecture 62 How we’re going to use Firebase

Lecture 63 Create a Firebase Project

Lecture 64 Cloud Firestore Database - Add Some Posts

Lecture 65 Add an Image to Storage

Section 9: Node.js & Express Backend

Lecture 66 Module Introduction

Lecture 67 Create & Launch our Backend Locally

Lecture 68 Add Auto Restarting with Nodemon

Lecture 69 Add a Simple Posts Endpoint

Lecture 70 Deploy our Backend Server (1) - Setup Heroku

Lecture 71 Deploy our Backend Server (2) - Deploy with Heroku Builds

Lecture 72 If you want to use Cloud Functions

Lecture 73 Finished Module Code

Section 10: Get Posts Endpoint

Lecture 74 Module Introduction

Lecture 75 Connect to the Firestore Database

Lecture 76 Posts Endpoint - Grab the Posts

Lecture 77 Display the Posts on the Home Page

Lecture 78 Sort Posts by Date

Lecture 79 Handle Errors

Lecture 80 Handle Loading

Lecture 81 Show a “No Posts Yet” Fallback

Lecture 82 Finished Module Code

Section 11: Create Post Endpoint

Lecture 83 Module Introduction

Lecture 84 Add createPost Endpoint

Lecture 85 Environment Variables to Manage our API URLs

Lecture 86 Send the Post Data to the Endpoint

Lecture 87 Parse the Form Data with Busboy

Lecture 88 Store the Field Data as a Post (1)

Lecture 89 Store the Field Data as a Post (2)

Lecture 90 Upload the Image (1) Configure Google Cloud Storage

Lecture 91 Upload the Image (2) Save the Image to the Temp Folder

Lecture 92 Upload the Image (3) Upload to Google Cloud Storage & Store the Image URL

Lecture 93 Add Validation

Lecture 94 Handle Errors & Successes

Lecture 95 Handle Loading

Lecture 96 Remember to Keep an Eye on the Size of your Images in Storage

Lecture 97 Finished Module Code

Section 12: Assignment 1 - Database & Backend

Lecture 98 Task 1 - Get the Project Running

Lecture 99 Task 2 - Create a Firebase Project

Lecture 100 Task 3 - Create a Cloud Firestore Database

Lecture 101 Task 4 - Setup a Node.js & Express Backend

Lecture 102 Task 5 - Initialize Firestore Database

Lecture 103 Task 6 - Tasks Endpoint

Lecture 104 Task 7 - Display Tasks in App

Lecture 105 Task 8 - Create Task Endpoint (1)

Lecture 106 Task 9 - Create Task Endpoint (2)

Lecture 107 Task 10 - Create Task Endpoint (3)

Lecture 108 Task 11 - Add a Loading Screen

Section 13: PWA - Setup and Manifest File

Lecture 109 PWA Introduction

Lecture 110 Launch Quasagram in PWA Mode

Lecture 111 Manifest File

Lecture 112 Manifest Properties

Lecture 113 Finished Module Code

Section 14: PWA - Icons for All Devices

Lecture 114 Module Introduction

Lecture 115 Install Icon Genie

Lecture 116 Create the Source Icon

Lecture 117 Generate the Icons

Lecture 118 Finished Module Code

Section 15: PWA - Home Screen Installation

Lecture 119 Module Introduction

Lecture 120 Create the App Install Banner

Lecture 121 Add an App Icon to the Banner

Lecture 122 Show App Install Banner on Desktop

Lecture 123 Only show App Install Banner when App Installable

Lecture 124 Show Native Install Prompt if they click Yes

Lecture 125 Allow the User to Hide the App Install Banner

Lecture 126 Animate the App Install Banner

Lecture 127 Finished Module Code

Section 16: PWA - Service Workers & Workbox

Lecture 128 Module Introduction

Lecture 129 What is a Service Worker?

Lecture 130 Service Worker Events

Lecture 131 What is Workbox?

Lecture 132 src-pwa Folder

Lecture 133 Basic Caching & Offline Capabilities

Lecture 134 Enable Custom Service Worker File

Section 17: PWA - Precaching

Lecture 135 Module Introduction

Lecture 136 What is Precaching?

Lecture 137 Enable Precache

Lecture 138 Build the App for Production & Switch to Live Backend

Lecture 139 Host the App on Firebase

Lecture 140 Show Precaching in Live App

Lecture 141 A Quicker Way to Go Online / Offline

Lecture 142 Finished Module Code

Section 18: PWA - Caching Strategies

Lecture 143 Caching Strategies Introduction

Lecture 144 What Caching Strategies Can We Use?

Lecture 145 Stale While Revalidate Strategy as a Catch All for Most Requests

Lecture 146 Cache First Strategy for our Google Font

Lecture 147 Network First Strategy for Posts Request

Lecture 148 Finished Module Code

Section 19: PWA - Background Sync

Lecture 149 Background Sync Introduction

Lecture 150 Check for Background Sync Support

Lecture 151 Create Post Background Sync

Lecture 152 Redirect to Home Page if Post Created Offline

Lecture 153 Display the Offline Posts (1) - Open the IndexedDB Database with IDB

Lecture 154 Disable the Workbox Logs

Lecture 155 Display the Offline Posts (2) - Get the Raw Request Data

Lecture 156 Display the Offline Posts (3) - Get the Form Fields & Add Offline Post to Page

Lecture 157 Style the Offline Posts Differently

Lecture 158 Show Offline Post was Uploaded (1) - Add onSync Hook to Queue

Lecture 159 Show Offline Post was Uploaded (2) - Send Message to the Client (Browser)

Lecture 160 Show Offline Post was Uploaded (3) - Remove the Offline Post Styles

Lecture 161 Finished Module Code

Section 20: PWA - Push Notifications

Lecture 162 Module Introduction

Lecture 163 How Push Notifications Work

Lecture 164 Create an “Enable Notifications” Banner (1) - Repurpose the App Install Banner

Lecture 165 Create an “Enable Notifications” Banner (2) - Improve the Style

Lecture 166 Request Notifications Permission

Lecture 167 Display a Notification from Our App

Lecture 168 Notification Options

Lecture 169 Display a Notification Using the Service Worker

Lecture 170 Notification Actions

Lecture 171 Handle Notification Clicks

Lecture 172 Handle Notification Closed

Lecture 173 Check for Existing Push Subscription

Lecture 174 Create a New Push Subscription

Lecture 175 Secure the Push Subscription with Web Push (1)

Lecture 176 Secure the Push Subscription with Web Push (2)

Lecture 177 Store The Subscription in Cloud Firestore Database (1)

Lecture 178 Store The Subscription in Cloud Firestore Database (2)

Lecture 179 A Note About Push Subscriptions & Service Workers

Lecture 180 Send a “New Post” Push Notification from Our Backend Server

Lecture 181 If You’re Using Cloud Functions (Important)

Lecture 182 Listen for Push Notifications in the Service Worker

Lecture 183 Display the Real Push Notification

Lecture 184 Open our Home Page on Notification Click

Lecture 185 Send the Open URL from the Backend

Lecture 186 Finished Module Code

Section 21: Desktop Browsers - Testing & Fixing

Lecture 187 Module Introduction

Lecture 188 Hosting the App

Lecture 189 Firefox - Testing

Lecture 190 Firefox - Fixing Issues

Lecture 191 Safari - Testing

Lecture 192 Safari - Fixing Issues

Lecture 193 Testing Edge & Internet Explorer on a Mac with VirtualBox

Lecture 194 Edge

Lecture 195 Internet Explorer

Lecture 196 Finished Module Code

Section 22: Mobile - Android - Developing, Testing & Improving

Lecture 197 Module Introduction

Lecture 198 Developing on Android Emulator (1) - Install Android Studio

Lecture 199 Developing on Android Emulator (2) - Setup Virtual Device

Lecture 200 Developing on Android Emulator (3) - Launch on Android Emulator

Lecture 201 Developing on Android Emulator (4) - Debugging

Lecture 202 Launch Live App on Android Emulator

Lecture 203 Developing on a Real Android Device

Lecture 204 Fix Background Sync Issue

Lecture 205 Show the Image in the Notification on Android

Lecture 206 Check the Background Sync Fix

Lecture 207 Finished Module Code

Section 23: Mobile - iOS - Developing, Testing & Fixing

Lecture 208 Module Introduction

Lecture 209 Developing on iOS Simulator (1) - Install Xcode & Launch the Simulator

Lecture 210 Developing on iOS Simulator (2) - Launch on iOS Simulator

Lecture 211 Developing on iOS Simulator (3) - Debugging

Lecture 212 How I Got Safari Simulator Debugging Working

Lecture 213 Fix Footer on iOS Safari

Lecture 214 Developing on a Real iOS Device

Lecture 215 Fix the Camera & Post Image Button Issues

Lecture 216 Finished App Code

Section 24: Assignment 2 - Progressive Web Apps

Lecture 217 Task 1 - Get App Running

Lecture 218 Task 2 - Change Theme Color

Lecture 219 Task 3 - Generate App Icons

Lecture 220 Task 4 - Install App Button (1)

Lecture 221 Task 5 - Install App Button (2)

Lecture 222 Task 6 - Enable Precache

Lecture 223 Task 7 - Caching Strategies

Lecture 224 Task 8 - Background Sync (1)

Lecture 225 Task 9 - Background Sync (2)

Lecture 226 Task 10 - Background Sync (3)

Lecture 227 Task 11 - Push Notifications - Notification Permission (1)

Lecture 228 Task 12 - Push Notifications - Notification Permission (2)

Lecture 229 Task 13 - Push Notifications - Create Push Subscription (1)

Lecture 230 Task 14 - Push Notifications - Create Push Subscription (2)

Lecture 231 Task 15 - Push Notifications - Store Push Subscription in Database

Lecture 232 Task 16 - “You’re subscribed!” Notification

Lecture 233 Task 17 - Send Push Notification from Backend

Lecture 234 Task 18 - Display Push Notification

Lecture 235 Task 19 - Handle Push Notification Click

Lecture 236 Task 20 - Host App on Firebase & Backend on Heroku

Section 25: What Next?

Lecture 237 What Next?

Lecture 238 Update: Quasar V2, Vue 3 & Composition API

Lecture 239 Bonus Lecture: Learn More From Me

Anyone who wants to create a beautiful PWA that works on all platforms (and falls back gracefully to older/unsupportive browsers)