Build Instagram clone - React TailwindCSS Firebase
- Description
- Curriculum
- FAQ
- Reviews
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
-
11Installing React Router DomVideo lesson
-
12Create RoutesVideo lesson
-
13Installing Tailwind CSSVideo lesson
-
14Start working on Login PageVideo lesson
-
15Continue working on Login Page (Part 2)Video lesson
-
16Continue working on Login Page (Part 3)Video lesson
-
17Tailwind.config - theme (Set colours)Video lesson
-
18Login Functionality (with Firebase) (Part 4)Video lesson
-
19Custom error message in login pageVideo lesson
-
20Signup PageVideo lesson
-
21Check for user created is a duplicate(if username already exist in firebase)Video lesson
-
22Not Found PageVideo lesson
-
23Creating Dashboard PageVideo lesson
-
24Creating use-auth-listener.js HookVideo lesson
-
25Creating users.js UserContextVideo lesson
-
26Header ComponentVideo lesson
-
27Working on Dashboard PageVideo lesson
-
28Working on Sidebar ComponentVideo lesson
-
29Creating sidebar folderVideo lesson
-
30Working on User ComponentVideo lesson
-
31Created Timeline.jsVideo lesson
-
40Start Working on Post ComponentVideo lesson
-
41Components within Post - Header ComponentVideo lesson
-
42Image ComponentVideo lesson
-
43Actions (Service call in Firebase)Video lesson
-
44LikesVideo lesson
-
45Show CommentsVideo lesson
-
46Add CommentsVideo lesson
-
47Add Protected RoutesVideo lesson
External Links May Contain Affiliate Links read more