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

Begin with Quasar v1 basics by creating a new Quasar project, exploring its structure and layouts, and using Vue dev tools to streamline development for Android and iOS.

Install node.js from nodejs.org, then install the Quasar CLI globally via npm, optionally with sudo, and finally create a new project using the quasar create command.

Learn to create and launch a new Quasar project using the Quasar Create command, configure settings, and run a standard SPA before enabling PWA features.

Explore the Quasar project's folder structure, focusing on the source directory. Track index.html, the main view component, layouts, pages, assets, boot files, and routes.

Install the view devtools extension in chrome, then use chrome dev tools to inspect vue components, modify view data such as the docs title, and view events.

Restore the original quasar page by cleaning up the project, deleting view files, renaming the index file to view, and reloading the template with flex classes and the quasar image.

master the basics with two free videos covering core concepts, displaying data lists, and breaking components into child components, then follow along by duplicating index.view to index.view.old.

Develop and test a Quasar PWA on Chrome first, then extend to Android and iOS using simulators or real devices, following the mobile sections for cross-platform development.

Set up the frame, create routes for the home page and uncomfort page, design the layout of Iraq, and add icons with an Instagram-style header title and photo navigation.

Set up two pages in a Quasar PWA app, a home page and a camera page, and configure routes to navigate between them.

Implement a footer with tab navigation by removing the drawer, adding a photo component, and creating two tabs for home and camera linked to routes.

Style the mobile view in Quasar by removing the toolbar, using white and gray palette with text and background classes, and adding a border for a clean primary-colored footer navigation.

Learn how to switch Quasar navigation icons from material to eva icons, configure the extras in the project, and use eva icon names like eva-home-outline to customize icons and styling.

Apply header styles for the Quasar Gram app by setting a white background, dark gray text, a border, and mobile centered title through CSS adjustments, while removing unused elements.

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.

Learn to tailor a Quasar PWA layout by using the extra small breakpoint and custom small screen only and large screen only classes to hide elements on larger displays.

Add a desktop-only header navigation using Quasar boltons with a flat round camera icon. Tune size and density, and wire buttons to the camera and home routes for large screens.

Explore making the Quasar v1 pwa header taller on desktop by aligning the title left of the logo and camera button, and adding a vertical separator via media queries.

Constrain content with a max width of 975 pixels and center it using side margins. Apply the constrain class to the header toolbar to keep desktop and mobile layouts consistent.

Design the Bira homepage by listing posts with location, image, caption, and date in a post array, then bind to the view with a date format filter and responsive layout.

Remove centered flex from the home page, constrain content with a dedicated class, and add page padding using Quasar utilities. Apply a gray background via the layout container for consistency.

Build a mobile-first post list using a Quasar card component to display avatar, username, location, image, and date, and customize the card with a post class for styling.

Add an image to a post using the image component, and set the card post to a minimum height of 200 pixels for better layout.

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 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-for, assign a key, bind location, image URL, caption, and date, apply bottom margin, and format the date for display.

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.

Build a desktop two-column layout in Quasar v1 PWA using Vue.js 2, with left posts column and a right mini profile docked at the top via a 12-point grid.

Hide the mini profile on mobile by applying a large-screen-only class, making posts full width, and using Quasar's responsive grid breakpoints to adjust column widths from mobile to desktop.

Design a cover page with a photo frame that displays the camera feed and captured photo, with a caption, and define a data object to store postdated.

Add a photo frame to the cover page to display the camera feed and captured photo; style with a 2-pixel solid dark grey border and a large round capture button.

Builds a Quasar v1 UI with text fields for caption and location, using the TextField component, dense spacing, and an append directive for a right-side location button and submit button.

Adapt the mobile design for desktop by constraining the page width to 600 pixels and reducing wide inputs to half width, using responsive classes for a cohesive desktop layout.

Create a post data object to hold caption, location, id, date, and photo, using Quasar UUID for a unique id and current timestamp for the date.

Learn to enhance cover page with native device features, request camera access, display feed in a photo frame, capture images as blobs for backend, and add a fallback image.

this lecture shows displaying the user's camera feed in a photo frame by replacing the image with a full-width video element, using getUserMedia and auto play via a mounted hook.

Learn browser compatibility for getUserMedia and apply a polyfill installed via npm to ensure it works across browsers, including older Chrome and Firefox with prefixes.

Capture video frame by drawing it onto a canvas, sync canvas size to the video, and toggle visibility with an image captured flag so the canvas shows after capture.

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.

Provide a fallback image upload field for the Quasar PWA when camera access is unavailable, using a file upload component and previewing the selected image.

Learn how to capture a user-selected image, store it in a post's photo property, and render it on a canvas using a capture image fallback routine.

Implement a disable camera flow in a Vue-based page by stopping the video track after capture and before the page is destroyed, ensuring the red camera indicator turns off.

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.

Use the geolocation api to fetch the user’s latitude and longitude on a button click, log the position, and handle errors with a timeout option.

Use latitude and longitude coordinates to call a reverse geocoding API with axios, fetch city and country data in json, and populate the location field.

Implement robust error handling for geolocation and geocode calls using Quasar dialogues, wiring a location error method and a user-friendly alert for internet issues.

Add a loading state to the location field using Quasar's loading prop, bound to a location loading data property, and toggle visibility during location calls and responses.

Hide the location button when geolocation is not supported by the browser, using a computed property called location supported to detect navigator.geolocation and conditionally render the button with v-if.

Explore how Firebase provides authentication, a Cloud Firestone database, storage, and hosting, and how a custom NodeJS and Express backend interacts via endpoints to manage data and trigger push notifications.

Explore how we use Firebase to store posts and push subscriptions in Cloud Firestore database, manage images in storage, and host the app while monitoring usage to stay within limits.

Learn to create a Firebase project by logging into Firebase, naming the project, disabling Google Analytics, and accessing the console to set up databases and storage for your PWA.

Create a cloud Firestore database in test mode, add a posts collection, then populate documents with fields like id, caption, location, image URL, and date to build a two-post dataset.

Upload images to Firebase storage, retrieve their URL, and update a post’s image, then plan automatic uploads with a Node and Express backend.

Build a node express backend for quasar v1 pwa. Set up a local server and endpoints to interact with the database, and deploy to free hosting.

Set up a local backend with express, initialize npm, install express, and create a hello world endpoint, then run node and test at localhost:3000.

Install nodemon globally to automatically restart the server on code changes. Add a start script in package.json to run node index.js and confirm restarts with console logs and page reload.

Create a /posts endpoint that returns a simple array of posts with caption and location, including Golden Gate Bridge in San Francisco and London Eye in London.

deploy your backend to Hiroku with a single terminal command by signing up, creating an app, installing the Hiroku CLI and Hiroku Builds plugin, and deploying from a local directory.

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.

Learn how to get started with Firebase cloud functions, initialize and deploy a simple endpoint, and compare cloud functions to a Node.js Express backend for building your PWA.

This module connects to the client database, fetches posts, displays them on the home page, sorts by date, and shows a skeleton loading state with a no-posts fallback.

Connect to the Cloud Firestore database by installing the Firebase Admin SDK in the backend, initialize Cloud Firestore on your own server, and configure the service account key.

Grab real post data from Firestore by querying the posts collection, build a post array from each document, and send it to the browser via the endpoint.

Display posts on the home page by fetching them with a get posts method triggered in the created hook using axios, and populate the posts array with response data.

Sort posts by the date field in descending order on the backend, using Firebase query to display the latest post first.

Implement error handling by logging backend errors and displaying an error dialog on the cover page, then test by changing the backend URL to point to something that doesn't exist.

Implement a loading state for posts in a Quasar Vue app by toggling a loading posts flag and using skeleton components with a loading text, and refine the avatar size.

Show a friendly no posts yet message when the posts array is empty and loading is complete, replacing the empty screen with a clear fallback.