Build Advanced Blog App with React & Firebase from Scratch
Build Advanced Blog App with React & Firebase from Scratch, available at $44.99, has an average rating of 4.1, with 71 lectures, based on 17 reviews, and has 94 subscribers.
You will learn about 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 This course is ideal for individuals who are React Developer who wanted to learn how firebase work with React JS and looking out for project in their portfolio It is particularly useful for React Developer who wanted to learn how firebase work with React JS and looking out for project in their portfolio.
Enroll now: Build Advanced Blog App with React & Firebase from Scratch
Summary
Title: Build Advanced Blog App with React & Firebase from Scratch
Price: $44.99
Average Rating: 4.1
Number of Lectures: 71
Number of Published Lectures: 71
Number of Curriculum Items: 71
Number of Published Curriculum Objects: 71
Original Price: $19.99
Quality Status: approved
Status: Live
What You Will 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 Should Attend
- React Developer who wanted to learn how firebase work with React JS and looking out for project in their portfolio
Target Audiences
- React Developer who wanted to learn how firebase work with React JS and looking out for project in their portfolio
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 Paginationin 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.
Course Curriculum
Chapter 1: Introduction
Lecture 1: Introduction
Lecture 2: Environment Set-Up
Chapter 2: Project Set-Up
Lecture 1: Set-up React project and installing packages
Lecture 2: Folder & File Structure
Lecture 3: Generating Code snippet in file
Lecture 4: Configure Bootstrap and Toastify
Lecture 5: Routing in App
Lecture 6: Working on Header
Lecture 7: Active styling on Header
Chapter 3: Firebase Set-Up
Lecture 1: Firebase Config
Lecture 2: Config Image Upload
Chapter 4: Firebase Email Authentication
Lecture 1: Sign-In Form
Lecture 2: Sign-Up Form
Lecture 3: Email Sign-Up with Firebase
Lecture 4: Email Sign-In with Firebase
Lecture 5: Persist User
Lecture 6: Logout
Chapter 5: Creating Blog with Firestore
Lecture 1: Working on Blog Form
Lecture 2: Testing Image Upload
Lecture 3: Creating Blog
Lecture 4: Protecting Route
Chapter 6: Homepage and Blog Detail Page
Lecture 1: Card Component
Lecture 2: Listing Blogs on Homepage
Lecture 3: Blog Detail Page
Lecture 4: Spinner
Chapter 7: Update and Delete with Firestore
Lecture 1: Delete Blog
Lecture 2: Populate Blog data on Form
Lecture 3: Update Blog
Chapter 8: Tags, Most Popular & Trending Section
Lecture 1: Tags Section
Lecture 2: Most Popular Section
Lecture 3: Using owl carousel to show Trending section
Lecture 4: Fixing Trending section issue
Lecture 5: Not Found and About Page
Chapter 9: Initial App Deployment
Lecture 1: App Responsive
Lecture 2: Fixing App Issue
Lecture 3: Initial Deployment
Chapter 10: Blog Search
Lecture 1: Search Input field
Lecture 2: Writing Search query to fetch blog
Lecture 3: Combine search with multiple field
Lecture 4: Fixing Search Issue
Chapter 11: Implement Load More (Lazy Loading) feature
Lecture 1: Enable load more to fetch blog
Lecture 2: Hide Load More for blog not found
Lecture 3: Disable Load more when search performed
Chapter 12: Tag and Category Page
Lecture 1: Modify Blog Section component
Lecture 2: Create Tag page
Lecture 3: Get count based on Category
Lecture 4: Add Category section on Homepage
Lecture 5: Add Category page
Lecture 6: Scroll to Top feature
Chapter 13: Related Blog, Like & Comment feature
Lecture 1: Create Card component for Related blog
Lecture 2: Query to fetch Related Blog
Lecture 3: Display Related Blog
Lecture 4: Show Tag for particular blog
Lecture 5: Add field in Firestore DB and React App
Lecture 6: Working on User comment component
Lecture 7: Add Comment box
Lecture 8: Post comment using Firebase Query
Lecture 9: Working on Like Component
Lecture 10: Fixing Like icon
Lecture 11: Like Blog using Firebase Query
Lecture 12: Fixing Tooltip
Lecture 13: Replace Most Popular with Recent Blog section
Lecture 14: Add Vertical bar Scroll on Comment box and Spinner on Detail Page
Lecture 15: Show Like and Comment count on Related Blog Card
Chapter 14: Firebase Pagination
Lecture 1: Set-up Pagination in App
Lecture 2: Pagination Component
Lecture 3: Writing Firebase Pagination Query
Lecture 4: Testing and Fix Pagination issue
Chapter 15: Deployment
Lecture 1: Fixing Minor Bug in App
Lecture 2: Fix Delete blog and limit blog on Most Popular section
Lecture 3: Re-Deploy App on Firebase
Instructors
-
Saumitra Vishal
Web Developer
Rating Distribution
- 1 stars: 1 votes
- 2 stars: 2 votes
- 3 stars: 1 votes
- 4 stars: 3 votes
- 5 stars: 10 votes
Frequently Asked Questions
How long do I have access to the course materials?
You can view and review the lecture materials indefinitely, like an on-demand channel.
Can I take my courses with me wherever I go?
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!
You may also like
- Top 10 Video Editing Courses to Learn in November 2024
- Top 10 Music Production Courses to Learn in November 2024
- Top 10 Animation Courses to Learn in November 2024
- Top 10 Digital Illustration Courses to Learn in November 2024
- Top 10 Renewable Energy Courses to Learn in November 2024
- Top 10 Sustainable Living Courses to Learn in November 2024
- Top 10 Ethical AI Courses to Learn in November 2024
- Top 10 Cybersecurity Fundamentals Courses to Learn in November 2024
- Top 10 Smart Home Technology Courses to Learn in November 2024
- Top 10 Holistic Health Courses to Learn in November 2024
- Top 10 Nutrition And Diet Planning Courses to Learn in November 2024
- Top 10 Yoga Instruction Courses to Learn in November 2024
- Top 10 Stress Management Courses to Learn in November 2024
- Top 10 Mindfulness Meditation Courses to Learn in November 2024
- Top 10 Life Coaching Courses to Learn in November 2024
- Top 10 Career Development Courses to Learn in November 2024
- Top 10 Relationship Building Courses to Learn in November 2024
- Top 10 Parenting Skills Courses to Learn in November 2024
- Top 10 Home Improvement Courses to Learn in November 2024
- Top 10 Gardening Courses to Learn in November 2024