This course teaches how to create an Instagram clone using React, Tailwind CSS, and Firebase. By the end of the course, learners will be able to build a multi-page application with features such as user authentication, photo uploading, liking, commenting, and user profiles. The course covers setting up Firebase, implementing Firestore, Firebase authentication, real-time database, and deploying the application to Vercel. Learners will also work with React custom hooks, useContext, useState, useEffect, useRef, React Router Dom, Tailwind CSS, LoadTest, Lighthouse, React Testing Library, and Cypress E2E Testing. The course follows a tutorial-style teaching method with hands-on coding sessions and explanations. This course is intended for individuals interested in learning how to build a full-stack web application using modern technologies like React, Tailwind CSS, and Firebase.
Overview
Syllabus
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 (Part 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.
Taught by
freeCodeCamp.org
Related Courses
-
Build and Deploy a LeetCode Clone with React, Next JS, TypeScript, Tailwind CSS, Firebase
-
Full Stack React & Firebase Tutorial - Build a social media app
-
Code a Reddit Clone with React, Next.js, Firebase v9, Chakra UI – Full Course
-
Build a LinkedIn Clone with React and Firebase – Tutorial
-
Build an Instagram Clone with React Native, Firebase Firestore, Redux, Expo - Full Course
-
Intermediate React Tutorial - Todoist Clone (with Firebase, Custom Hooks, SCSS, React Testing)
