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

Wordpress sites

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:

💻 Code:

⭐️ 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 firebase.js
⌨️ (1:02:34) Creating App in Firebase
⌨️ (1:09:15) Start working on Login Page
⌨️ (1:10:17) Install React Router Dom
⌨️ (1:18:15) Create Routes
⌨️ (1:21:51) Continue working on Login Page (Part 2)
⌨️ (1:26:35) Tailwind.css Introduction
⌨️ (1:31:34) Continue working on Login Page (Part 3)
⌨️ (1:32:35) Install more dependencies
⌨️ (1:36:30) Change how all scripts work
⌨️ (1:40:21) yarn add postcss -D
⌨️ (1:40:57) Create components folder
⌨️ (1:34:19) Tailwind.css setup
⌨️ (1:35:51) Completed Tailwind Setup, Continue working on Login Page (Part 4)
⌨️ (1:39:28) Interjection: Field Value
⌨️ (1:41:56) Continue working on Login Page
⌨️ (2:01:47) Tailwind.config
⌨️ (2:06:05) Login Functionality (with Firebase)
⌨️ (2:11:12) Signup Page
⌨️ (2:22:53) Check for user created is a duplicate
⌨️ (2:54:49) Not Found & Dashboard Page
⌨️ (3:01:11) Created Timeline Component
⌨️ (3:01:28) Created Sidebar Component
⌨️ (3:01:47) Created Header Component
⌨️ (3:04:14) use-auth-listener.js Hook
⌨️ (3:11:23) users.js UserContext
⌨️ (3:15:38) Back to Header Component
⌨️ (3:42:21) Working on Dashboard Page
⌨️ (3:45:59) Working on Sidebar Component
⌨️ (3:46:15) use-user.js hook
⌨️ (4:04:20) In user.js ⇒ Introduction to prop types
⌨️ (4:25:03) Created Timeline.js
⌨️ (4:25:43) Explanation on useMemo
⌨️ (4:27:45) Add WhyDidYouRender
⌨️ (4:29:53) Struggling with some issues
⌨️ (4:42:42) Finally Figuring out some problems with WhyDidYouRender
⌨️ (4:50:41) Working on suggestion.js (sidebar completed)
⌨️ (4:59:20) Get suggested profiles
⌨️ (5:16:28) Functionality: Remove followed user from suggestion
⌨️ (5:23:12) Functionality: Update user’s following & followers
⌨️ (5:34:18) Overview on Timeline
⌨️ (5:40:47) Creating Post Component
⌨️ (5:42:57) Creating more custom hooks (usePhotos)
⌨️ (6:04:16) Rendering out the photos (using React skeleton)
⌨️ (6:10:55) Start work on Post Component
⌨️ (6:15:18) Components within Post
⌨️ (6:16:03) Header Component
⌨️ (6:20:56) Image & Actions
⌨️ (6:27:32) Service call in Firebase
⌨️ (6:42:44) Show Comments
⌨️ (6:51:13) Add Comments
⌨️ (7:12:26) Adding Protected Routes
⌨️ (7:27:13) Profile
⌨️ (7:30:20) Lazy load explanation
⌨️ (7:45:23) Continue working on Profile Page
⌨️ (7:58:48) Header Component in Profile Page
⌨️ (8:02:14) Profile Specific Header
⌨️ (8:18:00) Get User Photos
⌨️ (8:37:52) Continue working on header
⌨️ (9:20:31) Information in header
⌨️ (9:37:09) Photos Component in Profile Page
⌨️ (9:50:07) Recap of everything we’ve done
⌨️ (9:52:55) Start of Review
⌨️ (9:55:33) Not found header
⌨️ (9:57:04) Review of usePhotos, useUsers, isUserLoggedIn, ProtectedRoute
⌨️ (9:58:35) Review of contexts: firebase.js and user.js
⌨️ (9:58:57) Review of Routes & Posts
⌨️ (10:01:31) loadtest (Npm install -g loadtest)
⌨️ (10:15:27) Create a production build
⌨️ (10:38:28) Deployment to Vercel done but with issues
⌨️ (10:51:47) Issues fixed
⌨️ (10:52:19) Lighthouse
⌨️ (11:02:27) Wrapping up
⌨️ (11:04:13) Changes and Refactoring (Fixing Bugs)
⌨️ (11:48:50) Quick Look at Paid Version
⌨️ (11:49:59) Cypress
⌨️ (11:54:08) Signing Off

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

45 thoughts on “Create an Instagram Clone with React, Tailwind CSS, Firebase – Tutorial”

    1. Free code camp does pay these creators and these creators also teach in colloges like MIT and Harvard university so they get tens and thousands of dollars every month this is just their teachings they do have jobs and whatever ad comes in this channel the money is spilt bewteen the creators and the owner of free code camp

    2. @ISSAC NEWTON that’s not true. We make these videos out of fun & to be helpful to the community. I’ve never seen MIT or Harvard or seen any money from my tutorials, I’ve probably made at best a few hundred pounds, which for the time I’ve put in to my channel, that would be maybe 10c an hour

    3. @Karl Hadwen hey Karl I want to learn about MERN heroku deployment can suggest me some blogs or you tube videos ?

  1. Thanks for posting my video FCC! Hope you all enjoy the video (P.S. my face looks as red as a plucked chicken 😂) – If you have any questions in regards to the video, feel free to message me & subscribe to my channel for more 😀

    1. hi Karl
      The tailwind classes are not working on the login page, completely ignored. what could be the issue?

  2. Shreyansh Singh

    Man people charge thousands of dollars for such good tutorials. Thank you for keeping these free 🙂

    1. Andrew Persaud

      @Dorin Nistor filip jerga will make anyone a javascript wizard i recommend all his courses.

  3. I started coding this four days ago following Karl’s channel. Top content. Very grateful for such a great content.

  4. Wow! This sounds amazing!! I’m looking forward to checking it out. I didn’t see it on the outline – do you go over any middleware like Express?

  5. I love this kind of videos where you see the problems they have encountered and how they solve it instead of watching a perfect video for like an hour. And bonus, Karl is charming too.

  6. Alexander Mikhaylov

    Watch the full tutorial and my coding almost done. Thanks a lot, FCC, and of course huge thanks and bless Karl.

  7. really cool, loved it. the only thing that tilted me was the way following works. you could just use a dedicated following database table with follow instances like: {user: userId, following: userId} . then you don’t need to maintain different rows on each user which hold the same information. thanks for the video!

  8. Emilie Humbert

    🚀 Such a great tutorial!! Thanks for taking the time to do it. You mentioned you wanted ideas for the next clone, what about It may not be very known for non ‘crafters’, but it describes itself as a community site, an organisational tool, and a yarn & pattern database for knitters and crocheters. There is so much info on this website, it’s quite complex. You can find pattern, designers, yarns and projects that you may like, friends that you can follow, there is a messaging and a forum sections as well as a basket/paying interface. A make over of this website could also be a good idea 🙂 Anyway, thanks a lot for this video and looking forwards to watching the next one!

  9. Bryan Siguenza

    Podre tomar todo el curso sin aburrirme? lo averiguaremos
    gracias por el curso chicos 😀

  10. 🚀Great video, would watch again! You have a knack for teaching coding, so please keep it up!

  11. Dawid Bobowski

    Hi Karl!
    Your tutorial was something on another level! 🚀🚀 I’m quite new to React and it took me a few weeks to finish it while having exams at uni but it helped me to get practice in IT company these holidays. 😎
    I had a few struggles and I tried to debug on my own. In most cases it happened when you changed something during your struggles on the video. Sometimes it took me a few hours to find what’s wrong but it also helped me to understand what I was actually doing.
    Thank you for your help and time and I hope to see more videos from you in the future. 😀

    1. Thanks so much Dawid! I always find the debugging process is where I learn the most so I’m sure you did also! I wish you all the best 🙂

  12. Brilliant!!! so thorough and has every bell and whistle that a production ready app would need

  13. 2:19:30 Controlled Input using hooks need to have a default value other than undefined. When using useState() hook if initial value not specified, undefined is assumed, hence value attribute becomes undefined.

  14. take in consideration that some changes happened in the firebasse sdk modular
    so importing fire base should been like that

  15. i love this video i added to it infinite scrolling learned a lot of firebase and the most thing i liked about this video is not about just some fancy css styles but there is a lot of logic going around which makes this tutorial kinda unique but learned a lot along the way trying to improve the overall project hats to you man apprciate your time making this godness : – )

  16. Fernando Molano

    For those taking the course on 2022 and using Firebase 9x, on minute 50:xx update imports like following:
    import firebase from ‘firebase/compat/app’;
    import ‘firebase/compat/auth’;
    import ‘firebase/compat/firestore’;

  17. Fernando Molano

    Min 1:02 instead of using Switch use Routes, of course if needs to be updated on the import as well. Also instead of component attribute use element and inside the Login element is the component itself with syntax. Ex:


    } />

Comments are closed.