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




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.

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.

Who Should Attend!

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