PWA with Vue JS, Quasar & Firebase (with NodeJS & Express)

14h 36m 16s
English
Paid

Course description

In this course, I'm gonna show you how to use Vue JS, Quasar Framework 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.

Read more about the course

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 Installation

  • Precaching

  • Caching Strategies

  • Background Sync

  • Push Notifications

We'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.

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)

Who this course is for:
  • Anyone who wants to create a beautiful PWA that works on all platforms (and falls back gracefully to older/unsupportive browsers)

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

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 215 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online PWA with Vue JS, Quasar & Firebase (with NodeJS & Express)

0:00
/
#1: Introduction & Course App: Quasagram

All Course Lessons (215)

#Lesson TitleDurationAccess
1
Introduction & Course App: Quasagram Demo
07:13
2
What is Quasar?
01:44
3
What is a Progressive Web App?
02:47
4
How this Course is Structured
06:22
5
My Editor & Software Setup
05:42
6
Module Introduction
00:29
7
Install Node.js and Quasar CLI
01:16
8
Create & Launch a New Quasar Project (not in PWA mode yet)
03:01
9
Folder Structure - Layouts, Pages & Routes
03:11
10
Install Vue Devtools on Chrome
01:04
11
Vue.js Basics
01:02
12
Clean up the Project
00:52
13
Developing on Android & iOS
00:32
14
Module Introduction
00:30
15
Pages and Routes
02:24
16
Footer with Tab Navigation
04:10
17
Footer - Add Some Style
04:43
18
Footer - Change the Icon Set
04:41
19
Header - Styles
02:19
20
Header - Instagram-Style Title (Install Custom Font)
03:46
21
Desktop - Hide Footer on Larger Displays
05:17
22
Desktop - Show Navigation in Header on Larger Displays
03:23
23
Desktop - Make the Header More Desktopy on Larger Displays
05:58
24
Desktop - Constrain Content for Wider Screens
02:06
25
Module Introduction
00:27
26
Constrain the Page Content & Add Background Color
02:22
27
Create a List of Posts - Post Header
02:05
28
Create a List of Posts - Image
01:24
29
Create a List of Posts - Caption and Date
01:53
30
Add a Posts Array to Data Object
01:59
31
Connect the Posts Array to the View with v-for
02:27
32
Format the Date with a Filter
02:59
33
Add a Mini-Profile for Desktop
06:07
34
Hide the Mini-Profile on Mobile
02:54
35
Module Introduction
00:28
36
Add a Photo Frame & Capture Button
05:18
37
Add Text Fields & Submit Button
05:52
38
Adapt the Design for Desktop
02:41
39
Setup a Data Object for the Post Data
03:32
40
Module Introduction
00:48
41
Display Camera Feed in Photo Frame
04:00
42
getUserMedia - Browser Support and Polyfill
02:03
43
Capture the Image
07:01
44
Convert the Image to a Blob
02:32
45
Add a Fallback Image Upload Field
06:13
46
Display Fallback Image in Canvas
05:17
47
Disable Camera After Capture & When User Leaves Page
03:07
48
Module Introduction
00:40
49
Get User’s Location Coordinates
03:18
50
Get Users’s City & Country Names
06:01
51
Handle Errors
02:34
52
Add a Loading State
04:11
53
Hide Location Button if Geolocation Not Supported
02:08
54
Introduction to Firebase
07:20
55
How we’re going to use Firebase
03:12
56
Create a Firebase Project
00:58
57
Cloud Firestore Database - Add Some Posts
05:05
58
Add an Image to Storage
01:56
59
Module Introduction
01:11
60
Create & Launch our Backend Locally
06:06
61
Add Auto Restarting with Nodemon
02:43
62
Add a Simple Posts Endpoint
01:38
63
Deploy our Backend Server (1) - Setup Heroku
02:50
64
Deploy our Backend Server (2) - Deploy with Heroku Builds
06:14
65
If you want to use Cloud Functions
10:26
66
Module Introduction
00:36
67
Connect to the Firestore Database
03:56
68
Posts Endpoint - Grab the Posts
03:06
69
Display the Posts on the Home Page
04:21
70
Sort Posts by Date
02:02
71
Handle Errors
01:08
72
Handle Loading
05:55
73
Show a “No Posts Yet” Fallback
03:18
74
Module Introduction
00:38
75
Add createPost Endpoint
02:07
76
Environment Variables to Manage our API URLs
06:00
77
Send the Post Data to the Endpoint
06:53
78
Parse the Form Data with Busboy
06:56
79
Store the Field Data as a Post (1)
06:06
80
Store the Field Data as a Post (2)
01:10
81
Upload the Image (1) Configure Google Cloud Storage
01:52
82
Upload the Image (2) Save the Image to the Temp Folder
03:48
83
Upload the Image (3) Upload to Google Cloud Storage & Store the Image URL
10:00
84
Add Validation
03:35
85
Handle Errors & Successes
04:48
86
Handle Loading
02:57
87
Remember to Keep an Eye on the Size of your Images in Storage
02:16
88
Task 1 - Get the Project Running
00:42
89
Task 2 - Create a Firebase Project
00:30
90
Task 3 - Create a Cloud Firestore Database
01:57
91
Task 4 - Setup a Node.js & Express Backend
03:47
92
Task 5 - Initialize Firestore Database
02:33
93
Task 6 - Tasks Endpoint
03:08
94
Task 7 - Display Tasks in App
02:48
95
Task 8 - Create Task Endpoint (1)
02:14
96
Task 9 - Create Task Endpoint (2)
02:04
97
Task 10 - Create Task Endpoint (3)
04:29
98
Task 11 - Add a Loading Screen
02:45
99
PWA Introduction
02:18
100
Launch Quasagram in PWA Mode
02:02
101
Manifest File
01:39
102
Manifest Properties
05:36
103
Module Introduction
00:27
104
Install Icon Genie
01:05
105
Create the Source Icon
03:42
106
Generate the Icons
05:22
107
Module Introduction
00:34
108
Create the App Install Banner
03:48
109
Add an App Icon to the Banner
03:17
110
Show App Install Banner on Desktop
03:11
111
Only show App Install Banner when App Installable
05:24
112
Show Native Install Prompt if they click Yes
04:02
113
Allow the User to Hide the App Install Banner
07:40
114
Animate the App Install Banner
03:57
115
Module Introduction
01:07
116
What is a Service Worker?
02:17
117
Service Worker Events
02:41
118
What is Workbox?
01:40
119
src-pwa Folder
02:21
120
Basic Caching & Offline Capabilities
02:44
121
Enable Custom Service Worker File
01:53
122
Module Introduction
00:30
123
What is Precaching?
00:50
124
Enable Precache
04:52
125
Build the App for Production & Switch to Live Backend
02:40
126
Host the App on Firebase
05:11
127
Show Precaching in Live App
03:29
128
Caching Strategies Introduction
02:00
129
What Caching Strategies Can We Use?
03:52
130
Stale While Revalidate Strategy as a Catch All for Most Requests
07:58
131
Cache First Strategy for our Google Font
11:26
132
Network First Strategy for Posts Request
04:18
133
Background Sync Introduction
02:29
134
Check for Background Sync Support
04:02
135
Create Post Background Sync
09:10
136
Redirect to Home Page if Post Created Offline
06:06
137
Display the Offline Posts (1) - Open the IndexedDB Database with IDB
07:02
138
Display the Offline Posts (2) - Get the Raw Request Data
05:28
139
Display the Offline Posts (3) - Get the Form Fields & Add Offline Post to Page
13:26
140
Style the Offline Posts Differently
07:26
141
Show Offline Post was Uploaded (1) - Add onSync Hook to Queue
10:59
142
Show Offline Post was Uploaded (2) - Send Message to the Client (Browser)
11:54
143
Show Offline Post was Uploaded (3) - Remove the Offline Post Styles
06:10
144
Module Introduction
01:36
145
How Push Notifications Work
05:42
146
Create an “Enable Notifications” Banner (1) - Repurpose the App Install Banner
08:07
147
Create an “Enable Notifications” Banner (2) - Improve the Style
04:23
148
Request Notifications Permission
05:22
149
Display a Notification from Our App
03:58
150
Notification Options
07:13
151
Display a Notification Using the Service Worker
03:50
152
Notification Actions
03:01
153
Handle Notification Clicks
04:50
154
Handle Notification Closed
01:41
155
Check for Existing Push Subscription
04:32
156
Create a New Push Subscription
04:35
157
Secure the Push Subscription with Web Push (1)
03:59
158
Secure the Push Subscription with Web Push (2)
04:00
159
Store The Subscription in Cloud Firestore Database (1)
02:56
160
Store The Subscription in Cloud Firestore Database (2)
08:19
161
A Note About Push Subscriptions & Service Workers
02:23
162
Send a “New Post” Push Notification from Our Backend Server
10:43
163
If You’re Using Cloud Functions (Important)
03:07
164
Listen for Push Notifications in the Service Worker
07:23
165
Display the Real Push Notification
04:47
166
Open our Home Page on Notification Click
06:23
167
Send the Open URL from the Backend
03:55
168
Module Introduction
00:34
169
Hosting the App
02:36
170
Firefox - Testing
08:13
171
Firefox - Fixing Issues
04:24
172
Safari - Testing
03:20
173
Safari - Fixing Issues
01:43
174
Testing Edge & Internet Explorer on a Mac with VirtualBox
03:41
175
Edge
08:06
176
Internet Explorer
09:38
177
Module Introduction
00:31
178
Developing on Android Emulator (1) - Install Android Studio
01:04
179
Developing on Android Emulator (2) - Setup Virtual Device
01:20
180
Developing on Android Emulator (3) - Launch on Android Emulator
12:36
181
Developing on Android Emulator (4) - Debugging
02:26
182
Launch Live App on Android Emulator
04:58
183
Developing on a Real Android Device
17:56
184
Fix Background Sync Issue
13:38
185
Show the Image in the Notification on Android
07:59
186
Check the Background Sync Fix
09:51
187
Module Introduction
00:28
188
Developing on iOS Simulator (1) - Install Xcode & Launch the Simulator
01:05
189
Developing on iOS Simulator (2) - Launch on iOS Simulator
08:07
190
Developing on iOS Simulator (3) - Debugging
02:17
191
Fix Footer on iOS Safari
06:14
192
Developing on a Real iOS Device
09:00
193
Fix the Camera & Post Image Button Issues
05:43
194
Task 1 - Get App Running
04:52
195
Task 2 - Change Theme Color
01:17
196
Task 3 - Generate App Icons
01:45
197
Task 4 - Install App Button (1)
01:55
198
Task 5 - Install App Button (2)
01:54
199
Task 6 - Enable Precache
02:23
200
Task 7 - Caching Strategies
03:30
201
Task 8 - Background Sync (1)
03:27
202
Task 9 - Background Sync (2)
02:54
203
Task 10 - Background Sync (3)
03:01
204
Task 11 - Push Notifications - Notification Permission (1)
01:54
205
Task 12 - Push Notifications - Notification Permission (2)
01:54
206
Task 13 - Push Notifications - Create Push Subscription (1)
03:10
207
Task 14 - Push Notifications - Create Push Subscription (2)
06:26
208
Task 15 - Push Notifications - Store Push Subscription in Database
05:23
209
Task 16 - “You’re subscribed!” Notification
02:01
210
Task 17 - Send Push Notification from Backend
07:12
211
Task 18 - Display Push Notification
03:51
212
Task 19 - Handle Push Notification Click
04:15
213
Task 20 - Host App on Firebase & Backend on Heroku
15:19
214
What Next?
01:30
215
Bonus Lecture: Learn More From Me
05:08

Unlock unlimited learning

Get instant access to all 214 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Build an Image Filters App with Vue, TypeScript and WebAssembly

Build an Image Filters App with Vue, TypeScript and WebAssembly

Sources: zerotomastery.io
With this project you'll build "Vue Filters", an image filter application built with Vue that allows you to bring the experience of applying Photoshop filters t
1 hour 44 minutes 19 seconds
A “Wordle” on Test Driven Development in Vue.js

A “Wordle” on Test Driven Development in Vue.js

Sources: vueschool.io
In this hands-on course, you will learn to write applications using Test-Driven Development (TDD) by building a clone of the Wordle game from scratch. This cour
2 hours 48 minutes 45 seconds