Create an Instagram Clone with React, Tailwind CSS, Firebase - Tutorial

From the creator

Learn how to create an Instagram clone with React and JavaScript! This project uses React (custom hooks, useContext, useState, useEffect, useRef), Firebase (Firestore/auth), Tailwind CSS, LoadTest, Lighthouse, Vercel, React Testing Library and Cypress E2E Testing. This React project has multiple pages: login, sign up, dashboard (to view/like/comment on photos), and user profiles. The sign-in page connects to Firebase when a user tries to sign in, and when a user signs up, Firebase auth is used to store the user in the Firebase auth database. After the application is built you will learn how to deploy it to Vercel. ✏️ Course created by Karl Hadwen. Check out his channel: https://www.youtube.com/c/CognitiveSurge 💻 Code: https://github.com/karlhadwen/instagram ❤️ Try interactive React courses we love, right in your browser: https://scrimba.com/freeCodeCamp-React (Made possible by a grant from our friends at Scrimba) ⭐️ Course Contents ⭐️ ⌨️ (0:00:00) Introduction ⌨️ (0:05:37) Showcase ⌨️ (0:15:28) Create React App (yarn) ⌨️ (0:18:22) Project Folder Structure ⌨️ (0:20:26) Installing Dependencies ⌨️ (0:22:47) Refactoring unnecessary files, refactoring code ⌨️ (0:29:18) Install ESLint ⌨️ (0:33:06) Creating Folder Structure & Architecture ⌨️ (0:43:05) Setup Firebase ⌨️ (0:44:22) Firestore ⌨️ (0:46:44) Firestore Rules ⌨️ (0:48:43) Firestore (Collections & Docs) ⌨️ (0:51:00) Firebase Authentication ⌨️ (0:53:59) Realtime Database (Explanation) ⌨️ (0:54:45) createContext in fireba

Published 2021-04-19 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.