1: Introduction
2: Getting Started
-
Module Introduction (0:29)
-
Install Node.js and Quasar CLI (1:15)
-
Create & Launch a New Quasar Project (not in PWA mode yet) (3:59)
-
Update: Quasar V1 Documentation
-
Folder Structure - Layouts, Pages & Routes (3:10)
-
Install Vue Devtools on Chrome (1:03)
-
Vue.js Basics (1:01)
-
Clean up the Project (0:51)
-
Developing on Android & iOS (0:31)
3: Layout, Pages & Routes - Start building Quasagram
-
Module Introduction (0:29)
-
Pages and Routes (2:23)
-
Footer with Tab Navigation (4:09)
-
Footer - Add Some Style (4:42)
-
Footer - Change the Icon Set (4:40)
-
Header - Styles (2:18)
-
Header - Instagram-Style Title (Install Custom Font) (3:45)
-
Desktop - Hide Footer on Larger Displays (5:16)
-
Desktop - Show Navigation in Header on Larger Displays (3:22)
-
Desktop - Make the Header More Desktopy on Larger Displays (5:58)
-
Desktop - Constrain Content for Wider Screens (2:05)
-
Finished Module Code
4: Design - Home Page
-
Module Introduction (0:26)
-
Constrain the Page Content & Add Background Color (2:21)
-
Create a List of Posts - Post Header (2:04)
-
Create a List of Posts - Image (1:23)
-
Create a List of Posts - Caption and Date (1:52)
-
Add a Posts Array to Data Object (1:58)
-
Connect the Posts Array to the View with v-for (2:26)
-
Format the Date with a Filter (2:58)
-
Add a Mini-Profile for Desktop (6:06)
-
Hide the Mini-Profile on Mobile (2:53)
-
Finished Module Code
5: Design - Camera Page
6: Native Device Features - Camera
-
Module Introduction (0:48)
-
Display Camera Feed in Photo Frame (3:59)
-
getUserMedia - Browser Support and Polyfill (2:02)
-
Capture the Image (7:00)
-
Convert the Image to a Blob (2:31)
-
Add a Fallback Image Upload Field (6:12)
-
Display Fallback Image in Canvas (5:16)
-
Disable Camera After Capture & When User Leaves Page (3:06)
-
Finished Module Code
7: Native Device Features - Location
8: Firebase - Cloud Firestore Database & Storage
9: Node.js & Express Backend
-
Module Introduction (1:10)
-
Create & Launch our Backend Locally (6:05)
-
Add Auto Restarting with Nodemon (2:42)
-
Add a Simple Posts Endpoint (1:37)
-
Deploy our Backend Server (1) - Setup Heroku (2:49)
-
Deploy our Backend Server (2) - Deploy with Heroku Builds (6:13)
-
If you want to use Cloud Functions (10:25)
-
Finished Module Code
10: Get Posts Endpoint
11: Create Post Endpoint
-
Module Introduction (0:37)
-
Add createPost Endpoint (2:06)
-
Environment Variables to Manage our API URLs (5:59)
-
Send the Post Data to the Endpoint (6:52)
-
Parse the Form Data with Busboy (6:55)
-
Store the Field Data as a Post (1) (6:06)
-
Store the Field Data as a Post (2) (1:09)
-
Upload the Image (1) Configure Google Cloud Storage (1:51)
-
Upload the Image (2) Save the Image to the Temp Folder (3:47)
-
Upload the Image (3) Upload to Google Cloud Storage & Store the Image URL (9:59)
-
Add Validation (3:34)
-
Handle Errors & Successes (4:47)
-
Handle Loading (2:56)
-
Remember to Keep an Eye on the Size of your Images in Storage (2:15)
-
Finished Module Code
12: Assignment 1 - Database & Backend
-
Assignment 1 - Database & Backend (5:49)
-
Task 1 - Get the Project Running (0:41)
-
Task 2 - Create a Firebase Project (0:29)
-
Task 3 - Create a Cloud Firestore Database (1:56)
-
Task 4 - Setup a Node.js & Express Backend (3:46)
-
Task 5 - Initialize Firestore Database (2:32)
-
Task 6 - Tasks Endpoint (3:07)
-
Task 7 - Display Tasks in App (2:47)
-
Task 8 - Create Task Endpoint (1) (2:13)
-
Task 9 - Create Task Endpoint (2) (2:03)
-
Task 10 - Create Task Endpoint (3) (4:29)
-
Task 11 - Add a Loading Screen (2:44)
13: PWA - Setup and Manifest File
14: PWA - Icons for All Devices
15: PWA - Home Screen Installation
-
Module Introduction (0:33)
-
Create the App Install Banner (3:47)
-
Add an App Icon to the Banner (3:16)
-
Show App Install Banner on Desktop (3:10)
-
Only show App Install Banner when App Installable (5:23)
-
Show Native Install Prompt if they click Yes (4:01)
-
Allow the User to Hide the App Install Banner (7:39)
-
Animate the App Install Banner (3:56)
-
Finished Module Code
16: PWA - Service Workers & Workbox
17: PWA - Precaching
18: PWA - Caching Strategies
19: PWA - Background Sync
-
Background Sync Introduction (2:28)
-
Check for Background Sync Support (4:01)
-
Create Post Background Sync (9:10)
-
Redirect to Home Page if Post Created Offline (6:05)
-
Display the Offline Posts (1) - Open the IndexedDB Database with IDB (7:02)
-
Disable the Workbox Logs
-
Display the Offline Posts (2) - Get the Raw Request Data (5:27)
-
Display the Offline Posts (3) - Get the Form Fields & Add Offline Post to Page (13:29)
-
Style the Offline Posts Differently (7:25)
-
Show Offline Post was Uploaded (1) - Add onSync Hook to Queue (10:58)
-
Show Offline Post was Uploaded (2) - Send Message to the Client (Browser) (11:53)
-
Show Offline Post was Uploaded (3) - Remove the Offline Post Styles (6:09)
-
Finished Module Code
20: PWA - Push Notifications
-
Module Introduction (1:35)
-
How Push Notifications Work (5:42)
-
Create an “Enable Notifications” Banner (1) - Repurpose the App Install Banner (8:07)
-
Create an “Enable Notifications” Banner (2) - Improve the Style (4:22)
-
Request Notifications Permission (5:21)
-
Display a Notification from Our App (3:57)
-
Notification Options (7:12)
-
Display a Notification Using the Service Worker (3:49)
-
Notification Actions (3:00)
-
Handle Notification Clicks (4:49)
-
Handle Notification Closed (1:40)
-
Check for Existing Push Subscription (4:31)
-
Create a New Push Subscription (4:34)
-
Secure the Push Subscription with Web Push (1) (3:58)
-
Secure the Push Subscription with Web Push (2) (4:00)
-
Store The Subscription in Cloud Firestore Database (1) (2:55)
-
Store The Subscription in Cloud Firestore Database (2) (8:18)
-
A Note About Push Subscriptions & Service Workers (2:23)
-
Send a “New Post” Push Notification from Our Backend Server (10:42)
-
If You’re Using Cloud Functions (Important) (3:06)
-
Listen for Push Notifications in the Service Worker (7:22)
-
Display the Real Push Notification (4:46)
-
Open our Home Page on Notification Click (6:22)
-
Send the Open URL from the Backend (3:54)
-
Finished Module Code
21: Desktop Browsers - Testing & Fixing
22: Mobile - Android - Developing, Testing & Improving
-
Module Introduction (0:30)
-
Developing on Android Emulator (1) - Install Android Studio (1:03)
-
Developing on Android Emulator (2) - Setup Virtual Device (1:19)
-
Developing on Android Emulator (3) - Launch on Android Emulator (12:35)
-
Developing on Android Emulator (4) - Debugging (2:25)
-
Launch Live App on Android Emulator (4:57)
-
Developing on a Real Android Device (17:55)
-
Fix Background Sync Issue (13:37)
-
Show the Image in the Notification on Android (7:58)
-
Check the Background Sync Fix (9:51)
-
Finished Module Code
23: Mobile - iOS - Developing, Testing & Fixing
-
Module Introduction (0:27)
-
Developing on iOS Simulator (1) - Install Xcode & Launch the Simulator (1:05)
-
Developing on iOS Simulator (2) - Launch on iOS Simulator (8:06)
-
Developing on iOS Simulator (3) - Debugging (2:16)
-
How I Got Safari Simulator Debugging Working
-
Fix Footer on iOS Safari (6:13)
-
Developing on a Real iOS Device (8:59)
-
Fix the Camera & Post Image Button Issues (5:42)
-
Finished App Code
24: Assignment 2 - Progressive Web Apps
-
Assignment 2 - Progressive Web Apps (11:22)
-
Task 1 - Get App Running (4:51)
-
Task 2 - Change Theme Color (1:16)
-
Task 3 - Generate App Icons (1:45)
-
Task 4 - Install App Button (1) (1:55)
-
Task 5 - Install App Button (2) (1:53)
-
Task 6 - Enable Precache (2:22)
-
Task 7 - Caching Strategies (3:29)
-
Task 8 - Background Sync (1) (3:26)
-
Task 9 - Background Sync (2) (2:53)
-
Task 10 - Background Sync (3) (3:00)
-
Task 11 - Push Notifications - Notification Permission (1) (1:54)
-
Task 12 - Push Notifications - Notification Permission (2) (1:53)
-
Task 13 - Push Notifications - Create Push Subscription (1) (3:09)
-
Task 14 - Push Notifications - Create Push Subscription (2) (6:25)
-
Task 15 - Push Notifications - Store Push Subscription in Database (5:22)
-
Task 16 - “You’re subscribed!” Notification (2:00)
-
Task 17 - Send Push Notification from Backend (7:11)
-
Task 18 - Display Push Notification (3:51)
-
Task 19 - Handle Push Notification Click (4:14)
-
Task 20 - Host App on Firebase & Backend on Heroku (15:18)
25: What Next?
