Build Advanced Blog App with React & Firebase from Scratch

Focused View

Saumitra Vishal

8:09:04

165 View

1. Introduction

1. Introduction.mp4

05:05

2. Environment Set-Up.mp4

01:11

2. Project Set-Up

1. Set-up React project and installing packages.mp4

03:05

2. Folder & File Structure.mp4

02:19

3. Generating Code snippet in file.mp4

00:42

4. Configure Bootstrap and Toastify.mp4

01:42

5. Routing in App.mp4

04:11

6. Working on Header.mp4

09:16

7. Active styling on Header.mp4

05:41

3. Firebase Set-Up

1. Firebase Config.mp4

05:21

2. Config Image Upload.mp4

01:37

4. Firebase Email Authentication

1. Sign-In Form.mp4

12:49

2. Sign-Up Form.mp4

04:01

3. Email Sign-Up with Firebase.mp4

07:40

4. Email Sign-In with Firebase.mp4

01:49

5. Persist User.mp4

05:32

6. Logout.mp4

03:17

5. Creating Blog with Firestore

1. Working on Blog Form.mp4

16:28

2. Testing Image Upload.mp4

09:03

3. Creating Blog.mp4

12:01

4. Protecting Route.mp4

01:56

6. Homepage and Blog Detail Page

1. Card Component.mp4

12:00

2. Listing Blogs on Homepage.mp4

07:59

3. Blog Detail Page.mp4

12:01

4. Spinner.mp4

03:02

7. Update and Delete with Firestore

1. Delete Blog.mp4

07:10

2. Populate Blog data on Form.mp4

06:37

3. Update Blog.mp4

05:24

8. Tags, Most Popular & Trending Section

1. Tags Section.mp4

06:14

2. Most Popular Section.mp4

07:00

3. Using owl carousel to show Trending section.mp4

12:12

4. Fixing Trending section issue.mp4

06:10

5. Not Found and About Page.mp4

02:34

9. Initial App Deployment

1. App Responsive.mp4

03:43

2. Fixing App Issue.mp4

07:13

3. Initial Deployment.mp4

08:31

10. Blog Search

1. Search Input field.mp4

16:23

2. Writing Search query to fetch blog.mp4

10:11

3. Combine search with multiple field.mp4

03:19

4. Fixing Search Issue.mp4

08:47

11. Implement Load More (Lazy Loading) feature

1. Enable load more to fetch blog.mp4

13:33

2. Hide Load More for blog not found.mp4

01:54

3. Disable Load more when search performed.mp4

03:55

12. Tag and Category Page

1. Modify Blog Section component.mp4

06:37

2. Create Tag page.mp4

12:01

3. Get count based on Category.mp4

06:14

4. Add Category section on Homepage.mp4

06:26

5. Add Category page.mp4

05:46

6. Scroll to Top feature.mp4

06:49

13. Related Blog, Like & Comment feature

1. Create Card component for Related blog.mp4

06:58

2. Query to fetch Related Blog.mp4

08:17

3. Display Related Blog.mp4

09:10

4. Show Tag for particular blog.mp4

02:22

5. Add field in Firestore DB and React App.mp4

02:08

6. Working on User comment component.mp4

10:15

7. Add Comment box.mp4

08:54

8. Post comment using Firebase Query.mp4

08:55

9. Working on Like Component.mp4

16:17

10. Fixing Like icon.mp4

01:40

11. Like Blog using Firebase Query.mp4

07:24

12. Fixing Tooltip.mp4

05:45

13. Replace Most Popular with Recent Blog section.mp4

06:50

14. Add Vertical bar Scroll on Comment box and Spinner on Detail Page.mp4

03:57

15. Show Like and Comment count on Related Blog Card.mp4

03:46

14. Firebase Pagination

1. Set-up Pagination in App.mp4

08:26

2. Pagination Component.mp4

07:18

3. Writing Firebase Pagination Query.mp4

17:18

4. Testing and Fix Pagination issue.mp4

04:29

15. Deployment

1. Fixing Minor Bug in App.mp4

08:37

2. Fix Delete blog and limit blog on Most Popular section.mp4

05:06

3. Re-Deploy App on Firebase.mp4

10:41

Description

Build and Deploy Advanced Blog App using Firebase with feature Auth, CRUD, Search, Load More, Like, Comment & Pagination

What You'll Learn?

Create a React project from scratch
Learn the CRUD operations including create, read, update and delete using Firebase Firestore
Create a nice image carousel using Owl Carousel package
Learn to upload image using Firebase Storage
Learn react router version 6 (latest version) to create routes and use hooks like useNavigate, useParams & useLocation
Learn how to sign up/sign-in the users using email & password with Firebase
Learn how to deploy React app on Firebase
Learn to use react toastify to create nice alert message
Learn how to use Bootstrap 5 and Sass to style React Component
Learn useEffect and useState react hooks
Use Firebase Firestore DB to store and fetch data
Work with latest versions like React JS 18 and Firebase 9
Learn to implement complex feature for ex:- Like, Comment, Pagination, Search & Load More (Lazy Loading) using Firebase Query
Learn how to make app responsive using Bootstrap 5 & Sass
Learn to protect other user data from Update & Delete

Who is this for?

React Developer who wanted to learn how firebase work with React JS and looking out for project in their portfolio

More details

Description
Hello and Welcome to this most advanced course on creating Blogging Application using technology likeÂ React JS 18, Firebase v9, Bootstrap 5 & Sass.
This course is perfect for someone who has little knowledge of HTML, CSS and JavaScript. We are not saying that you need to be master in JavaScript but the concepts like Loops and functions should be familiar to you. If you know ES6 thatâ€™s great, if not, donâ€™t worry, ES6 is also covered in this course.
In this course, we are going to implement feature like authentication user can login or register using email password with firebase, user can create blog once he logged into the app, only authorize user can create the blog, user can delete the blog and also he can update the blog. Update and delete operation only perform by those user who create their blog. Hence user canâ€™t delete or update blog which is created by different user. So, we have also provided the protection over here. We will be using Firebase Firestore DB to store blog data. We are also going to implement Load More feature which is similar to lazy loading. You can also view the blogs based on specific Tag or Or you can also view the blog based on specific Category and we are also going to display the category count per blog. We are also going to implement Search functionality. We are going to have nice Carousel for Image on our App. On detail page, we are going to some advanced feature for example :- authorized user can Like any blog or he can post Comment on blog. And at the end, we will implement Pagination in our App with Firebase.

We will be writing a lot of different Firebase Query to achieve above all functionality in our blog application. We will see how to use limit, limitToLast, orderBy, where, startAt, startAfter, endAt, endBefore and many more method in firebase query to implement all these feature in our blog application.

You will build everything from scratch by enrolling into this course . We are going to start with some simple stuff and then we will move to more complex topic . As we go along side building this application , you will learn React fundamental like functional component and their reusability then react file & folder structure and you are going to learn how state & props work along with important event like onChange & onSubmit event listener. We are going to learn hooks like useState which is responsible for managing state inside our component and useEffect to handle application side effect like fetching the data from firebase/firestore. Also you are going to learn how to create route, how to use useParam, useLocation and useNavigate using latest version of react router v6. We will be using Boostrap 5 & Sass to style of our component in this project. We will be using react toastify to show alert message. And once we implement all feature we are going to deploy our blog application on firebase so that u can share with your friend, clients or you can put it on your portfolio.

Note:- Course will definitely update with some new functionality in near future. Also your suggestion are welcome if you wanted me to add specific feature.

Who this course is for:
React Developer who wanted to learn how firebase work with React JS and looking out for project in their portfolio

User Reviews

Rating

average 0

Total votes0

Focused display

More than 5 year of working experience as Web Developer in industry level. Expertise in technology like React, Angular, Node, Java & Python. Also I have also experience in design framework like Bootstrap, Material-UI & Ant Design. Provided scalable solution to the client of different domain like Banking, E-Commerce and Health Care. I have played a key role on migrating their application that build using old technology into React. Currently, React framework is on peak in market if you have to build scalable web application. And React become powerful if you inject Redux. Redux can be quite complex especially for beginner. That's the reason I am here to teach you to build Web Application using React-Redux in easiest way.

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.