Udemy

Platform

English

Language

Web Development

Category

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

4.77 (429 reviews)

Students

15 hours

Content

May 2021

Last Update
Regular Price

EXCLUSIVE OFFER
Exclusive  Offer
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will 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


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

NOTE: This course is for Quasar V1 (with Vue 2). Quasar V2 (with Vue 3) is not covered in this course.


Screenshots

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

Content

Introduction

Introduction & Course App: Quasagram

What is Quasar?

What is a Progressive Web App?

How this Course is Structured

My Editor & Software Setup

Getting Started

Module Introduction

Install Node.js and Quasar CLI

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

Folder Structure - Layouts, Pages & Routes

Install Vue Devtools on Chrome

Vue.js Basics

Clean up the Project

Developing on Android & iOS

Layout, Pages & Routes - Start building Quasagram

Module Introduction

Pages and Routes

Footer with Tab Navigation

Footer - Add Some Style

Footer - Change the Icon Set

Header - Styles

Header - Instagram-Style Title (Install Custom Font)

Desktop - Hide Footer on Larger Displays

Desktop - Show Navigation in Header on Larger Displays

Desktop - Make the Header More Desktopy on Larger Displays

Desktop - Constrain Content for Wider Screens

Finished Module Code

Design - Home Page

Module Introduction

Constrain the Page Content & Add Background Color

Create a List of Posts - Post Header

Create a List of Posts - Image

Create a List of Posts - Caption and Date

Add a Posts Array to Data Object

Connect the Posts Array to the View with v-for

Format the Date with a Filter

Add a Mini-Profile for Desktop

Hide the Mini-Profile on Mobile

Finished Module Code

Design - Camera Page

Module Introduction

Add a Photo Frame & Capture Button

Add Text Fields & Submit Button

Adapt the Design for Desktop

Setup a Data Object for the Post Data

Finished Module Code

Native Device Features - Camera

Module Introduction

Display Camera Feed in Photo Frame

getUserMedia - Browser Support and Polyfill

Capture the Image

Convert the Image to a Blob

Add a Fallback Image Upload Field

Display Fallback Image in Canvas

Disable Camera After Capture & When User Leaves Page

Finished Module Code

Native Device Features - Location

Module Introduction

Get User’s Location Coordinates

Get Users’s City & Country Names

Handle Errors

Add a Loading State

Hide Location Button if Geolocation Not Supported

Finished Module Code

Firebase - Cloud Firestore Database & Storage

Introduction to Firebase

How we’re going to use Firebase

Create a Firebase Project

Cloud Firestore Database - Add Some Posts

Add an Image to Storage

Node.js & Express Backend

Module Introduction

Create & Launch our Backend Locally

Add Auto Restarting with Nodemon

Add a Simple Posts Endpoint

Deploy our Backend Server (1) - Setup Heroku

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

If you want to use Cloud Functions

Finished Module Code

Get Posts Endpoint

Module Introduction

Connect to the Firestore Database

Posts Endpoint - Grab the Posts

Display the Posts on the Home Page

Sort Posts by Date

Handle Errors

Handle Loading

Show a “No Posts Yet” Fallback

Finished Module Code

Create Post Endpoint

Module Introduction

Add createPost Endpoint

Environment Variables to Manage our API URLs

Send the Post Data to the Endpoint

Parse the Form Data with Busboy

Store the Field Data as a Post (1)

Store the Field Data as a Post (2)

Upload the Image (1) Configure Google Cloud Storage

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

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

Add Validation

Handle Errors & Successes

Handle Loading

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

Finished Module Code

Assignment 1 - Database & Backend

Task 1 - Get the Project Running

Task 2 - Create a Firebase Project

Task 3 - Create a Cloud Firestore Database

Task 4 - Setup a Node.js & Express Backend

Task 5 - Initialize Firestore Database

Task 6 - Tasks Endpoint

Task 7 - Display Tasks in App

Task 8 - Create Task Endpoint (1)

Task 9 - Create Task Endpoint (2)

Task 10 - Create Task Endpoint (3)

Task 11 - Add a Loading Screen

PWA - Setup and Manifest File

PWA Introduction

Launch Quasagram in PWA Mode

Manifest File

Manifest Properties

Finished Module Code

PWA - Icons for All Devices

Module Introduction

Install Icon Genie

Create the Source Icon

Generate the Icons

Finished Module Code

PWA - Home Screen Installation

Module Introduction

Create the App Install Banner

Add an App Icon to the Banner

Show App Install Banner on Desktop

Only show App Install Banner when App Installable

Show Native Install Prompt if they click Yes

Allow the User to Hide the App Install Banner

Animate the App Install Banner

Finished Module Code

PWA - Service Workers & Workbox

Module Introduction

What is a Service Worker?

Service Worker Events

What is Workbox?

src-pwa Folder

Basic Caching & Offline Capabilities

Enable Custom Service Worker File

PWA - Precaching

Module Introduction

What is Precaching?

Enable Precache

Build the App for Production & Switch to Live Backend

Host the App on Firebase

Show Precaching in Live App

A Quicker Way to Go Online / Offline

Finished Module Code

PWA - Caching Strategies

Caching Strategies Introduction

What Caching Strategies Can We Use?

Stale While Revalidate Strategy as a Catch All for Most Requests

Cache First Strategy for our Google Font

Network First Strategy for Posts Request

Finished Module Code

PWA - Background Sync

Background Sync Introduction

Check for Background Sync Support

Create Post Background Sync

Redirect to Home Page if Post Created Offline

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

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

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

Style the Offline Posts Differently

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

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

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

Finished Module Code

PWA - Push Notifications

Module Introduction

How Push Notifications Work

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

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

Request Notifications Permission

Display a Notification from Our App

Notification Options

Display a Notification Using the Service Worker

Notification Actions

Handle Notification Clicks

Handle Notification Closed

Check for Existing Push Subscription

Create a New Push Subscription

Secure the Push Subscription with Web Push (1)

Secure the Push Subscription with Web Push (2)

Store The Subscription in Cloud Firestore Database (1)

Store The Subscription in Cloud Firestore Database (2)

A Note About Push Subscriptions & Service Workers

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

If You’re Using Cloud Functions (Important)

Listen for Push Notifications in the Service Worker

Display the Real Push Notification

Open our Home Page on Notification Click

Send the Open URL from the Backend

Finished Module Code

Desktop Browsers - Testing & Fixing

Module Introduction

Hosting the App

Firefox - Testing

Firefox - Fixing Issues

Safari - Testing

Safari - Fixing Issues

Testing Edge & Internet Explorer on a Mac with VirtualBox

Edge

Internet Explorer

Finished Module Code

Mobile - Android - Developing, Testing & Improving

Module Introduction

Developing on Android Emulator (1) - Install Android Studio

Developing on Android Emulator (2) - Setup Virtual Device

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

Developing on Android Emulator (4) - Debugging

Launch Live App on Android Emulator

Developing on a Real Android Device

Fix Background Sync Issue

Show the Image in the Notification on Android

Check the Background Sync Fix

Finished Module Code

Mobile - iOS - Developing, Testing & Fixing

Module Introduction

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

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

Developing on iOS Simulator (3) - Debugging

Fix Footer on iOS Safari

Developing on a Real iOS Device

Fix the Camera & Post Image Button Issues

Finished App Code

Assignment 2 - Progressive Web Apps

Task 1 - Get App Running

Task 2 - Change Theme Color

Task 3 - Generate App Icons

Task 4 - Install App Button (1)

Task 5 - Install App Button (2)

Task 6 - Enable Precache

Task 7 - Caching Strategies

Task 8 - Background Sync (1)

Task 9 - Background Sync (2)

Task 10 - Background Sync (3)

Task 11 - Push Notifications - Notification Permission (1)

Task 12 - Push Notifications - Notification Permission (2)

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

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

Task 15 - Push Notifications - Store Push Subscription in Database

Task 16 - “You’re subscribed!” Notification

Task 17 - Send Push Notification from Backend

Task 18 - Display Push Notification

Task 19 - Handle Push Notification Click

Task 20 - Host App on Firebase & Backend on Heroku

What Next?

What Next?

Bonus Lecture: Learn More From Me


Reviews

J
Jeff11 January 2021

Excellent Course Danny did a great job to make "study" become professional Quasar framework apps developer ?

A
Andrzej6 January 2021

Hi Danny! You deserve every penny earned from this course. It was a real pleasure taking this one. Especially showing the way of creating and building an app, issues tackling and testing. Frankly, I omitted the parts of assignments because I work on something of my own, but I will keep them as reference and to get back as needed. I'm giving you the best marks and highly recommend to whoever wants to master VUE on steroids, as I call Quasar ;) Big thanks and I hope to meet you sometime in the future. Andrzej

D
Durojaye21 December 2020

This is definitely one of the best courses I've taken so far on PWA. The author replicated the real life experience of app development, including the mistakes you'd make and the steps required in fixing them. I thoroughly enjoyed the course all through and I hope to take more courses from the author.

A
Alexander6 December 2020

Danny verliert keine Zeit, alles auf den Punkt, viel zu lernen und ich liebe seinen trockenen Humor, genialer Lehrer

R
Reece8 November 2020

Danny has two courses that seem extremely similar. I would have appreciated more clarity about the differences. The courses are https://www.udemy.com/course/pwa-with-vuejs-quasar-firebase/ and https://www.udemy.com/course/quasarframework/ .

C
Corne26 October 2020

This is just an absolutely amazing course. Not only does this course follow industry practices when it comes to coding but also a lot of useful features. This includes but not limited a camera library, how to obtain the users location details, running a back end and best of all how Quasar can assist you to build very powerful UI by using there framework. Then there is quite a few sections on PWA as well. Danny is not only one of the best teachers that does not overwhelm you with too much information but highlights the key concepts in order for you to understand the principle. He also references websites you could go to should you require more information! I will highly recommend Danny Quasar Framework with this course as this will teach you other principles that could be easily applied to this course. Also be sure to check out his Youtube channel as there are other content available that was very useful and new content is added once in a while. I also want to highlight that the 2 assignments in this course wasn't set to over complicate you with super complicated assignments to complete but rather feels like a refresher just to recap on everything you learned. Danny You Are a true LEGEND!!!!. Hope we can can see some more Quasar courses in the near Future! :) Thanks for this. You changed my life completely!

R
Roland10 October 2020

A lot of things I already know are presented in this video, but if I learn one new thing, the money will be worth of it. And I already did! I enjoy the course a lot! Thank you! And the whole family loves when you say "button" or "jump". :-P

J
Jean-Philippe2 October 2020

A really comprehensive and helpful course in order to understand all necessary fondations to achieve our own web application with Quasar Framework (Vue.js). A really great ressource !

C
Carlos1 October 2020

Looks very promising so far. Quality audio / video, well explained course contents, knowledgeable instructor.

D
David1 September 2020

Fantastic job, Danny! This is really valuable material. My go-to courses on Udemy have recently been PWA and awesome-todo. Quasar is simply wonderful. Any chance of a follow-up to this course with a Vuex store or any other features that you can think of to enhance an already great app? I would happily purchase it. Cheers!

D
Dhaval24 August 2020

I got to learn many things from this course. as i am working in quasar since some time and dont know about how to create pwa! but yeah this course is one stop solution for quasar pwa! Thanks again!!

A
Andrew16 August 2020

I'm very satisfied with the course. I should say that it's a rear case of a project-driven course that is packed with real-world dev practices and strategies. The author of the course is indeed a professional developer who knows his craft. The only suggestion I could make is to spend a bit more time explaining motivation and underlying concepts so the course could be a bit more approachable for newbies. But since I already use Vue for more than 4 years and have experience with Nuxt - everything went really smoothly for me and I was able to watch almost all lectures on 1.25x speed coding in parallel without stopping the video. I'm looking forward for a long term support of this course since I'm sure I will come back to it not once during implementing my real-world projects on the suggested stack. I think I also could apply gained knowledge with Nuxt instead of Quasar which is also great ?

G
Guilherme15 August 2020

This dude is awesome! Already did 2 courses with him, this one seems to be EVEN BETTER! Congratz Danny!

A
Andy9 August 2020

Good match, but I'd like to hear discussion about how/if PWA replaces or compliments the installed codova version of a quasar app

P
Page7 August 2020

I've taken a bunch of courses on here and other places and I've decided that Danny is the best instructor. He is clear and concise and answers questions in a timely manner. And I love Quasar! You should definitely check out all of Danny's stuff.


Coupons

DateDiscountStatus
11/26/202030% OFFExpired
2/12/202130% OFFExpired

3240810

Udemy ID

6/16/2020

Course created date

8/13/2020

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram