DEV Community: Abiola Esther

How to Build a Movies App with Vue, Auth0 and Cloudinary

Abiola Esther — Sat, 16 Oct 2021 18:59:08 +0000

Vue JS is a progressive javascript framework that is used to develop user-friendly and interactive user interfaces. It is a flexible framework that can be integrated with different platforms without any hassle. It is also very compatible and easy to use for the development process.

Auth0 is a flexible, drop-in solution to add authentication and authorization services to your applications. You can avoid the cost, time, and risk that come with building your solution to authenticate and authorize users.
Cloudinary is a Software-as-a-Service (SaaS) solution for managing all your web or mobile application’s media assets in the cloud. It enables you to programmatically add image and video upload, transformation, optimization, and delivery capabilities to your applications via easy-to-use REST APIs. Cloudinary offers different services such as:

Upload widget, API, and search
Remote fetch, auto-backup, and revision tracking
Image and video transformations
Video transcoding and adaptive streaming
High-performance

In this tutorial, we will learn how to build a movies application that uses Auth0 to integrate authentication and Cloudinary to enable media optimization and transformation.

Prerequisites

This tutorial assumes the reader has the following:

Node installed on their local development machine. You can verify if you do by running the command below in your terminal.

node -v

If otherwise, download from here

2.A basic knowledge of HTML, CSS, JavaScript, and Vue

Tutorial Demo

Yay! In this section, we will build a movies app in Vue and integrate auth0 and Cloudinary into the application.
Check out the demo on Codesandbox
For an easier understanding of this section, we will go through each part step by step.

Create a Vue Project

First, let’s start up a Vue application by using installing the vue CLI:
Install the Vue command-line interface (CLI):

npm install -g @vue/cli

Then, create the Vue app using this command:

vue create movies-app

With these steps, our vue application has been successfully created, switch to the path using cd movies-app, and run the command below to start the application.

npm run serve

Getting Started with Auth0.

To get started with Auth0, Firstly sign up to create a free account -

Follow the sign-up steps and create a tenant domain name and region or you can continue with the default.

The tenant domain name will be the URL used to access resources such as the Auth0 API.

From your Auth0 Dashboard, create a new application as shown below.

Auth0 offers various types of applications, It can be a native app, SPA (Single Page App), web app or even CLIs. For this tutorial, we are building a Vue application which is a SPA (Single Page App).

Next, we would configure our application settings to meet our needs.

In the Application URIs,
Allowed Callback URLs - is the URL that Auth0 can use to redirect your users after they successfully log in.
Allowed Logout URLs - is the URL that Auth0 can use to redirect your users after they log out.
Allowed Web Origins - to enable silent log-in between user sessions. This way, the user doesn't have to log in to the website every time the page is refreshed.
For our example, all URLs will be:

http://localhost:8080

Scroll down and click 'Save Changes'. Now we have our Auth0 all set up.

Getting Started with Cloudinary

To get started, If you don't have a Cloudinary account yet, you can sign up for a free account now.
The sign-up form includes an option to select the cloud name for your account. That cloud name will appear in the URL of every asset you deliver from Cloudinary account, so you should pick a cloud name that's a good representation of your organization, application, or website. If you don't choose one, a randomly generated cloud name will be assigned.

Integrating Auth0 SDK in a Vue App.

Auth0 SDK libraries make it easy to integrate and interact with Auth0 for single-page applications. To set up the SDK for our Vue app, we firstly create a simple Vue.js plugin that acts as a reusable and reactive wrapper around the Auth0 SPA SDK, making it much easier to work with the asynchronous methods of the SDK.

Firstly, install the Auth0 SPA SDK

npm install @auth0/auth0-spa-js

Then we create an auth folder in the src folder, and then create a new file called index.js to implement the plugin.
In the Index.js

Import the auth0 SDK into the plugin

     import Vue from "vue";
    import createAuth0Client from "@auth0/auth0-spa-js";

Define a default action to perform after authentication

    const DEFAULT_REDIRECT_CALLBACK = () =>
      window.history.replaceState({}, document.title, window.location.pathname);

Initialize the instance and creates an instance of the Auth0 SDK.

    let instance;

    /** Returns the current instance of the SDK */
    export const getInstance = () => instance;


    export const useAuth0 = ({
      onRedirectCallback = DEFAULT_REDIRECT_CALLBACK,
      redirectUri = window.location.origin,
      ...options
    }) => {
      if (instance) return instance;

      // The 'instance' is simply a Vue object
      instance = new Vue({
        data() {
          return {
            loading: true,
            isAuthenticated: false,
            user: {},
            auth0Client: null,
            popupOpen: false,
            error: null
          };
        },
    }

Create the different methods to handle authentication

    methods: {
          /** Authenticates the user using a popup window */
          async loginWithPopup(options, config) {
            this.popupOpen = true;

            try {
              await this.auth0Client.loginWithPopup(options, config);
              this.user = await this.auth0Client.getUser();
              this.isAuthenticated = await this.auth0Client.isAuthenticated();
              this.error = null;
            } catch (e) {
              this.error = e;
              // eslint-disable-next-line
              console.error(e);
            } finally {
              this.popupOpen = false;
            }

            this.user = await this.auth0Client.getUser();
            this.isAuthenticated = true;
          },
          /** Handles the callback when logging in using a redirect */
          async handleRedirectCallback() {
            this.loading = true;
            try {
              await this.auth0Client.handleRedirectCallback();
              this.user = await this.auth0Client.getUser();
              this.isAuthenticated = true;
              this.error = null;
            } catch (e) {
              this.error = e;
            } finally {
              this.loading = false;
            }
          },
          /** Authenticates the user using the redirect method */
          loginWithRedirect(o) {
            return this.auth0Client.loginWithRedirect(o);
          },
          /** Returns all the claims present in the ID token */
          getIdTokenClaims(o) {
            return this.auth0Client.getIdTokenClaims(o);
          },
          /** Returns the access token. If the token is invalid or missing, a new one is retrieved */
          getTokenSilently(o) {
            return this.auth0Client.getTokenSilently(o);
          },
          /** Gets the access token using a popup window */

          getTokenWithPopup(o) {
            return this.auth0Client.getTokenWithPopup(o);
          },
          /** Logs the user out and removes their session on the authorization server */
          logout(o) {
            return this.auth0Client.logout(o);
          }
        },
        /** Use this lifecycle method to instantiate the SDK client */
        async created() {
          // Create a new instance of the SDK client using members of the given options object
          this.auth0Client = await createAuth0Client({
            ...options,
            client_id: options.clientId,
            redirect_uri: redirectUri
          });

          try {
            // If the user is returning to the app after authentication..
            if (
              window.location.search.includes("code=") &&
              window.location.search.includes("state=")
            ) {
              // handle the redirect and retrieve tokens
              const { appState } = await this.auth0Client.handleRedirectCallback();

              this.error = null;

              // Notify subscribers that the redirect callback has happened, passing the appState
              // (useful for retrieving any pre-authentication state)
              onRedirectCallback(appState);
            }
          } catch (e) {
            this.error = e;
          } finally {
            // Initialize our internal authentication state
            this.isAuthenticated = await this.auth0Client.isAuthenticated();
            this.user = await this.auth0Client.getUser();
            this.loading = false;
          }
        }
      });

      return instance;
    };

Export the plugin to use as a wrapper to access the Auth0 SDK

    export const Auth0Plugin = {
      install(Vue, options) {
        Vue.prototype.$auth = useAuth0(options);
      }
    };

Adding the plugin to the Vue application

In the main.js file,use the Vue.use() method to install the plugin to the application.

     // Import the plugin here
     import { Auth0Plugin } from "./auth";

     // Install the authentication plugin here
     Vue.use(Auth0Plugin, {
       domain: process.env.VUE_APP_AUTH0_DOMAIN,
       clientId : process.env.VUE_APP_CLIENT_ID,
       onRedirectCallback: appState => {
         router.push(
           appState && appState.targetUrl
             ? appState.targetUrl
             : window.location.pathname
         );
       }
     });

Adding user authentication to the app.

To implement the authentication, we will use the loginWithRedirect method, which means that when users click the login button the URL will redirect to Auth0 hosted login page(Universal Login). After they have successfully authenticated they will be redirected back to our application.
Create Navbar Component file, add two buttons that enable the user to sign in and log out.

    <template>
      <nav>
       <li >   <router-link to="/"> MUVIES </router-link> </li>
       <div class='nav-sub'>
            <li v-if="$auth.isAuthenticated">  <router-link to="/movies"> Movies </router-link> </li>
             <!-- Check that the SDK client is not currently loading before accessing is methods -->
        <div v-if="!$auth.loading">
          <!-- show login when not authenticated -->
          <li> <button v-if="!$auth.isAuthenticated" @click="login">Sign In</button> </li>
          <!-- show logout when authenticated -->
          <li> <button v-if="$auth.isAuthenticated" @click="logout">Log out</button> </li>
        </div>

       </div>
      </nav>
    </template>

Using the v-if directives, we set up conditionals to display either the sign-in or log-out button depending on whether the user is authenticated.

    <script>
    export default {
      name: "Navbar",
      methods: {
        // Log the user in
        login() {
          this.$auth.loginWithRedirect();
        },
        // Log the user out
        logout() {
          this.$auth.logout({
            returnTo: window.location.origin
          });
        }
      }
    };
    </script>

Then we implement the methods for the buttons using the this.$auth property.
With these, we have successfully set up user authentication for our application. You can also go further to add an extra feature to display the user profile details.

Moving forward, we will setup a protected route to allow only authenticated users to view the movies page.

Adding a Navigation Guard

Navigation guards provided by vue-router are primarily used to guard navigations either by redirecting it or canceling it. To implement this in our application, we create a new file in the auth folder called authGuard.js, and use the getInstance method of the authentication service to implement a function that will prevent a route from being accessed by an unauthenticated user:

    import { getInstance } from "./index";

    export const authGuard = (to, from, next) => {
      const authService = getInstance();
      const fn = () => {
        // If the user is authenticated, continue with the route
        if (authService.isAuthenticated) {
          return next();
        }
        // Otherwise, log in
        authService.loginWithRedirect({ appState: { targetUrl: to.fullPath } });
      };
      // If loading has already finished, check our auth state using `fn()`
      if (!authService.loading) {
        return fn();
      }
      // Watch for the loading property to change before we check isAuthenticated
      authService.$watch("loading", loading => {
        if (loading === false) {
          return fn();
        }
      });
    };

Then we set up the guard in our routes
router/index.js

    // Importing the guard
    import { authGuard } from "../auth/authGuard";
    Vue.use(VueRouter);
    const routes = [
      {
        path: "/movies",
        name: "MoviesList",
        component: MoviesList,
        beforeEnter: authGuard
      },
    ];
    const router = new VueRouter({
      mode: "history",
      base: process.env.BASE_URL,
      routes,
    });
    export default router;

With these, the application can authenticate users and give access only authenticated users access to the movies page.

Using Cloudinary in a Vue App.

Cloudinary provides the ability to perform all of its awesome transformation functionality on remote images with its remote fetch URL. With these, there would not be a need to install any extra package to the application. Fetch enables the transformation of remote images and also an optimized delivery with the use of CDN. With the remote fetch URL, Images are fetched from any remote source and cached on your Cloudinary account. The only limit of this feature is that it supports only image assets.
The image can be transformed and optimized before being cached and delivered through fast, localized CDNs and not via local web servers. To create a fetch URL, simply prepend the following prefix to the URL of the image:

https://res.cloudinary.com/<your Cloudinary account's cloud name>/image/fetch/

By adding the different transformation parameters to the fetch URL, you can apply a huge variety of automatic adjustments and effects to your delivered Image.
For the movies page of our application , we would make our api request using the fetch method and use cloudinary to transform and deliver our image.

    <script>
    export default {
      name: "MoviesList",
      data() {
        return {
           movies: [],
           api_key:process.env.VUE_APP_API_KEY,
          //  Using the cloudinary fetch URL 
           movie_url:'https://res.cloudinary.com/cloud-name/image/fetch/w_300,h_300,c_fill,b_rgb:222,e_improve,r_50:50:0:0,bo_2px_solid_rgb:8a2be2/https://images.tmdb.org/t/p/original'
        };
      },
       methods: {
        async getMovies() {
          try {
            let response = await fetch(`https://api.themoviedb.org/3/trending/all/week?api_key=${this.api_key}`);
            let data = await response.json();
            this.movies=data.results
          } catch (error) {
            console.log(error);
          }
        },

      },
      created() {
        this.getMovies();
      },


    };
    </script>

In the above code, we were able to transform the images from the TMDB Api to fit perfectly.
Using the following transformation parameters:

c_fill,b_rgb:222,e_improve,r_50:50:0:0,bo_2px_solid_rgb:8a2be2

w_300 - This sets the width of a transformed asset to 300px.
h_300 - This sets the width of a transformed asset to 300px.
c*_fill* - Creates an asset with the exact specified width and height without distorting the asset.
b_rgb:222 - Sets the background to the specified color.
e_improve - Adjusts an image's colors, contrast, and brightness to improve its appearance.
r_50:50:0:0 - This uses the border-radius property to set the assets to required value. Starting with the top-left.
bo_2px_solid_rgb:8a2be2 - This sets the border of the assets using the border property.

We were able to render the highly optimized and transformed images using the remote fetch URL for our images.
You can find more of the transformation parameters that Cloudinary offers Here
Another alternative is using a Transformation Editor that generates the URL for the transformation you define so that you can copy it and use it.

Conclusion

Congratulation ! we have successfully been able to build our Vue application from scratch and also integrate Auth0 SDK for the authentication and use the Cloudinary fetch URL for the Transformation. I hope you were able to learn about how to integrate different services in a Vue application by using this tutorial as an example.
If you have any questions, you can leave them in the comments section below or send a message on Twitter.

Resources and further reading

Auth0 documentation
Cloudinary documentation
Transformation URL API reference, Cloudinary

Content created for the Hackmamba Jamstack Content Hackathon with Auth0 and Cloudinary.

An Overview of the Top 10 Vue UI Component Libraries in 2021

Abiola Esther — Wed, 17 Mar 2021 11:19:57 +0000

Vue JS is a progressive JavaScript framework that's used to develop single-page applications (SPAs) and User Interfaces. And it's one of the most widely-used front-end frameworks out there.

One interesting feature of Vue is its ability to break down a webpage into different components. And this process becomes simpler with the use of UI component libraries.

There are various UI component libraries that can help you create components easily and quickly. So in this article, we're going to review the top 10 Vue UI Component Libraries for 2021. Below you'll find an overview of each library, its uses, its advantages, and its GitHub and npm statistics.

Let's dive in

1) PrimeVue

PrimeVue is a simple to use, versatile, and performant Vue UI Component Library that helps you build awesome user interfaces.

It has over 80+ UI components with full support for Web Content Accessibility Guidelines (WCAG) and responsive design. And thanks to a recent update, the library now has full support for Vue 3. It also got a bunch more components.

One of the best things about Primevue is its wide range of components. They range from tables and paginators to well-crafted graph-based organization charts that you can use to create interactive Vue apps.

It's open-source, and has 1k+ stars on Github and 6,983 weekly downloads on NPM.

2) Vuetify

Vuetify is a Vue UI Library with beautifully handcrafted Components that uses the Material Design specification. This means that it has been developed exactly according to the Material Design specifications with every component meticulously crafted to be modular, responsive, and performant.

Vuetify lets you customize your applications with unique and dynamic layouts and perfect the styles of your components using SASS variables.

It also supports accessibility guidelines, all modern browsers, and is compatible with Vue CLI-3. It's easy to integrate and has a lot of reusable UI components like carousels, navigations, and cards.

It also offers basic templates for Simple HTML, Webpack, NUXT, PWA, Electron, A La Carte, and Apache Cordova.

Vuetify is open source and with over 29k stars on Github and 319,170 weekly downloads on NPM.

3) Chakara Ui Vue

Chakra UI is a simple modular and accessible component library that gives you the tools to build Vue applications quickly and easily.

All the components are accessible (it strictly follows WAI-ARIA standards), themeable, and composable. It supports responsive styles out of the box and is dark-mode compatible.

Chakra UI also contains a set of layout components like CBox and CStack that make it easy to style your components by passing props. It also allows you to auto-import Chakra UI Vue components using a webpack plugin solution.

It's open-source and has 900+ stars on Github and 331weekly downloads on NPM.

4) Bootstrap Vue

BootstrapVue, With BootstrapVue you can build responsive, mobile-first, and ARIA accessible projects on the web using Vue.js and the popular front-end CSS library — Bootstrap. The documentation is easy to understand and it also easy to setup. It makes front-end implementations done faster.

It offers 85+ components, over 45 available plugins, several directives, and 1000+ icons. It also provides functional components tailored for layouts and responsive design. you can also easily integrate BootstrapVue into your Nuxt.js projects using Nuxt.js module.

It also used the same way as the bootstrap css framework is being used. It's open-sourced on github with about 12.9k stars and 1.7k forks.

5) Vuesax

Vuesax is a new UI component framework created with Vuejs to make projects easily and with a unique and pleasant style, vuesax is created from scratch and designed for all types of developers from the frontend lover to the backend who wants to easily create their visual approach to the end-user. The designs are unique for each component and are not anchored to any visual trends or design rules, making projects built with it unique as well.

it offers responsive pages and reusable and customizable UI components. It is also easy to get started with either using npm or CDN. It currently does not support vue CLI 3 in its recent version.

Even though Vuesax is not as widely used as other Vue UI component libraries, the fact that it’s independent of any strict design language will make your Vue app stand out from the crowd. You can use it for its unique design to give your web pages a distinctive look.

It's open-sourced on github with about 4.9k stars and 6700 weekly downloads on npm.

6) Ant Design Vue

Ant Design vue based on the Ant Design specification, Ant design vue is a vue UI library that contains a set of high-quality components and demos for building rich, interactive user interfaces.

Ant-design-vue provides plenty of UI components to enrich your web applications such as Skeleton, drawer, statistics and so much more

With the recent release of ant design vue version 2, it has been updated to be faster and easier to integrate, smaller bundle size, and also supports Vue 3, New Composition API document.
It also supports modern web browsers, server-side Rendering, and electron.

It has over 13k stars on Github and on 39,693 weekly downloads on npm.

7) Quasar

Quasar is one of the best Vue UI frameworks that allow developers to use one source code base for all platforms through Quasar CLI with the best practices out of the box. It lets developers focus on their App's content rather than all other boilerplating stuff (build system, layout) around it. it is focused on following the Material 2.0 guidelines and also has a very supportive community.

There's a component for almost every web development need out there. Each of these components is carefully crafted to offer the best possible experience to your users. Quasar is designed with performance and responsiveness in mind. It offers a lot of UI Components, Layout and grids, and also icons.

One of the special things about Quasar is the ability write code once and simultaneously deploy it as a website, a Mobile App using just one codebase. There is also a new version currently in beta which would support vue 3 features. It has about 17.8k stars on github.

8) Buefy

Buefy is a lightweight UI component library for Vue JS based on Bulma( a css framework). Buefy combines Bulma with Vue, helping you build good-looking applications using minimal code. it is the javascript layer for your Bulma interface

It can either be imported completely or single components on an ordinary webpage. Integrating it into your project is quite easy, can either be done using npm or CDN.

Buefy provides ready-made UI components, layout, and icons. The components can use SASS to your theme. It also supports modern browsers.

9) Vue Material

Vue Material is a widely used, lightweight framework that implements the Material Design specifications. It is one of the best integration between Vue.js and Material Design specs! You can easily configure it to suit all your needs through an easy API.

It's compatible with responsive design and support for all modern Web Browsers. The library is divided into Themes, Components, and UI Elements. The themes give a definitive guide on how to theme your application (or write your own themes) and the Components and UI Elements consist of layouts, navigation, typography, icons, and 30 more components.

it has about 9.2k stars and 1.1k forks on github and 21k + weekly downloads on [NPM](https://www.npmjs.com/package/vue-material.

10) KeenUI

KeenUI is a lightweight vue.js UI library with a simple API, inspired by Google's Material Design. Keen UI is not a CSS framework. Therefore, it doesn't include styles for a grid system, typography, etc. Instead, the focus is on interactive components that require Javascript.

It has about 30 reusable components. The components are customizable by overriding the styles using SASS variables. you can integrate it into your project either using CDN or npm.

it's open-sourced and has about 4k stars on Github.

Conclusion

UI component libraries definitely make building out a project much easier. Picking the right one depends on the features of the project you want to work on.
Before diving into a new project, it's advisable for one to review the UI component library which is best suited for the purpose, I hope this article will guide you on picking the UI library for your next project.
For questions, you can reach out to me Here

Getting Started With Tailwind CSS

Abiola Esther — Tue, 24 Nov 2020 22:35:40 +0000

TailwindCSS is a low-level utility first CSS framework. It's unlike other CSS frameworks. It gives you a whole lot of power and flexibility with its utility classes which let you build your own components.
With the release of TailwindCSS 2.0, a whole lot of amazing features were released like -

Dark Mode 😎
Extended Colour Palette 🎇
Gradients 💫
Animations 🎆

Getting started with TailwindCSS is quite easy; so I created a Github Repository - TailwindCSS Setup.

With the repo, it easier to start out your projects with TailwindCSS, you can start by cloning the repository, or downloading the folder.

You can also configure your default styles in the tailwindcss-config.js,This documentation explains how to configure the file.

To get more information about TailwindCSS-Checkout the documentation, It's well documented and easy to understand.

If you have any questions, you can leave a comment below 👇 and don't forget to star the Repo.

Creating awesome carousels with SWIPER JS

Abiola Esther — Thu, 05 Nov 2020 21:58:18 +0000

Creating carousels for a website can be a complicated and stressful process. Well, this problem can be solved using SWIPER JS
Swiper is a cool and easy to use JavaScript Library.
It is a modern touch slider which is focused only on modern apps and web platforms to bring the best experience and simplicity. The documentation is very easy to understand.

Steps in creating a carousel with Swiper JS

Getting Started

Using CDN

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

Using NPM

from the terminal
$ npm install swiper

HTML Layout

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

Intialize Swiper Js

new Swiper(swiperContainer, parameters)

var mySwiper = new Swiper('.swiper-container', {
    speed: 400,
    spaceBetween: 100
});

Here are some demos of carousel

Simple

Pagination

Scrollbar

Vertical Slider

Fade Effect

3D Cube Effect

3D Coverflow Effect

3D Flip Effect

Thumbs Gallery

Lazy Loading

For more Demos, check HERE

Credits

If you have any other questions you can send me a message on Twitter

Thanks 😊

Augmented Reality and Virtual Reality -Simplified

Abiola Esther — Sun, 28 Jun 2020 02:39:51 +0000

The tech space keeps developing with new technologies rising from time to time of which augmented and virtual reality is part of. The idea of it always got me fascinated 😱 to know about it , how it works , how i can use it in real life applications.With that i put together a simplified version of the whole concept with the help of some online resources.

Augmented reality (AR) refers to any technology that ‘augments’ the user’s visual (and in some case auditory) perception of their environment.”

Put in another way -Augmented reality (AR) is superimposed digital information overlaid on a user’s view of a physical environment.
Unlike VR, AR is not a simulation of reality – rather, it integrates and adds value to the user’s interaction with the real world

Augmented reality technology presents users with virtual objects in their natural environment such as users looking at a smartphone/tablet screen, see information about the things they are looking at.

Virtual reality does not entail someone wearing a clunky helmet attached to a computer with a thick cable

Virtual reality (VR) on the other hand is an artificial environment that is created with software and presented to the user in such a way that the user suspends belief and accepts it as a real environment.

Virtual Reality can be considered an extremely immersive experience that you can enjoy safely and simulate something real. By using a Virtual Reality headset or applicable application, you can enter into special simulations. These simulations are designed to be extremely immersive experiences which the user can interact with and explore. The viewer controls the environment and has the power to look around at any scene as well as potentially interact with the objects in the scene

Augmented and virtual reality can be vastly applied in various areas; from interactive and immersive weather reports to helping fighter pilots find their targets day or night, AR and VR has proven itself as a powerful aid for industry and the general public at large.
Some of its applications such as :

Games like "Pokemon Go!" make
Medical training now makes use of AR
Gatwick Airport uses AR to help you find your gate
VR software for building virtual fashion stores
3D avatars (virtual humans) to help with clothes design
Virtual reality is also used in many sports as training aid

Virtual reality immerses people in experiences, often with a lot of expensive technology such as headsets. Augmented reality, on the other hand, usually starts with a real-life view of something (such as the camera of a mobile phone), and projects or inserts images onto the screen or viewer.
The appeal is obvious. Both offer an innovative way to immerse customers in an even more engaging, interactive and personal experience.But, it’s easy to get confused by the terminology

Augmented and Virtual Reality is a wide concept and the learning process continues.

More resources on it :

Thanks for reading ☺️