Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.
PricingCoursesLog in
For TeamsWhy Scrimba?
Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.
Pricing
PricingCreate Account
Log in
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.

Karma

DashboardConnect to DiscordFind a courseSettingsNew scrim
Log out

Build an Instagram clone in React

Enroll for freeGet started!

Join 2430 other students

Log in to get

Access to all our free courses
Interactive hands-on content
100s of code challenges
Join a friendly community
Enroll for free
Subscribe to access!Subscribe to access!

Subscribe to access to this course and ALL other courses. You get a 30-day money-back guarantee, no questions asked.

Subscription includes

All courses and career paths
100s of coding challenges
Certificates of completion
Exclusive Pro members chat
Subscribe now!
The course creator Karl Hadwen

with Karl Hadwen

Course level: Advanced

Learn how to build an Instagram clone in this bumper course spread across 93 screencasts. Boost your portfolio with a huge project using React, Firebase, and Tailwind.

What's inside

This course contains 93 interactive scrims spread across 11 modules.

two girls
Welcome and Overview

4 lessons 18 min

1. Welcome to Building Instagram
4:50
2. Technologies Overview
3:30
3. Structure & Dependencies
5:14
4. Tailwind CSS Overview
5:06
Firebase setup

8 lessons 35 min

1. Firebase Overview
7:54
2. Firebase Firestore Setup
7:13
3. Firebase Firestore Updated Rules
1:09
4. Firebase Authentication Setup
2:31
5. Firebase Application Integration
3:24
6. Firebase FieldValue Setup
2:37
7. Firebase Context
4:03
8. Hydrating Our Firestore with Data
6:41
Pages, lazy/suspense & one source of truth

5 lessons 20 min

1. Page Routes - One Source of Truth
3:17
2. Importing Our Pages Using lazy & Suspense
8:36
3. Creating our Pages
2:22
4. Implementing Suspense
3:20
5. React Router Setup
3:07
Login page component

9 lessons 37 min

1. Challenge - Creating the Login Form
3:47
2. Creating the Login Form
12:04
3. Challenge - Login Page Title
0:30
4. Login Page Title
1:11
5. Challenge - Handling Login State & Validation
2:30
6. Handling Login State & Validation
6:02
7. Firebase Auth Connection For Login Brainstorm
4:58
8. Firebase Auth Connection For Login
4:51
9. Navigate a Successful Login to the Dashboard
1:28
Sign-up Page, Dashboard, & Not Found Components

12 lessons1 hour 1 min

1. Challenge - Creating the Sign Up Form
1:39
2. Creating the Sign Up Form
6:24
3. Challenge - Handling Sign Up State & Validation
5:45
4. Sign Up Page Title
1:15
5. Handling Sign Up State & Validation
2:22
6. Sign Up Form Validation
2:07
7. Challenge - Firebase Auth Connection For Sign Up
5:22
8. Firebase Auth Connection For Sign Up
6:45
9. Username Sign Up Validation
11:15
10. Navigate a Successful Sign Up to the Dashboard
2:01
11. Creating the Dashboard Page
8:53
12. Creating a Not Found Page
7:12
Header component

14 lessons 59 min

1. Challenge - Building out the Header Component
2:25
2. Building out the Header Component
5:32
3. Challenge - Further development on the Header Component
6:03
4. Further development on the Header Component
11:54
5. Creating a UserContext
1:55
6. Challenge - Smart looking SVGs for the Header Component
3:26
7. Smart looking SVGs for the Header Component
2:21
8. Implementing UserContext
1:43
9. Creating a custom useAuthListener hook to get the logged in user
6:43
10. Challenge - Getting user authentication state
3:18
11. Creating a custom useUser hook
4:48
12. Challenge - Creating a getUserByUserId function for our useUser hook
3:19
13. Challenge - Implement our useUser hook
4:06
14. Reviewing the Header component
1:42
Timeline component

6 lessons 34 min

1. Challenge - Building the Timeline component (Starting with React Skeleton)
2:51
2. Challenge - Create a useFollowedUsersPhotos custom hook
5:29
3. Challenge - Implementing the getUserFollowPhotos service function
3:30
4. useFollowedUsersPhotos signature implementation Challenge
7:37
5. Challenge - Adding more user information to getUserFollowedPhotos
5:54
6. Pulling more information from the photos based on the userId
8:38
Post Component

11 lessons1 hour 25 min

1. Creating the Post component
3:37
2. Creating the main Post container
7:16
3. Creating the Post image component
4:09
4. Creating the Post footer component
2:13
5. Creating the Post actions component
10:56
6. Processing user likes on photos
11:23
7. Creating the Post header component
8:48
8. Creating the Post comments component
11:00
9. Formatting our Post Comment date
3:18
10. Creating the AddComment component
10:32
11. Creating our AddComment component Form
12:12
Sidebar Component

9 lessons1 hour 8 min

1. Sidebar recap & adding a user component
7:48
2. Styling the sidebar User component
2:58
3. Adding memo to stop unnecessary re-renders of a User profile
4:44
4. Creating the Suggested Profiles component
10:31
5. Creating the Suggested Profile component
15:39
6. Styling the Suggested Profiles container
4:35
7. Get Suggested Profiles from the Firebase Service
10:11
8. Optimising our Suggested Profiles Query
3:19
9. Creating the Follow User Logic
8:34
Profile Page Component

11 lessons1 hour 54 min

1. Setting up the Profile components
11:39
2. getUserByUsername Logic
5:11
3. Working with useReducer to build a stateful Profile page
7:41
4. Setting our state values (profile, photos, followers) using useReducer
10:03
5. Rendering out a User's Profile photos
19:37
6. Building the Profile Header
11:42
7. Profile Header Meta Information
11:19
8. Displaying the User's Profile Full Name
1:52
9. Implementing the Follow Count on a User's Profile
9:08
10. Toggle a Follow Logic
8:22
11. Is User Following the Active Profile Logic
18:15
Authentication & Conclusion

4 lessons 37 min

1. IsUserLoggedIn Routes
10:31
2. Protected Routes
9:56
3. Refactors
6:17
4. Course Conclusion
10:20

You'll learn

Advanced React

Firebase

Tailwind CSS

One source of truth

React Router

Plain JS Redux

Handling login state

Validation

Creating a dashboard

Creating a not found page

Building a header

Smart-looking SVGs

Hooks

Building a timeline

Building a post

Styling a sidebar

Building a stateful profile page

And a lot more!

man

Prerequisites

Before taking this course, you should have a basic understanding of HTML, CSS, JavaScript and React. If you're not there yet, check out these free courses:

Learn JavaScript
209 lessons | 10 hours 26 min
with Per Harald Borgen
Per Harald BorgenBeginnerLearn React
177 lessons | 13 hours 46 min
with Bob Ziroll
Bob ZirollIntermediate

Meet your teacher

The course creator

Karl Hadwen

🍱 Building: @BentoMethod (featured by @Apple ) & 🌱 Tool Finder (http://toolfinder.co)

Follow me on twitter

Why this course rocks

If you have nailed the basics of HTML, CSS, JavaScript, and React and feel ready to take on a massive, real-world-style project, Karl Hadwen’s Build an Instagram Clone course is perfect for you!

Karl takes you through this project in a series of 11 challenge-based modules. You’ll learn to use React, Firebase, and Tailwind, and finish up with fully-functioning, pro-looking Instagram clone at the end of the course.

This course will take full advantage of Scrimba's interactive code-learning experience. As soon as you've learned a new concept, you'll jump into the code and solve a challenge to make sure that the knowledge sticks.
During the course, you’ll learn how to create a login page, a sign-up page, a header, a timeline, a profile page, a dashboard page, a post, a sidebar, a not found page, and much more!

By learning React, you'll drastically increase your chances of getting a job as a front-end developer, as the current demand for React developers by far outstrips the supply. So enroll now if you're ready to give your career a boost!

So get ready to take on your next web dev challenge, and tackle the Instagram Clone course today!

HomePlans & PricingGift membershipTeacher talent program

Community

Explore the communityPodcastYouTubeGet Scrimba emails

Courses

All courses Self-paced BootcampFree coursesPro courses

Company

About usSupport centerTermsPrivacy

Built with Imba