Careertail
About UsCoursesCareer PathsBlogOpportunities
Log In
Courses>Web Development>Build Full Featured Progressive Web App (PWA) From Scratch
DevelopmentBuild Full Featured Progressive Web App (PWA) From Scratch
Price:Paid
Length:7 hours
Content type:video
level:all levels
Updated:24 February 2024
Published:21 August 2022
Similar courses
Opportunities
Courses>Web Development>Build Full Featured Progressive Web App (PWA) From Scratch
Build Full Featured Progressive Web App (PWA) From Scratch
3.9 (3.0k)
7 hours
3019 students
What you will learn
1Design the app layout for platforms such as iOS, Android & Desktop.
2Uploading videos (showing progress bar) and changing the bitrate, audio quality & overall quality of the video using open-source FFMPEG library.
3Building app's own video player just like Twitter & Instagram.
4Uploading animated gifs (showing progress bar) and convert them into mp4 videos (Like Twitter & Instagram) using open-source library FFMPEG.
5Uploading images (showing progress bar) & creating multiple images of different sizes using back-end programming.
6Understanding of copywriting and creating attractive slogans & description of the app.
7Designing vectorized logo & icons.
8Signing up, signing in & forgot password process including success sign up email, alert email on sign in & request password email on forgot password call.
9Creating profile URLs using Htaccess. For example "catzby dot com/username".
10Creating neat URLs using Htaccess. For example "catzby dot com/@ForbiDDen.
11Retrieving data from database using Regex Expressions Patterns and auto load on page scroll down.
12Setting up Virtual Private Server, installling LAMP & FFMPEG & addressing important issues.
13Setting up DNS Records.
14Setting up separate Mail Server.
15Back button functionality using History API which makes app feels like Twitter & Instagram.
16Setting up Manifest & Service Workers.
17Making app installable on devices such as Windows, Android etc.
18Setting up Push Notifications which includes retrieving & saving users' tokens & sending push notifications on different events. For example tagging users etc.
19Adding search functionality to the app.
20Minifying scripts to increase the performance of the app.
21Running script in the background for notifying users about new number of notifications appearing on the notification icon.
22Tagging users in the post.
23Add hashtags functionality to the post.
24Conerting URL like text into clickable links.
25Characters count functionality.
26Sharing links with native mobile capabilities.
27Setting up Google Analytics & Google Webmaster Tools to analyze the performance of the app.
Target audiences
1Developers who're passionate to build apps like Ebay, AliExpress, Dailymotion, Youtube, Twitter, Instagram etc.
Requirements
1Basic CSS, JavaScript & Back-End programming skills are required to understand this course.
FAQ
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
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

Similar courses
Opportunities
Make the most out of your online education
Careertail
Copyright © 2021 Careertail.
All rights reserved
Quick Links
Get StartedLog InAbout UsCourses
Company
BlogContactsPrivacy PolicyCookie PolicyTerms and Conditions
Stay up to date
Trustpilot
Careertail
Courses>Web Development>Build Full Featured Progressive Web App (PWA) From Scratch
DevelopmentBuild Full Featured Progressive Web App (PWA) From Scratch
Price:Paid
Length:7 hours
Content type:video
level:all levels
Updated:24 February 2024
Published:21 August 2022
Similar courses
Opportunities
Courses>Web Development>Build Full Featured Progressive Web App (PWA) From Scratch
Build Full Featured Progressive Web App (PWA) From Scratch
3.9 (3.0k)
7 hours
3019 students
What you will learn
1Design the app layout for platforms such as iOS, Android & Desktop.
2Uploading videos (showing progress bar) and changing the bitrate, audio quality & overall quality of the video using open-source FFMPEG library.
3Building app's own video player just like Twitter & Instagram.
4Uploading animated gifs (showing progress bar) and convert them into mp4 videos (Like Twitter & Instagram) using open-source library FFMPEG.
5Uploading images (showing progress bar) & creating multiple images of different sizes using back-end programming.
6Understanding of copywriting and creating attractive slogans & description of the app.
7Designing vectorized logo & icons.
8Signing up, signing in & forgot password process including success sign up email, alert email on sign in & request password email on forgot password call.
9Creating profile URLs using Htaccess. For example "catzby dot com/username".
10Creating neat URLs using Htaccess. For example "catzby dot com/@ForbiDDen.
11Retrieving data from database using Regex Expressions Patterns and auto load on page scroll down.
12Setting up Virtual Private Server, installling LAMP & FFMPEG & addressing important issues.
13Setting up DNS Records.
14Setting up separate Mail Server.
15Back button functionality using History API which makes app feels like Twitter & Instagram.
16Setting up Manifest & Service Workers.
17Making app installable on devices such as Windows, Android etc.
18Setting up Push Notifications which includes retrieving & saving users' tokens & sending push notifications on different events. For example tagging users etc.
19Adding search functionality to the app.
20Minifying scripts to increase the performance of the app.
21Running script in the background for notifying users about new number of notifications appearing on the notification icon.
22Tagging users in the post.
23Add hashtags functionality to the post.
24Conerting URL like text into clickable links.
25Characters count functionality.
26Sharing links with native mobile capabilities.
27Setting up Google Analytics & Google Webmaster Tools to analyze the performance of the app.
Target audiences
1Developers who're passionate to build apps like Ebay, AliExpress, Dailymotion, Youtube, Twitter, Instagram etc.
Requirements
1Basic CSS, JavaScript & Back-End programming skills are required to understand this course.
FAQ
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
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

Similar courses
Opportunities
Make the most out of your online education
Careertail
Copyright © 2021 Careertail.
All rights reserved
Quick Links
Get StartedLog InAbout UsCourses
Company
BlogContactsPrivacy PolicyCookie PolicyTerms and Conditions
Stay up to date
Trustpilot