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

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction & Course App: Quasagram

Lecture 2: What is Quasar?

Lecture 3: What is a Progressive Web App?

Lecture 4: How this Course is Structured

Lecture 5: My Editor & Software Setup

Lecture 6: Why do we need a Backend?

Chapter 2: Getting Started

Lecture 1: Module Introduction

Lecture 2: Install Node.js and Quasar CLI

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

Lecture 4: Update: Quasar V1 Documentation

Lecture 5: Folder Structure – Layouts, Pages & Routes

Lecture 6: Install Vue Devtools on Chrome

Lecture 7: Clean up the Project

Lecture 8: Vue.js Basics

Lecture 9: Developing on Android & iOS

Chapter 3: Layout, Pages & Routes – Start building Quasagram

Lecture 1: Module Introduction

Lecture 2: Pages and Routes

Lecture 3: Footer with Tab Navigation

Lecture 4: Footer – Add Some Style

Lecture 5: Footer – Change the Icon Set

Lecture 6: Header – Styles

Lecture 7: Header – Instagram-Style Title (Install Custom Font)

Lecture 8: Desktop – Hide Footer on Larger Displays

Lecture 9: Desktop – Show Navigation in Header on Larger Displays

Lecture 10: Desktop – Make the Header More Desktopy on Larger Displays

Lecture 11: Desktop – Constrain Content for Wider Screens

Lecture 12: Finished Module Code

Chapter 4: Design – Home Page

Lecture 1: Module Introduction

Lecture 2: Constrain the Page Content & Add Background Color

Lecture 3: Create a List of Posts – Post Header

Lecture 4: Create a List of Posts – Image

Lecture 5: Create a List of Posts – Caption and Date

Lecture 6: Add a Posts Array to Data Object

Lecture 7: Connect the Posts Array to the View with v-for

Lecture 8: Format the Date with a Filter

Lecture 9: Add a Mini-Profile for Desktop

Lecture 10: Hide the Mini-Profile on Mobile

Lecture 11: Finished Module Code

Chapter 5: Design – Camera Page

Lecture 1: Module Introduction

Lecture 2: Add a Photo Frame & Capture Button

Lecture 3: Add Text Fields & Submit Button

Lecture 4: Adapt the Design for Desktop

Lecture 5: Setup a Data Object for the Post Data

Lecture 6: Finished Module Code

Chapter 6: Native Device Features – Camera

Lecture 1: Module Introduction

Lecture 2: Display Camera Feed in Photo Frame

Lecture 3: getUserMedia – Browser Support and Polyfill

Lecture 4: Capture the Image

Lecture 5: Convert the Image to a Blob

Lecture 6: Add a Fallback Image Upload Field

Lecture 7: Display Fallback Image in Canvas

Lecture 8: Disable Camera After Capture & When User Leaves Page

Lecture 9: Finished Module Code

Chapter 7: Native Device Features – Location

Lecture 1: Module Introduction

Lecture 2: Get User’s Location Coordinates

Lecture 3: Get Users’s City & Country Names

Lecture 4: Handle Errors

Lecture 5: Add a Loading State

Lecture 6: Hide Location Button if Geolocation Not Supported

Lecture 7: Finished Module Code

Chapter 8: Firebase – Cloud Firestore Database & Storage

Lecture 1: Introduction to Firebase

Lecture 2: How we’re going to use Firebase

Lecture 3: Create a Firebase Project

Lecture 4: Cloud Firestore Database – Add Some Posts

Lecture 5: Add an Image to Storage

Chapter 9: Node.js & Express Backend

Lecture 1: Module Introduction

Lecture 2: Create & Launch our Backend Locally

Lecture 3: Add Auto Restarting with Nodemon

Lecture 4: Add a Simple Posts Endpoint

Lecture 5: Deploy our Backend Server (1) – Setup Heroku

Lecture 6: Deploy our Backend Server (2) – Deploy with Heroku Builds

Lecture 7: If you want to use Cloud Functions

Lecture 8: Finished Module Code

Chapter 10: Get Posts Endpoint

Lecture 1: Module Introduction

Lecture 2: Connect to the Firestore Database

Lecture 3: Posts Endpoint – Grab the Posts

Lecture 4: Display the Posts on the Home Page

Lecture 5: Sort Posts by Date

Lecture 6: Handle Errors

Lecture 7: Handle Loading

Lecture 8: Show a “No Posts Yet” Fallback

Lecture 9: Finished Module Code

Chapter 11: Create Post Endpoint

Lecture 1: Module Introduction

Lecture 2: Add createPost Endpoint

Lecture 3: Environment Variables to Manage our API URLs

Lecture 4: Send the Post Data to the Endpoint

Lecture 5: Parse the Form Data with Busboy

Lecture 6: Store the Field Data as a Post (1)

Lecture 7: Store the Field Data as a Post (2)