Build Instagram clone - React TailwindCSS Firebase

Build Instagram clone - React TailwindCSS Firebase

Building an Mini full-stack Instagram clone using React, Tailwindcss and Firebase

New Course
Course Instructor: Sarfaraz Kasmani

Course Outcomes

  • JSX and Rendering templates
  • Props and State
  • React hooks like useState() and useEffect()
  • Functional React components
  • Handling user event
  • Creating and organising components
  • Building real-world React applicationss
  • Firebase Authentication,, ,,,,

Course Structure

61 lectures8h 25m total duration

  Lecture 1 - Introduction 
2min

About This Course

The stack you will use: React (custom hooks, useContext, useState, useEffect, useRef), Firebase (Firestore/auth), Tailwind CSS.

In this React Tutorial, we will build an Instagram clone! This React project has multiple pages: login, sign up, dashboard (to view/like/comment on photos), and user profiles.

The sign-in page will connect to Firebase when a user tries to sign in, and when a user signs up, we will use Firebase auth to store the user in the Firebase auth database. I built this application using React, JavaScript, Firebase and for styling I used Tailwind CSS (which is amazing).

You will need knowledge of React to not struggle on this tutorial (useState, useEffect, useContext) and you will need some knowledge of JavaScript to get you by.

You need to have basic knowledge of HTML, CSS and Javascript.

Everyone who wants to advance their full stack developer skills with work experience of building real applications in a developer environment should enroll in this program.

During the course we are going to use latest version of React - React 18.

As far as concepts we are going to cover

Firebase Authentication

Functional React components

React hooks like useState() and useEffect()

Handling user events

JSX and Rendering templates

Props and State

Creating and organising components

Building real-world React applications

Used by learners at

Microsoft
Amazon
Google

This course is interactive

Interactive courses include hands-on coding exercises to practice as you learn. You practice exercises in a VS Code like IDE without any installation/setup.

Screenshot of codedamn IDE

Course Requirements

  • Developers who are familiar with HTML CSS and React and want to learn Fullstack development

Course Instructor

Sarfaraz Kasmani
Software Engineer and Digital Marketer
Sarfaraz Kasmani
4.5 Instructor rating
28 Ratings
304 Students
7 Courses

I am Sarfaraz Kasmani a Front End Developer and Digital Marketer from Mumbai, India. I am having more than 9 years of experience in the field of Front End Development and Digital Marketing. I'm excit...View profile

Upgrade to a Pro account and unlock more courses for accelerated learning. Instant feedback, interactive learning and more.

Free

  • 100+ coding courses
  • Certificate of completion
  • Hands-on practice
  • 24x7 doubt solving with AI
  • 100+ projects to practice
  • In-depth project feedback
  • AWS cloud sandboxes

Pro

  • 100+ coding courses
  • Certificate of completion
  • Hands-on practice
  • 24x7 doubt solving with AI
  • 100+ projects to practice
  • In-depth project feedback
  • AWS cloud sandboxes
Upgrade To Pro