Build Full Featured Progressive Web App From Scratch (2022)

Deal Score+1
FREE $9.99 Go To Course
Deal Score+1
FREE $9.99 Go To Course


In this production level Javascript & back-end programming course you’ll learn developing the PWA like Twitter & Instagram from scratch which includes vectorized logo & icons, layout design, sign up/sign in/forgot password process, uploading profile picture, updating bio, posting images, gifs & videos (FFMPEG), creating customized video player, hashtags, converting text into links, tagging users, setting up push notifications & much more.

⚫ Idea & Copywriting

-Having an Idea of a Social Network

-Choosing Name

-Choosing Title

-Choosing Description

-Choosing Slogans

-Features of a Social Network

-Sketching Pages

⚫ Registration of the Idea

-Choosing a Domain Name Registrar

-Registering a Domain Name

-Buying a Hosting Package

-Setting up SSL Certificate

⚫ Setting up Server

-Setting up XAMPP Server

-Setting up Text Editor

-Uglifying CSS & Javascript

-Uploading Files Using Smarter Way

⚫ Vectorized Logo & Icons

-Designing Vectorized Logo & Icons

⚫ Setting up Htaccess

-With or Without WWW

-Setting up Htaccess

⚫ Analyzing the Layout for Different Devices

-Designing the Social Network Layout for Mobiles

-Designing the Social Network Layout for Tablets

-Designing the Social Network Layout for Laptops

-Designing the Social Network Layout for Desktops

⚫ Designing the Layout & Elements for Different Devices



-Left Panel


-Meow Poster

-Posted Meow

-Welcome Page

-Sign Up Page

-Sign In Page

-Forgot Password Page

-Notice Board & Loader

⚫ JavaScript Libraries


-Splash Screen


-Sign Up Page Call Function

-Sign In Page Call Function

-Forgot Password Page Call Function

⚫ Sending Email on Sign Up, Sign In & Forgot Password

-Sign Up Processing

-MySQL Database

-Setting Up Mailer

-Creating An Email

-Testing Sending Email

-Sign In Processing

-Forgot Password Processing

-Hit Enter on Input Field to Proceed

-Focus on Page Load

⚫ Designing the Database & Advanced Coding 1

-Ajax request, success & loader2

-Setting up Home Page

-Setting up Notifications Page

-Setting up Settings Page

-Setting up Discover Page

-Setting up Profile Page

-Three types of Pages

-Home Button Call

-Logo, Notification & Discover Buttons Call

-Profile Button Call

-Remaining Columns for “reg_users” Table

-“meows” Table

-“reports” & “pushnoti” Tables

-Coding Profile Pic Upload

-Coding Remove Profile Pic

-Coding Updating Bio

-Changing, Name, Username & Password

-Coding Deactivation & Logout

⚫ Profile & Advanced Coding 2

-Setting up catzby dot com/username

-Setting up Counts & Activation Link Resend

-Setting up Settings Button Call

-Setting up Follow/Unfollow

-Setting up Block/Unblock

-Setting up Profile Report

-Setting up “htmlspecialchars”

-Setting up Click on Tagged Users (@user), Hashtags (#hashtag) & Links

-Setting up “Loading Followers Page” & “Loading Followings Page”

-Setting up Share Button

-Setting up “Meow Poster” & “NSAM Poster” for Own & Visiting Profiles

⚫ Setting up VPS & FFMPEG

-Backing Up

-Buying A VPS

-Creating A Project

-Creating A Server

-Generating Keys

-Setting Up A SSH Client

-Installing Apache, PHP, MySql

-Securing MySql

-Installing PHPMyAdmin

-Changing PHPMyAdmin URL

-Setting Root User Password For PHPMyAdmin

-Accessing PHPMyAdmin & Importing Database

-Installing Free SSL Certificate

-Configuring Htaccess

-Uploading Using SFTP

-Configuring DNS Records

-Edit emailll_sending.php

-Redirecting Direct IP Access


-Updating “upload_max_filesize”

-Giving Access to “www-data”

-Remvoving a PHPMyAdmin Error

-Setting up FFMPEG

⚫ Posting, Custom Video PLayer & Advanced Coding 3

-Posted Meows Manually

-Setting up Meow Page

-Fetching a Posted Meow

-Fetching a Posted Meow – Top Portion

-Fetching a Posted Meow – Report Profile

-Fetching a Posted Meow – Deleting a Meow

-Fetching a Posted Meow – Display Time of Posting

-Fetching a Posted Meow – Getting Image’s Width & Height

-Fetching a Posted Meow – Making a Customized Video Player

-Fetching a Posted Meow – Liking a Meow

-Fetching a Posted Meow – Forwarding a Meow

-Fetching a Posted Meow – Loading Likes

-Fetching a Posted Meow – Loading Meow’s Comments

-Loading Home Page’s Meows

-Loading Profile & Discover Pages’ Meows

-Loading Hashtagged Meows

-Setting up Search Page

-Loading Searched Meows

-Loading Searched Catzbies

-Searching Meows & Catzbies

-Suggesting Users to Tag

-Previewing a Video

-Posting NSAM / Meow / Comment to a Meow

⚫ Push Notifications & Advanced Coding 4

-Setting up Notification Circle

-Fetching Notifications

-Setting up Push Notifications

-Receiving Push Notifications

-Setting up History API (Back Button)

-History API Scroll Restoration

-History API (Back Button Calling “logocall” Function)

-Auto Load on Scroll Down

-Setting up Success Page After Signing Up

-Load Home Page on Sign In Success

-Replace Pages After Signing In

-Making Left & Right Panels Sticky

-Loading All the Icons Before the Page Loads

-Setting up Error Pages

-Installing the Application on the Device

-Minifying CSS & Javascript

-Setting Headers in Htaccess

-Testing the Site’s Loading Speed

-Setting up “about dot catzby dot com”

-Setting up Google Search Console Access

-Setting up Google Analytics

What you’ll learn

  • Understanding of copywriting and creating attractive slogans & description of the app.
  • Uploading videos (showing progress bar) and changing the bitrate, audio quality & overall quality of the video using open-source FFMPEG library.
  • Uploading animated gifs (showing progress bar) and convert them into mp4 videos (Like Twitter & Instagram) using open-source library FFMPEG.
  • Design the app layout for platforms such as iOS, Android & Desktop.
  • Uploading images (showing progress bar) & creating multiple images of different sizes using back-end programming.
  • Building app’s own video player just like Twitter & Instagram.
  • Designing vectorized logo & icons.
  • Signing up, signing in & forgot password process including success sign up email, alert email on sign in & request password email on forgot password call.
  • Creating profile URLs using Htaccess. For example “catzby dot com/username”.
  • Creating neat URLs using Htaccess. For example “catzby dot com/@ForbiDDen.
  • Retrieving data from database using Regex Expressions Patterns and auto load on page scroll down.
  • Setting up Virtual Private Server, installling LAMP & FFMPEG & addressing important issues.
  • Setting up DNS Records.
  • Setting up separate Mail Server.
  • Back button functionality using History API which makes app feels like Twitter & Instagram.
  • Setting up Manifest & Service Workers.
  • Making app installable on devices such as Windows, Android etc.
  • Setting up Push Notifications which includes retrieving & saving users’ tokens & sending push notifications on different events. For example tagging users etc.
  • Adding search functionality to the app.
  • Minifying scripts to increase the performance of the app.
  • Running script in the background for notifying users about new number of notifications appearing on the notification icon.
  • Tagging users in the post.
  • Add hashtags functionality to the post.
  • Conerting URL like text into clickable links.
  • Characters count functionality.
  • Sharing links with native mobile capabilities.
  • Setting up Google Analytics & Google Webmaster Tools to analyze the performance of the app.


  • Basic CSS, JavaScript & Back-End programming skills are required to understand this course.

Who this course is for:

  • Developers who’re passionate to build apps like Ebay, AliExpress, Dailymotion, Youtube, Twitter, Instagram etc.
FREE $9.99 Go To Course

Report Post