English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 24.5 Hours | 10.2 GB
Create “real world” React JS applications connected to Firestore (Firebase). Redux, authentication + real time features!
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 realtime 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 in to practice straight away, so we’ve build this course around one really great project (which will look fantastic in your career portfolio!):
In this course we are going to build 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 initial layout, first pages and routing .
First section will be not only about React JS . To make our application dynamic and up to the standards we need database. Database we will use in this course is cloud Firestore from Firebase. IN Firestore we will keep different types of data as for example services, offers, collaborations and users.
After first section you will start learning about firebase authentication. I will show you how to login and register with firebase. After user will be logged in we will display our application with couple of modifications only authenticated user can see.
Main idea of this application is to offer and subscribe to various services. For this reason we will implement page. where users can create service and where i get you familiar with form validation as well
After service will be created it will be displayed on 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 a service. After offer is submitted then its up to service owner if he is willing to accept or decline an offer. In case service owner will accept offer then user can create collaboration.
Once collaboration is created then service owner will receive message to participate in collaboration. When all of the users are joined into collaboration then collaboration can be started for specific amount of time and users can exchange messages. After collaboration is finished, messaging is disabled.
In last section I will be talking about security rules for Firestore and finally we will deploy are application to Heroku so you can share it with your friends and family. This is just short preview of all of the features and there is much much more prepared for you.
What you’ll 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
Table of Contents
React Basics
1 Section Introduction
2 Props in class component
3 Props in functional component
4 Previous data in functional component
5 Jsconfig
6 Init layout + styles
7 Iterate services
8 Service item component
9 Routing
10 Create Link + Navbar section
11 Project initialization
12 Framework deep dive
13 Functional Component
14 Class vs Functional Component
15 What is State
16 State in Functional component
17 Counter functional component
18 Counter class component
State Management
19 Section Introduction
20 Add service detail page
21 Service reducer
22 Add API
23 Reducer improvements
24 Spinner component
25 Is fetching state
26 Redux thunk
27 Caching improvements
28 Enhancers
29 What is Redux
30 Connect function
31 Dispatch action + simple reducer
32 Services reducer
33 Add logger to dispatch
34 Init Firebase
35 Redux Promises
36 Middleware improvements
Authentication
37 Section Introduction
38 Handle Login
39 Structural changes of App
40 Watch auth state changes
41 Display UI auth changes
42 Handle Logout
43 Fresh JS Loading
44 Fresh JS Loading part 2
45 Reset auth state
46 High order component
47 Custom HOC
48 Login & Register page
49 Small Improvements Dispatch
50 Add useForm package
51 Validators
52 Custom validators
53 Custom validators part 2
54 Register User
55 Create user profile
56 Handle register response
Service Feature
57 Section Introduction
58 Create user ref
59 Structural changes of API
60 Service Create Page
61 Handle form submit
62 Create Service
63 User services page
64 User Services reducer
65 User services reducer rework
66 Modal component
67 Add modal content
Offer Feature
68 Section Introduction
69 Create Collaboration API
70 Mark offer as in collaboration
71 Create offer
72 Send & Received Offers
73 Fetch Offers
74 Display Offers + Extract Data
75 Display offer in Service Item
76 Accept and Decline Offer Button
77 Accept & Decline Offer
78 Create collaboration and messages
Messages Feature
79 Subscribe to messages
80 Create message component
81 Display actual messages
82 Mark message as read one
Collaboration Feature
83 Section Introduction
84 Display joined people
85 Watch profile changes
86 Display correct status
87 UI color changes of status
88 On send message function
89 Subscribe to messages
90 Display messages
91 Clean messages + Start collab button
92 Count expiration time
93 Timer Component
94 Auth reducer refactor
95 Timer fix
96 Handle Collaboration status
97 Small fixes
98 Improvements on detail page
99 Collaboration List page
100 Collaboration Detail
101 Firebase functions
102 Check user connection
103 Check online status on firestore
104 Set offline on logout
105 Subscribe to collaborations
Firestore Rules
106 Section Introduction
107 Rules introduction
108 Service Rules
109 More rules!
Application Improvements
110 Fixing logout, messages and register
111 Collaboration messages fix
112 Collaboration Rules
113 Application Testing
Deployment
114 Section Introduction
115 Git installation + Service fix
116 Deployment
117 Final testing part 1
118 Final testing part 2
119 Course Outro
Resolve the captcha to access the links!