Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

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

Name: Quasar V1: PWA (with Vue JS 2, Firebase, NodeJS & Express)
Rating: 4.8 (685 reviews)

Create a Beautiful Instagram-Style Progressive Web App with Vue 2, Quasar V1, Firebase, NodeJS & Express

Created byDanny Connell

Last updated 3/2022

English

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

Course content

25 sections • 239 lectures • 14h 56m total length

Introduction & Course App: Quasagram7:12
What is Quasar?1:43
What is a Progressive Web App?2:46
How this Course is Structured6:21
Develop a standard web app with Quasar and Vue.js 2, then progressively implement PWA features, including service workers, pre caching, caching strategies, background sync, and push notifications, using Firebase.
My Editor & Software Setup5:41
Why do we need a Backend?0:34

Module Introduction0:29
Pages and Routes2:23
Footer with Tab Navigation4:09
Footer - Add Some Style4:42
Footer - Change the Icon Set4:40
Header - Styles2:18
Header - Instagram-Style Title (Install Custom Font)3:45
Select an instagram-style font from Google fonts (grand hotel), add it via a global css class, and apply it to the toolbar title with Quasar typography and a 30px size.
Desktop - Hide Footer on Larger Displays5:16
Desktop - Show Navigation in Header on Larger Displays3:22
Desktop - Make the Header More Desktopy on Larger Displays5:57
Desktop - Constrain Content for Wider Screens2:05
Finished Module Code0:12

Module Introduction0:26
Constrain the Page Content & Add Background Color2:21
Create a List of Posts - Post Header2:04
Create a List of Posts - Image1:23
Create a List of Posts - Caption and Date1:52
Create a list of posts with captions and dates in a quasar v1 pwa, refine typography with the text caption class, and apply a gray color palette.
Add a Posts Array to Data Object1:58
Add a posts array to data object by defining a data method that returns post objects with id, caption, epoch date, location, and image, then duplicate entries to populate feed.
Connect the Posts Array to the View with v-for2:26
Format the Date with a Filter2:58
Learn to format dates in a Quasar v1 pwa using the nice date filter and Quasar date utils, to display full month, day, and 12-hour time.
Add a Mini-Profile for Desktop6:06
Hide the Mini-Profile on Mobile2:53
Finished Module Code0:12

Module Introduction0:47
Display Camera Feed in Photo Frame3:59
getUserMedia - Browser Support and Polyfill2:02
Capture the Image7:00
Convert the Image to a Blob2:31
Capture an image, convert the canvas data URL to a blob, creating a real image file to upload to Firebase storage instead of storing large data in a database.
Add a Fallback Image Upload Field6:12
Display Fallback Image in Canvas5:16
Disable Camera After Capture & When User Leaves Page3:06
Finished Module Code0:12

Module Introduction0:39
We use the JavaScript geolocation API to obtain user coordinates, update cover page location with city and country from Geocode API, and handle errors, hiding when geolocation is unsupported.
Get User’s Location Coordinates3:17
Get Users’s City & Country Names6:00
Handle Errors2:33
Add a Loading State4:10
Hide Location Button if Geolocation Not Supported2:07
Finished Module Code0:12

Module Introduction1:10
Create & Launch our Backend Locally6:05
Add Auto Restarting with Nodemon2:42
Add a Simple Posts Endpoint1:37
Deploy our Backend Server (1) - Setup Heroku2:49
Deploy our Backend Server (2) - Deploy with Heroku Builds6:13
Deploy backend to Heroku using builds plugin, run npm deploy, and monitor logs to fix issues. Bind the server to process.env.PORT and connect to Firestore data for live posts.
If you want to use Cloud Functions10:25
Finished Module Code0:12

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)

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.

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)

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

What you'll learn

Explore related topics

Course content

Introduction6 lectures • 24min

Getting Started9 lectures • 12min

Layout, Pages & Routes - Start building Quasagram12 lectures • 39min

Design - Home Page11 lectures • 25min

Design - Camera Page6 lectures • 18min

Native Device Features - Camera9 lectures • 31min

Native Device Features - Location7 lectures • 19min

Firebase - Cloud Firestore Database & Storage5 lectures • 18min

Node.js & Express Backend8 lectures • 31min

Get Posts Endpoint9 lectures • 24min

Requirements

Description

Who this course is for: