What is an Instagram Clone ?
An Instagram Clone is a social media app software program you can use to create an app which is similar in features to the popular Instagram app owned by Facebook.
What is this 12-hour Free video course on how to Clone Instagram?
It is a massive 12-hour course that will show you the nitty-gritty of how to create your own version of Instagram.
The content of this course is far more comprehensive than most other courses on creating web app clones.
Why do you need to take this FREE course?
It is free and recent so it comes with up to date expert knowledge from a credible platform you can’t find in most of the the other tutorials on building clones of popular web apps.
Most of the other videos are short and don’t cover very many features while some have obsolete info.
Who developed this free Instagram Clone Course?
Karl Hadwen developed this Instagram Clone course.
Karl is an industry leader in this sector and has the credit of creating many popular courses. These courses are on his own channel and the freeCodeCamp.org channel.
What project will you create in this FREE 12 hour Instagram Clone Course?
In this course,the project you will create will employ :
React,
Firebase,
Tailwind CSS,
LoadTest,
Lighthouse,
Vercel,
React Testing Library,
and Cypress E2E Testing.
Under use of React, you will use custom hooks, useContext, useState, useEffect, and useRef.
What will you learn in thus 12-hour Free Course On Instagram Clone?
You will learn how to create :
Multiple pages such as login page, a sign up page, a dashboard (with features to view/like/comment on photos), and user profiles.
Anytime a user tries to sign in, the sign-in page you will learn how to create links up to Firebase.
Also, when a user signs up, the app uses Firebase auth to store the user in the Firebase auth database.
Finally, you will learn how to fully deploy the app using Vercel.
What are the different sections you will learn in this 12-hour Free video course?
Below is a list of all the sections in this comprehensive course:
Introduction
Showcase
Create React App (yarn)
Project Folder Structure
Installing Dependencies
Refactoring unnecessary files, refactoring code
Install ESLint
Creating Folder Structure & Architecture
Setup Firebase
Firestore
Firestore Rules
Firestore (Collections & Docs)
Firebase Authentication
Realtime Database (Explanation)
createContext in firebase.js
Creating App in Firebase
Start working on Login Page
Install React Router Dom
Create Routes
Continue working on Login Page (Part 2)
Tailwind.css Introduction
Continue working on Login Page (Part 3)
Install more dependencies
Change how all scripts work
yarn add postcss -D
Create components folder
Tailwind.css setup
Completed Tailwind Setup,
Continue working on Login Page (Pt. 4)
Interjection: Field Value
Continue working on Login Page
Tailwind.config
Login Functionality (with Firebase)
Signup Page
Check for user created is a duplicate
Not Found & Dashboard Page
Created Timeline Component
Created Sidebar Component
Created Header Component
use-auth-listener.js Hook
users.js UserContext
Back to Header Component
Working on Dashboard Page
Working on Sidebar Component
use-user.js hook
In user.js ⇒ Introduction to prop types
Created Timeline.js
Explanation on useMemo
Add WhyDidYouRender
Struggling with some issues
Finally Figuring out some problems with WhyDidYouRender
Working on suggestion.js (sidebar completed)
Get suggested profiles
Functionality: Remove followed user from suggestion
Functionality: Update user’s following & followers
Overview on Timeline
Creating Post Component
Creating more custom hooks (usePhotos)
Rendering out the photos (using React skeleton)
Start work on Post Component
Components within Post
Header Component
Image & Actions
Service call in Firebase
Show Comments
Add Comments
Adding Protected Routes
Profile
Lazy load explanation
Continue working on Profile Page
Header Component in Profile Page
Profile Specific Header
Get User Photos
Continue working on header
Information in header
Photos Component in Profile Page
Recap of everything we’ve done
Start of Review
Not found header
Review of usePhotos, useUsers, isUserLoggedIn, ProtectedRoute
Review of contexts: firebase.js and user.js
Review of Routes & Posts
loadtest (Npm install -g loadtest)
Create a production build
Deployment to Vercel done but with issues
Issues fixed
Lighthouse
Wrapping up
Changes and Refactoring (Fixing Bugs)
Quick Look at Paid Version
Cypress
Signing Off
How To Get Instagram Clone Course For Free
The full course comes absolutely free from freeCodeCamp.org
