Build an Instagram Clone in React

Unlock CourseGet started!

Join 1417 other students

Sign in to get
Access to 30+ free courses
New courses added monthly
Weekly coding challenge
Join a friendly community
Unlock Course
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
New courses monthly
Subscribe now!
The course creator Karl Hadwen

with Karl Hadwen

1417 students enrolled

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 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 lessons - 1 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 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 lessons - 1 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 lessons - 1 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 lessons - 1 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 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!
The course creator

Meet your teacher

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!

Go Pro!
All courses|Sign in
|Sign up
All courses
DashboardConnect to DiscordFind a courseBillingSettingsNew scrim
Sign out
Discord Twitter YouTube GitHub
ResourcesBlogFAQTermsPrivacy
CoursesAll courses Intro coursesLearn JavaScriptLearn React
CompanyAbout usContact usSupport chatGift membership
Built with Imba