Build Social Media Like App Twitter & Instagram From Scratch


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


In this production level Javascript, mysql database & PHP for back-end programming course you’ll learn developing the progressive web app (PWA) of a social network 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


In this course/class, we teach how to process images/gifs/videos/audios. However, we condemn the use of images/gifs/videos of human beings & animals and audios/videos containing music.
We do not promote the use of images/gifs/videos of human beings & animals and audios/videos containing music.

Do not ask to share the code of the project. This class/course teaches how to code apps. This class/course is not for sharing the code. However, you can find the necessary code in the project folder.

Who this course is for:

  • Students who wish to create web apps that resemble native mobile apps in both appearance and functionality.

Join us on Telegram


Rely on the Coupon WebHelperApp team's decade of expertise in sourcing 100% off Udemy coupons. Our commitment includes rigorous verification and daily updates to ensure a reliable assortment of fully functional coupon codes. We specialize in promptly uncovering fresh offers, often with limited availability, necessitating swift action on your part.

We will be happy to hear your thoughts

Leave a reply

Free udemy coupons