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 (Legacy)
Watch PromoGet started now!
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.
Your Instructor
I spent 7 years working for various companies in the UK as a Web Developer (both front- and back-end) becoming highly skilled in HTML, CSS, JavaScript, jQuery, PHP and many more.
After becoming more interested in apps, I worked for 2 years as a Hybrid App Developer, creating cross-platform apps for the charity sector using technologies including Angular, Ionic, Vue.js and more.
I created my own successful app called Fudget (for iOS, Android, Mac & Windows) which is the highest user-rated personal finance app on iOS with over 2 million downloads. This eventually enabled me to leave my job and become a full-time Indie App Developer, working on my own apps.
I have a successful YouTube channel where I also share coding tutorials.
I'm super excited to share my knowledge here!
Course Curriculum
-
PreviewModule Introduction (0:29)
-
PreviewInstall Node.js and Quasar CLI (1:15)
-
StartCreate & Launch a New Quasar Project (not in PWA mode yet) (3:59)
-
StartUpdate: Quasar V1 Documentation
-
PreviewFolder Structure - Layouts, Pages & Routes (3:10)
-
PreviewInstall Vue Devtools on Chrome (1:03)
-
PreviewVue.js Basics (1:01)
-
PreviewClean up the Project (0:51)
-
PreviewDeveloping on Android & iOS (0:31)
-
PreviewModule Introduction (0:29)
-
PreviewPages and Routes (2:23)
-
PreviewFooter with Tab Navigation (4:09)
-
PreviewFooter - Add Some Style (4:42)
-
PreviewFooter - Change the Icon Set (4:40)
-
PreviewHeader - Styles (2:18)
-
PreviewHeader - Instagram-Style Title (Install Custom Font) (3:45)
-
PreviewDesktop - Hide Footer on Larger Displays (5:16)
-
PreviewDesktop - Show Navigation in Header on Larger Displays (3:22)
-
PreviewDesktop - Make the Header More Desktopy on Larger Displays (5:58)
-
PreviewDesktop - Constrain Content for Wider Screens (2:05)
-
StartFinished Module Code