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

14h 36m 16s
English
Paid
November 20, 2023

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.

More

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 PWA with Vue JS, Quasar & Firebase (with NodeJS & Express)

Join premium to watch
Go to premium
# Title Duration
1 Introduction & Course App: Quasagram 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

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

Robust Vue.js Forms with FormKit

Robust Vue.js Forms with FormKitvueschool.io

Duration 2 hours 4 minutes 52 seconds
A “Wordle” on Test Driven Development in Vue.js
Master Laravel with GraphQL, Vue.js and Tailwind

Master Laravel with GraphQL, Vue.js and Tailwindudemy

Duration 17 hours 48 minutes 5 seconds
AI Chat Bot with Vue.js and GPT-4

AI Chat Bot with Vue.js and GPT-4vueschool.io

Duration 1 hour 46 minutes 30 seconds