Build Social Media Like App Twitter & Instagram From Scratch

Learn to build an advanced featured Social Media App (PWA) like Twitter & Instagram from scratch including video upload

Ratings 3.74 / 5.00

Build Social Media Like App Twitter & Instagram From Scratch

What You Will 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.

Description

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

-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

DISCLAIMER

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.