Build Social Media Like App Twitter & Instagram From Scratch



What you will 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.

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

English
language

Content

Getting Into The App Idea

Idea & Copywriting
Registration of the Idea
Setting up Server
Vectorized Logo & Icons

Getting Into The Htaccess

Setting up Htaccess

Designing The App Layout & Elements

Analyzing the Layout for Different Devices
Designing the Layout & Elements for Different Devices

Getting Into Sign Up, Sign In & Forgot Password

JavaScript Libraries
Sending Email on Sign Up, Sign In & Forgot Password

Designing The Database

Designing the Database & Advanced Coding 1
Profile & Advanced Coding 2

Virtual Private Server

Setting up VPS & FFMPEG

Posting Images, Gifs & Videos

Posting, Custom Video Player & Advanced Coding 3
Push Notifications & Advanced Coding 4

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Check Today's 30+ Free Courses on Telegram!

X