React JS & Firebase Complete Course (incl. Chat Application)

Create "real world" React JS applications connected to Firestore (Firebase). Redux, authentication + real time features!

4.10 (118 reviews)
Udemy
platform
English
language
Web Development
category
1,114
students
24.5 hours
content
Mar 2023
last update
$69.99
regular price

What you will learn

Develop real-world web application with React JS and Firebase

Understand the processes and concepts of React JS 2

Use gained knowledge to create your own Web Applications

Description

WHAT IS REACT JS?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components."

WHAT IS FIREBASE?

Firebase provides a real-time database and backend as a service. The service provides application developers an API that allows application data to be synchronized across clients and stored on Firebase's cloud.


THE COURSE

Students learn best when they're putting what they learn into practice straight away, so we've built this course around one great project (which will look fantastic in your career portfolio!):

In this course, we will build an application where users can participate in different services that can improve users' expertise in various fields.

We will start with the basics of React JS framework. We will create the initial layout, first pages, and routing.

The first section will not only be about React JS. We need a database to make our application dynamic and up to the standards. The database we will use in this course is cloud Firestore from Firebase. IN Firestore, we will keep different data types, for example, services, offers, collaborations, and users.

After the first section, you will start learning about firebase authentication. I will show you how to log in and register with Firebase. After the user is logged in, we will display our application with modifications only authenticated users can see.

The main idea of this application is to offer and subscribe to various services. For this reason, we will implement a page. where users can create service and where I get you familiar with form validation as well

After the service is created, it will be displayed on the Home page and offered to other users.

Later we will be creating functionality to trade services between the users. Every logged-in user can make an offer for service after submitting the offer. Then, it is up to the service owner if he is willing to accept or decline an offer. If the service owner accepts the offer, the user can create collaboration.

When all of the users are joined into collaboration, then cooperation can be started for a specific amount of time, and users can exchange messages. Once collaboration is created, the service owner will receive a message to participate in the partnership. After the partnership is finished, messaging is disabled.

In the last section, I will be talking about security rules for Firestore, and finally, we will deploy our application to Heroku so you can share it with your friends and family. This is just a short preview of all of the features, and there is much more prepared for you.


With over 24 hours of on-screen instruction, it doesn't matter whether you're planning to start your career as a developer or want to improve your programming skills. This is the right course for you!

Content

React Basics

Section Introduction
Project initialization
Framework deep dive
Functional Component
Class vs Functional Component
What is State ?
State in Functional component
Counter functional component
Counter class component
Props in class component
Props in functional component
Previous data in functional component
Jsconfig
Init layout + styles
Iterate services
Service item component
Routing
Create Link + Navbar section

State Management

Section Introduction
What is Redux
Connect function
Dispatch action + simple reducer
Services reducer
Add logger to dispatch
Init Firebase
Redux Promises
Middleware improvements
Add service detail page
Service reducer
Add API
Reducer improvements
Spinner component
Is fetching state
Redux thunk
Caching improvements
Enhancers

Authentication

Section Introduction
Login & Register page
Add useForm package
Validators
Custom validators
Custom validators part 2
Register User
Create user profile
Handle register response
Handle Login
Structural changes of App
Watch auth state changes
Display UI auth changes
Handle Logout
Fresh JS Loading
Fresh JS Loading part 2
Reset auth state
High order component
Custom HOC
Small Improvements Dispatch

Service Feature

Section Introduction
Service Create Page
Handle form submit
Create Service
User services page
User Services reducer
User services reducer rework
Modal component
Add modal content
Create user ref
Structural changes of API

Offer Feature

Section Introduction
Create offer
Send & Received Offers
Fetch Offers
Display Offers + Extract Data
Display offer in Service Item
Accept and Decline Offer Button
Accept & Decline Offer
Create collaboration and messages
Create Collaboration API
Mark offer as in collaboration

Messages Feature

Subscribe to messages
Create message component
Display actual messages
Mark message as read one

Collaboration Feature

Section Introduction
Auth reducer refactor
Collaboration List page
Collaboration Detail
Firebase functions
Check user connection
Check online status on firestore
Set offline on logout
Subscribe to collaborations
Display joined people
Watch profile changes
Display correct status
UI color changes of status
On send message function
Subscribe to messages
Display messages
Clean messages + Start collab button
Count expiration time
Timer Component
Timer fix
Handle Collaboration status
Small fixes
Improvements on detail page

Firestore Rules

Section Introduction
Rules introduction
Service Rules
More rules!

Application Improvements

Fixing logout, messages and register
Collaboration messages fix
Collaboration Rules
Application Testing

Deployment

Section Introduction
Git installation + Service fix
Deployment
Final testing part 1
Final testing part 2
Course Outro

Screenshots

React JS & Firebase Complete Course (incl. Chat Application) - Screenshot_01React JS & Firebase Complete Course (incl. Chat Application) - Screenshot_02React JS & Firebase Complete Course (incl. Chat Application) - Screenshot_03React JS & Firebase Complete Course (incl. Chat Application) - Screenshot_04

Reviews

Colton
April 23, 2020
It has been so far. He really goes into review. lol. Forgot A LOT MORE about State then what i thought!?!
Farai
March 20, 2020
Filip is a great instructor, he is detailed, the only problem is sound recording equipment , overall great React course
Terry
March 8, 2020
Helped me revise a lot of topics, plus plenty of new stuff thrown in for good measure. Filip's heart is in each course he delivers and he's by far the most attentive tutor I've studied under. In-depth, nuts and bolts and all.

Coupons

DateDiscountStatus
11/19/202093% OFF
expired
12/10/202093% OFF
expired

Charts

Price

React JS & Firebase Complete Course (incl. Chat Application) - Price chart

Rating

React JS & Firebase Complete Course (incl. Chat Application) - Ratings chart

Enrollment distribution

React JS & Firebase Complete Course (incl. Chat Application) - Distribution chart
2701762
udemy ID
12/12/2019
course created date
1/20/2020
course indexed date
Bot
course submited by