4.8 out of 5
4.8
10 reviews on Udemy

Build classified ads project with React and Firebase

A complete project with reactjs utilizing firebase authentication, firestore, storage and security rules
Instructor:
Farhan Farooq
47 students enrolled
English [Auto]
Handle authenticiation with firebase authentication
Save data in firebase firestore
Store files in firebase storage
Protect database and storage with firebase security rules

Overview

In 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.

Features

  • Authentication – account creation, login, logout, forgot password and reset password

  • Authenticated users will be able to upload, change or remove their profile photo

  • Seller can publish ad specifying the details of the product they want to sell

  • User can filter the ads by category or sort by price

  • User can view the ad on landing page as well as on seller’s profile page

  • Authenticated user can mark any ad as favorite or remove from his favorite ads list

  • Authenticated user can reach out to seller via phone or chat system within the app

  • Seller can delete own ad

  • Seller can mark the ad as sold

Prerequisites

Basic knowledge of Reactjs is required for this course which means you should know what is useEffect / useState / props / context etc.

Setup

1
Setup react app and firebase project

Authentication

1
Register new user
2
Check authentication state
3
Logout user
4
Login user
5
Forgot password
6
Reset password

Profile

1
User profile UI
2
Add / remove profile photo

Protected routes wrapper

1
Private route

Advertisement

1
Create an ad
2
Display ads on seller's profile
3
Toggle favorite ad
4
User's favorites list
5
Display ads on home page
6
Filter and sort ads
7
Ad detail page UI
8
Create custom hook
9
Delete an ad
10
Display seller's info on ad detail page

Chat

1
Initialize chat
2
Send message
3
Display chat history
4
Display conversation with selected user
5
Track users online status
6
Display last message
7
Display notification for new message

Deployment & firebase security rules

1
Deployment
2
Firebase security rules
You can view and review the lecture materials indefinitely, like an on-demand channel.
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!
4.8
4.8 out of 5
10 Ratings

Detailed Rating

Stars 5
6
Stars 4
4
Stars 3
0
Stars 2
0
Stars 1
0