Courses
All coursesFrontend PathFrontend Bootcamp

Not sure where to start?

Let us help you find your perfect course.
PricingCreate AccountLog in
Why Scrimba?
Courses
All coursesFrontend PathFrontend Bootcamp

Not sure where to start?

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

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

Unlock CourseGet started!

Join 2277 other students

Log in to get

Access to 30+ free courses
Interactive hands-on content
Challenge weeks - code to win!
Join a friendly community
Unlock Course
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, bootcamps, 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 screencasts spread across 11 modules.

two girls
Welcome and Overview

4 lessons18 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 lessons35 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 lessons20 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 lessons37 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. 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 lessons59 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 lessons34 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

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

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

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 lessons37 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 for free
161 lessons | 7 hours
with Per Harald Borgen
Per Harald BorgenBeginnerLearn React for free
148 lessons | 11 hours
with Bob Ziroll
Bob ZirollIntermediateHTML & CSS crash course
31 lessons | 4 hours
with Kevin Powell
Kevin PowellBeginner

Meet your teacher

The course creator

Karl Hadwen

Im a JavaScript and React developer with over ten years of experience creating highly functional and scalable e-commerce websites. I also run a YouTube channel focused on React, JavaScript, and GraphQL. Follow me on Twitter: @karlhadwen

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 membershipFAQHire a React developer

Community

Explore the communityCommunity HandbookPodcastsYouTube Blog

Courses

All courses Free coursesPro coursesLearn JavaScriptLearn React

Company

About usSupport centerCareersTermsPrivacy

Built with Imba