Build Instagram clone – React TailwindCSS Firebase

Build Instagram clone – React TailwindCSS Firebase, available at $54.99, has an average rating of 4.5, with 52 lectures, based on 2 reviews, and has 112 subscribers.

You will learn about Firebase Setup Tailwind CSS Firebase Authentication Firestore ReactJS Context API This course is ideal for individuals who are Developers who are familiar with HTML CSS and React and want to learn Fullstack development It is particularly useful for Developers who are familiar with HTML CSS and React and want to learn Fullstack development.

Enroll now: Build Instagram clone – React TailwindCSS Firebase

Summary

Title: Build Instagram clone – React TailwindCSS Firebase

Price: $54.99

Average Rating: 4.5

Number of Lectures: 52

Number of Published Lectures: 52

Number of Curriculum Items: 52

Number of Published Curriculum Objects: 52

Original Price: $27.99

Quality Status: approved

Status: Live

What You Will Learn

Firebase Setup
Tailwind CSS
Firebase Authentication
Firestore
ReactJS
Context API

Who Should Attend

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

Target Audiences

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

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

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Chapter 2: Getting Started

Lecture 1: Create React App and Installing Dependencies

Lecture 2: Refactoring unnecessary files, refactoring code

Lecture 3: Extensions required for this project

Lecture 4: Create folder structure for our application

Chapter 3: Firebase Setup

Lecture 1: Creating seed file

Lecture 2: Firebase Setup: Firestore database

Lecture 3: Firebase Authentication

Lecture 4: createContext in firebase.js

Lecture 5: Creating App in Firebase (SDK in config), Initialize, Add Seed)

Chapter 4: Getting started with FrontEnd

Lecture 1: Installing React Router Dom

Lecture 2: Create Routes

Lecture 3: Installing Tailwind CSS

Lecture 4: Start working on Login Page

Lecture 5: Continue working on Login Page (Part 2)

Lecture 6: Continue working on Login Page (Part 3)

Lecture 7: Tailwind.config – theme (Set colours)

Lecture 8: Login Functionality (with Firebase) (Part 4)

Lecture 9: Custom error message in login page

Lecture 10: Signup Page

Lecture 11: Check for user created is a duplicate(if username already exist in firebase)

Lecture 12: Not Found Page

Chapter 5: Dashboard Page

Lecture 1: Creating Dashboard Page

Lecture 2: Creating use-auth-listener.js Hook

Lecture 3: Creating users.js UserContext

Lecture 4: Header Component

Lecture 5: Working on Dashboard Page

Lecture 6: Working on Sidebar Component

Lecture 7: Creating sidebar folder

Lecture 8: Working on User Component

Lecture 9: Created Timeline.js

Chapter 6: Suggestions Component

Lecture 1: Working on suggestion.js

Lecture 2: Get suggested profiles

Lecture 3: Show suggested profiles

Lecture 4: Functionality: Remove followed user from suggestion

Lecture 5: Functionality: Update user’s following & followers

Chapter 7: Timeline

Lecture 1: Creating Post Component and custom hook usePhotos

Lecture 2: Creating getPhotos function

Lecture 3: Rendering out the photos (using React skeleton)

Chapter 8: Post

Lecture 1: Start Working on Post Component

Lecture 2: Components within Post – Header Component

Lecture 3: Image Component

Lecture 4: Actions (Service call in Firebase)

Lecture 5: Likes

Lecture 6: Show Comments

Lecture 7: Add Comments

Lecture 8: Add Protected Routes

Chapter 9: Profile

Lecture 1: Profile

Lecture 2: Continue working on Profile Page

Lecture 3: Header Component in Profile Page

Lecture 4: Profile Specific Header

Lecture 5: Photos Component in Profile Page

Instructors

Webo Pedia
Online Education

Rating Distribution

1 stars: 0 votes
2 stars: 0 votes
3 stars: 0 votes
4 stars: 1 votes
5 stars: 1 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu