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)
The Nuxt 3 Bootcamp The Complete Developer Guideudemy
Duration 16 hours 52 minutes 7 seconds
Course
Robust Vue.js Forms with FormKitvueschool.io
Duration 2 hours 4 minutes 52 seconds
Course
Vue.js + Laravel: CRUD with SPAlaraveldaily.com
Duration 1 hour 50 minutes 29 seconds
Course
TypeScript with Vue.js 3vueschool.io
Duration 1 hour 37 minutes 47 seconds
Course
Testing Vue.js Componentsvueschool.io
Duration 1 hour 6 minutes 20 seconds
Course
Laravel Backends for Vue.js 3vueschool.io
Duration 3 hours 44 minutes
Course
The Vue Firebase Project Coursefireship.io
Duration 46 minutes 28 seconds
Course