Learn React by building a Progressive Web App (PWA)

person icon Vinod Kumar Kayartaya

Learn React by building a Progressive Web App (PWA)

Build a movie browser app while learning React JS

updated on icon Updated on Dec, 2023

language icon Language - English

person icon Vinod Kumar Kayartaya

architecture icon React,React JS,Development,Web Development

Lectures -32

Resources -1

Duration -3 hours


30-days Money-Back Guarantee

Training 5 or more people ?

Get your team access to 8,500+ top Tutorials Point courses anytime, anywhere.

Course Description

A Progressive Web App or PWA is a web application that has a set of capabilities (similar to native apps) which provide an app-like experience to users. PWAs need to meet a set of essential requirements that we'll see next. PWAs are similar to native apps but are deployed and accessible from web servers via URLs, so we don't need to go through app stores.

A PWA needs to be:

  • Progressive: Work for every user, regardless of browser choice, because they are built with progressive enhancement as a core tenet.
  • Responsive: Fit any form factor, desktop, mobile, tablet, or whatever is next.
  • Connectivity independent: Enhanced with service workers to work offline or on low-quality networks.
  • App-like: Use the app-shell model to provide app-style navigation and interactions.
  • Fresh: Always up-to-date thanks to the service worker update process.
  • Safe: Served via HTTPS to prevent snooping and ensure content has not been tampered with.
  • Discoverable: These are identifiable as "applications" thanks to W3C manifests and service worker registration scope allowing search engines to find them.
  • Re-engageable: Make re-engagement easy through features like push notifications.
  • Installable: Allow users to "keep" apps they find most useful on their home screen without the hassle of an app store.
  • Linkable: Easily share via URL and does not require complex installation.

In detail, this course will cover everything you need to build amazing PWAs - leading to a score of 100 (out of 100) in Google's PWA auditing tool "Lighthouse".

For a long time, JavaScript has been the key element of the world wide web. Historically, it's been used for front-end validations, dynamic menus, making some AJAX requests, etc.

But things have changed since the introduction of Single Page Applications (SPAs). React JS makes it very easy for us to create such SPAs.

Developers at Facebook released a completely different kind of framework called React (or ReactJS), which uses a combination of plain JavaScript and HTML elements (in XML syntax), called JSX. Unlike the Angular framework, this one simply addresses the View part of MVC. The main goal of a React application is to break down the entire web application into a bunch of HTML-like elements called Components. A component defines the visual appearance of your UI while converting the data it holds into user interface elements.

Using these components, you can quickly develop amazing and powerful web apps. These components are completely reusable.

By the end of the course, you can build amazing React (single page) applications!


What will you learn in this course:

  • React fundamentals
  • Creating Stateful and Stateless components
  • Create Single-Page-Application (SPA) using React-Router-DOM
  • Access RESTful services from 3rd party service providers (Open Movie Database API)
  • Make the React application a PWA using ServiceWorker
  • Build a production version of our app
  • Deploy our app on Google's Firebase hosting service


What are the prerequisites for this course?

  • Basic knowledge of HTML/CSS/JavaScript
Learn React by building a Progressive Web App (PWA)


Check out the detailed breakdown of what’s inside the course

4 Lectures
  • play icon Course introduction 04:42 04:42
  • play icon A quick intro to React 03:41 03:41
  • play icon Software setup 06:01 06:01
  • play icon Download the finished project
React basics
5 Lectures
The Open Movie Database
2 Lectures
More components
4 Lectures
Routing and Single-Page-Application (SPA)
6 Lectures
Build and deploy
5 Lectures
Progressive Web Application
6 Lectures

Instructor Details

Vinod Kumar Kayartaya

Vinod Kumar Kayartaya

Evangelist, Consultant and Developer.

Hi. My name is Vinod and I am a software trainer, consultant and freelance developer in Bangalore, India.

Most of my professional life, spanning over two decades, I have taken thousands of classroom sessions on various technologies, some of which include Java, Hibernate, Spring framework, Spring boot, Micro services, Docker, Struts, JSF, NodeJS, MongoDB, and JavaScript frameworks like AngularJS, Angular, ReactJS,  etc.

Course Certificate

User your certification to make a career change or to advance in your current career. Salaries are among the highest in the world.

sample Tutorialspoint certificate

Our students work
with the Best

Related Video Courses

View More

Annual Membership

Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses

Subscribe now
People having fun around a laptop

Online Certifications

Master prominent technologies at full length and become a valued certified professional.

Explore Now
People having fun around a laptop

Talk to us