Build Full Featured Progressive Web App (PWA) From Scratch
What you'll learn
- Design the app layout for platforms such as iOS, Android & Desktop.
- Uploading videos (showing progress bar) and changing the bitrate, audio quality & overall quality of the video using open-source FFMPEG library.
- Building app's own video player just like Twitter & Instagram.
- Uploading animated gifs (showing progress bar) and convert them into mp4 videos (Like Twitter & Instagram) using open-source library FFMPEG.
- Uploading images (showing progress bar) & creating multiple images of different sizes using back-end programming.
- Understanding of copywriting and creating attractive slogans & description of the app.
- 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.
Requirements
- Basic CSS, JavaScript & Back-End programming skills are required to understand this course.
Description
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
-Header
-Footer
-Left Panel
-Profile
-Meow Poster
-Posted Meow
-Welcome Page
-Sign Up Page
-Sign In Page
-Forgot Password Page
-Notice Board & Loader
⚫ JavaScript Libraries
-index
-Splash Screen
-Javascript
-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
-Removing "STRICT_TRANS_TABLES"
-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
Who this course is for:
- Developers who're passionate to build apps like Ebay, AliExpress, Dailymotion, Youtube, Twitter, Instagram etc.
Instructor
- 3.9 Instructor Rating
- 10 Reviews
- 3,011 Students
- 1 Course
I have over 15 years of experience in web development.
I am here to bring the change in today's app industry by sharing my Progressive Web App development skills.
I am highly skilled in developing rich featured Progressive Web App. (See My Work & You Will Say It Yourself!)
Learn with me and you are done learning web development!