Build classified ads project with React and Firebase

A complete project with reactjs utilizing firebase authentication, firestore, storage and security rules
Build classified ads project with React and Firebase
File Size :
3.74 GB
Total length :
6h 6m



Farhan Farooq


Last update




Build classified ads project with React and Firebase

What you’ll learn

Handle authenticiation with firebase authentication
Save data in firebase firestore
Store files in firebase storage
Protect database and storage with firebase security rules

Build classified ads project with React and Firebase


Basic knowledge of Reactjs is required


OverviewIn this course we will build a classified advertisement website where users will be able to buy and sell products.The tech stack will be React, Bootstrap and Firebase. We will work with a few features provided by firebase such as authentication, firestore as database and firebase storage to store images. We will use the latest firebase version 9 which is based on modular approach. We will use many functions provided by firebase for authentication, firestore and storage which are usually used in any medium scale website.Once we are done with our project, we will then deploy it on vercel and also we will see how to secure firestore and storage with firebase security rules.FeaturesAuthentication – account creation, login, logout, forgot password and reset passwordAuthenticated users will be able to upload, change or remove their profile photoSeller can publish ad specifying the details of the product they want to sellUser can filter the ads by category or sort by priceUser can view the ad on landing page as well as on seller’s profile pageAuthenticated user can mark any ad as favorite or remove from his favorite ads listAuthenticated user can reach out to seller via phone or chat system within the appSeller can delete own adSeller can mark the ad as soldPrerequisitesBasic knowledge of Reactjs is required for this course which means you should know what is useEffect / useState / props / context etc.


Section 1: Setup

Lecture 1 Setup react app and firebase project

Section 2: Authentication

Lecture 2 Register new user

Lecture 3 Check authentication state

Lecture 4 Logout user

Lecture 5 Login user

Lecture 6 Forgot password

Lecture 7 Reset password

Section 3: Profile

Lecture 8 User profile UI

Lecture 9 Add / remove profile photo

Section 4: Protected routes wrapper

Lecture 10 Private route

Section 5: Advertisement

Lecture 11 Create an ad

Lecture 12 Display ads on seller’s profile

Lecture 13 Toggle favorite ad

Lecture 14 User’s favorites list

Lecture 15 Display ads on home page

Lecture 16 Filter and sort ads

Lecture 17 Ad detail page UI

Lecture 18 Create custom hook

Lecture 19 Delete an ad

Lecture 20 Display seller’s info on ad detail page

Section 6: Chat

Lecture 21 Initialize chat

Lecture 22 Send message

Lecture 23 Display chat history

Lecture 24 Display conversation with selected user

Lecture 25 Track users online status

Lecture 26 Display last message

Lecture 27 Display notification for new message

Section 7: Deployment & firebase security rules

Lecture 28 Deployment

Lecture 29 Firebase security rules

Anyone who knows basic reactjs and would like to build project with react and firebase 9

Course Information:

Udemy | English | 6h 6m | 3.74 GB
Created by: Farhan Farooq

You Can See More Courses in the Developer >> Greetings from

New Courses

Scroll to Top