Build classified ads project with React and Firebase

Focused View

Farhan Farooq

6:05:31

100 View

1. Setup

1.1 1-setup.zip

1. Setup react app and firebase project.mp4

10:23

2. Authentication

1.1 2 - user registration.zip

1. Register new user.mp4

24:52

2.1 3 - track change in auth state.zip

2. Check authentication state.mp4

07:26

3.1 4 - logout user.zip

3. Logout user.mp4

05:06

4.1 5 - login user.zip

4. Login user.mp4

03:41

5.1 6 - forgot password.zip

5. Forgot password.mp4

08:14

6.1 7 - reset password.zip

6. Reset password.mp4

07:08

3. Profile

1.1 8 - user profile ui.zip

1. User profile UI.mp4

17:15

2.1 9 - profile photo add remove.zip

2. Add remove profile photo.mp4

20:03

4. Protected routes wrapper

1.1 10 - private route.zip

1. Private route.mp4

05:35

5. Advertisement

1.1 11 - sell.zip

1. Create an ad.mp4

23:25

2.1 12 - display ads on seller profile page.zip

2. Display ads on sellers profile.mp4

16:20

3.1 13 - toggle favorite ad.zip

3. Toggle favorite ad.mp4

11:14

4.1 14 - user favorites.zip

4. Users favorites list.mp4

12:38

5.1 15 - display ads on home page.zip

5. Display ads on home page.mp4

05:20

6.1 16 - filter and sort ads.zip

6. Filter and sort ads.mp4

10:57

7.1 17 - ad page ui.zip

7. Ad detail page UI.mp4

14:48

8.1 18 - custom hook.zip

8. Create custom hook.mp4

13:21

9.1 19 - delete an ad.zip

9. Delete an ad.mp4

05:48

10.1 20 - ad page seller info.zip

10. Display sellers info on ad detail page.mp4

26:48

6. Chat

1.1 21 - initialize chat.zip

1. Initialize chat.mp4

23:32

2.1 22 - send message.zip

2. Send message.mp4

13:56

3.1 23 - display chat history.zip

3. Display chat history.mp4

15:41

4.1 24 - display messages.zip

4. Display conversation with selected user.mp4

21:24

5.1 25 - track online status.zip

5. Track users online status.mp4

09:54

6.1 26 - last msg.zip

6. Display last message.mp4

10:11

7.1 27 - notification.zip

7. Display notification for new message.mp4

06:38

7. Deployment & firebase security rules

1. Deployment.mp4

05:15

2. Firebase security rules.mp4

08:38

Description

A complete project with reactjs utilizing firebase authentication, firestore, storage and security rules

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

Who is this for?

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

More details

Description
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.
Who this course is for:
Anyone who knows basic reactjs and would like to build project with react and firebase 9

User Reviews

Rating

average 0

Total votes0

Focused display

I am Farhan Farooq. I am an instructor. Programming is my passion. I have finance background but I was eager to learn programming so I learned JavaScript and after that PythonMy skills are HTML, CSS, JavaScript, React, React Native, Python and Flask. I will publish courses on JavaScript and Python and their libraries on Udemy.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.