Skip to content

ReactDOM

Search
Close this search box.

Learn Quasar 2024 – Best Quasar Courses & Best Quasar Tutorials

Best Quasar Courses 2021

 

Best Quasar Tutorials 2021

Quasar Framework: Cross-Platform Vue JS Vuex & Firebase Apps

In this course, I’ll show you how to use Quasar Framework (along with Vue JS 2, Vuex, and Firebase) to build real-world cross-platform applications using a single Vue JS code base; and prepare these apps for production and deploy them to all major platforms – web, iOS, Android, Mac and Windows. Throughout this course, we’ll be creating a real-world app called Awesome Todo. In this app we can add, edit or delete tasks and mark them as completed. We can also sort tasks by name or date and search within tasks using a search bar.

It will also have a Settings page, with 2 actual settings that change how the app works – and that persist when the app is closed and restarted (or the browser reloaded on the web version). It will also include a help page, a “visit our website” link and a “email us” link.

The app will have its own backend created using a Firebase Realtime database. Users can sign up, log in, and see their data synced in real time across all of their devices.

We will prepare the production of the app for all the different platforms – Web, iOS, Android, Mac and Windows.

You will learn all the basics of the Quasar Framework, including the Quasar CLI, Quasar components, Quasar plugins, Quasar directives, platform detection, layouts, theme and various Quasar utilities. .

I’ll also show you all the basics of Vue.js, including data binding, events, calculated properties, components, directives, filters, lists, and lifecycle hooks.

You’ll learn how to manage your app’s state using Vuex, where I’ll cover state, mutations, actions, and setters.

I’ll cover all the basics of Firebase including authenticating, reading data, writing data, and protecting your data with database rules.

By the end of this course, you will be able to build your own real world apps, with real backends that work on all different platforms.

You will learn:
How to Build a Real Cross-Platform App for Web, iOS, Android, Mac, and Windows Using Quasar Framework and Firebase
How to manage the state of your app using Vuex
How to create a back end for the app using Firebase Realtime Database – including user authentication, reading and writing data
All the essentials of Quasar Framework and VueJS

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

In this course, I’ll show you how to use Vue JS, Quasar Framework, and Firebase to create an amazing Progressive Web App (PWA).

We are going to create a great Instagram clone called Quasagram.

In this application we can display a list of messages; each post has an image, location, caption, and the date the image was taken.

We can go to the user’s camera and take a photo, enter a caption, find the user’s location, and create a new post.

It will have a beautiful, responsive design that fits all desktop and mobile computers.

We will store all of our data in a Firebase Cloud Firestore database.

We will store our photos in Firebase Storage.

We will be creating our own NodeJS & Express backend with several different endpoints to interact with the database.

We will incorporate all the features of 5 Core PWA:

Installation of the home screen
Caching
Caching strategies
Synchronization in the background
Push notifications

We’ll be running the app on iOS, Android, and all major desktop browsers, and it will even fold down gracefully for older browsers like Internet Explorer.

You will also learn about Service Workers, Workbox, Firebase Cloud Firestore Database, Firebase Storage, NodeJS & Express and more.

By the end of this course, you will be able to build your own progressive web applications using Vue JS, Quasar Framework, Firebase, NodeJS, and Express.

You will learn:
How to create a beautiful Instagram PWA clone with Vue JS, Quasar and Firebase
How to Integrate Top 5 PWA Features: Home Screen Installation, Caching, Caching Policies, Background Sync, and Push Notifications
How to make a PWA fully functional offline
How to create a stunning, responsive design that fits all mobiles and desktops
How to access the device’s native camera and location
Everything about Service Workers, Workbox, Firebase Cloud Firestore, Firebase Storage, NodeJS & Express and much more

Weather App with Vue JS & Quasar (for Mobile, Desktop & Web)

In this short course, I’ll show you how to use Vue JS (and Quasar Framework) to build a beautiful weather app from scratch – and get it to work and run on 5 different platforms – Web, iOS, Android, Mac and Windows.

In this app, we can get the user’s location and display the weather where they are (using the OpenWeatherMap API), all in a beautifully designed layout.

We can also search for a location using the search bar.

We are going to create some awesome icons and start screens for all the different devices.

We will configure simulators for testing on Android and iOS

And set up a virtual machine using Virtualbox to test on Windows.

We’ll even run the app on real iOS and Android devices.

If you want a quick introduction to building cross-platform applications using Vue JS, this course is for you.

You will learn:
How to Create a Beautiful Cross-Platform Weather App for Android, iOS, Mac, Windows, and Web Using Vue JS & Quasar Framework
How to get user location on all devices
How to create icons and splash screens for all devices
How to launch the app for development on Mac, Windows, iOS, and Android
How to set up simulators for iOS and Android
How to debug your app on all platforms
How to launch and debug the app on real iOS and Android devices
A quick introduction to building cross-platform applications with Vue JS and Quasar Framework

© 2023 ReactDOM

As an Amazon Associate I earn from qualifying purchases.