Build an app with React, Redux and Firestore from scratch

Build an app with React, Redux and Firestore from scratch

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 52 Hours | 20.2 GB

Learn how to build a web app with React, Redux and Firestore from beginning to publishing

Do you want to learn React and Redux in the context of building a complete application? Do you want to learn about Firestore, the new Database offering from Google that provides ‘live data’ to our application? Are you the type of learner who gets most out of actually building an application rather than watching endless slides about how something is supposed to work? If so then this course is for you!

In this course we build a complete application from start to finish.

Every line of code is demonstrated and explained. We warm up by building a CRUD application in React, we then enhance it by adding Redux and following that we add in Firestore to provide the persistence layer for the application.

Here are just some of the things you will learn about in this course:

  • Setting up the developer environment
  • Creating a React application using the create-react-app utility from Facebook
  • Login and Register functionality using Firebase authentication
  • Adding social login for Facebook and Google into the application
  • Google maps and Places autocomplete integration
  • Photo uploading using drag and drop, with resizing and cropping of the images before upload
  • Adding a live chat system
  • Paging, Sorting and Filtering with Firestore
  • Infinite scroll for the pagination
  • Firestore database design
  • Creating reusable form components with Formik forms
  • Building a great looking application with Semantic UI
  • Many more things as well

Tools you need for this course

In this course all lessons are demonstrated using Visual Studio Code, a free (and really good) cross platform code editor. You can of course use your preferred IDE or Code editor of choice and any operating system you like… well as long as it’s either Max OSX, Windows or Linux.

What you’ll learn

  • Students will be able to create an application using React, Redux and Firestore by the end of this course.
  • Students will improve their javascript skills by taking this course
Table of Contents

Introduction
1 Course Overview
2 Introducing our Hands-On Case Study Cadabra.com
3 Udemy 101
4 Get the Course Materials
5 Cost of the Course + AWS Budget Setup

Domain 1 Collection
6 Collection Section Introduction
7 [Exercise] Kinesis Firehose, Part 2
8 [Exercise] Kinesis Firehose, Part 3
9 Troubleshooting Info for the Following Exercise
10 [Exercise] Kinesis Data Streams
11 SQS Overview
12 Kinesis Data Streams vs SQS
13 IoT Overview
14 IoT Components Deep Dive
15 Database Migration Service (DMS)
16 Direct Connect
17 Kinesis Data Streams Overview
18 Snowball
19 MSK Managed Streaming for Apache Kafka
20 Kinesis Producers
21 Kinesis Consumers
22 Kinesis Enhanced Fan Out
23 Kinesis Scaling
24 Kinesis Security
25 Kinesis Data Firehose
26 [Exercise] Kinesis Firehose, Part 1

Domain 2 Storage
27 S3 Overview
28 Glacier & Vault Lock Policies
29 S3 & Glacier Select
30 DynamoDB Overview
31 DynamoDB RCU & WCU
32 DynamoDB Partitions
33 DynamoDB APIs
34 DynamoDB Indexes LSI & GSI
35 DynamoDB DAX
36 DynamoDB Streams
37 DynamoDB TTL
38 S3 Storage Tiers
39 DynamoDB Security
40 DynamoDB Storing Large Objects
41 [Exercise] DynamoDB
42 ElastiCache Overview
43 S3 Lifecycle Rules
44 S3 Versioning
45 S3 Cross Region Replication
46 S3 ETags
47 S3 Performance
48 S3 Encryption
49 S3 Security

Domain 3 Processing
50 Section Introduction Processing
51 Glue ETL Developer Endpoints, Running ETL Jobs with Bookmarks
52 Glue Costs and Anti-Patterns
53 Elastic MapReduce (EMR) Architecture and Usage
54 EMR, AWS integration, and Storage
55 EMR Promises; Intro to Hadoop
56 Intro to Apache Spark
57 Spark Integration with Kinesis and Redshift
58 Hive on EMR
59 Pig on EMR
60 What is AWS Lambda
61 HBase on EMR
62 Presto on EMR
63 Zeppelin and EMR Notebooks
64 Hue, Splunk, and Flume
65 S3DistCP and Other Services
66 EMR Security and Instance Types
67 [Exercise] Elastic MapReduce, Part 1
68 [Exercise] Elastic MapReduce, Part 2
69 AWS Data Pipeline
70 Lambda Integration – Part 1
71 AWS Step Functions
72 Lambda Integration – Part 2
73 Lambda Costs, Promises, and Anti-Patterns
74 [Exercise] AWS Lambda
75 What is Glue + Partitioning your Data Lake
76 Glue, Hive, and ETL

Domain 4 Analysis
77 Section Introduction Analysis
78 [Exercise] Amazon Elasticsearch Service, Part 2
79 [Exercise] Amazon Elasticsearch Service, Part 3
80 Intro to Athena
81 Athena and Glue, Costs, and Security
82 [Exercise] AWS Glue and Athena
83 Redshift Intro and Architecture
84 Redshift Spectrum and Performance Tuning
85 Redshift Durability and Scaling
86 Intro to Kinesis Analytics
87 Redshift Distribution Styles
88 Redshift Sort Keys
89 Redshift Data Flows and the COPY command
90 Redshift Integration WLM Vacuum Anti-Patterns
91 Redshift Resizing (elastic vs. classic) and new Redshift features in 2020
92 [Exercise] Redshift Spectrum, Pt. 1
93 [Exercise] Redshift Spectrum, Pt. 2
94 Amazon Relational Database Service (RDS) and Aurora
95 Kinesis Analytics Costs; RANDOM CUT FOREST
96 [Exercise] Kinesis Analytics, Part 1
97 [Exercise] Kinesis Analytics, Part 2
98 Intro to Elasticsearch
99 Amazon Elasticsearch Service
100 [Exercise] Amazon Elasticsearch Service, Part 1

Domain 5 Visualization
101 Section Introduction Visualization
102 Intro to Amazon Quicksight
103 Quicksight Pricing and Dashboards; ML Insights
104 Choosing Visualization Types
105 [Exercise] Amazon Quicksight
106 Other Visualization Tools (HighCharts, D3, etc)

Domain 6 Security
107 Encryption 101
108 Policies – Advanced
109 CloudTrail
110 VPC Endpoints
111 S3 Encryption (Reminder)
112 KMS Overview
113 Cloud HSM Overview
114 AWS Services Security Deep Dive (13)
115 AWS Services Security Deep Dive (23)
116 AWS Services Security Deep Dive (33)
117 STS and Cross Account Access
118 Identity Federation

Everything Else
119 AWS Services Integrations
120 Instance Types for Big Data
121 EC2 for Big Data
122 AWS Cleanup

Preparing for the Exam
123 Exam Tips
124 State of Learning Checkpoint
125 Exam Walkthrough and Signup
126 Save 50% on your AWS Exam Cost!
127 Get an Extra 30 Minutes on your AWS Exam – Non Native English Speakers only

Practice Exam

Appendix Machine Learning topics for the legacy AWS Certified Big Data exam
128 Should you take this section of the course
129 Machine Learning 101
130 Classification Models
131 Amazon ML Service
132 SageMaker
133 Deep Learning 101
134 Note Amazon Machine Learning Service is now deprecated!
135 [Exercise] Amazon Machine Learning, Part 1
136 [Exercise] Amazon Machine Learning, Part 2

Wrapping Up
137 Congratulations! Now make sure you’re ready.
138 THANK YOU!
139 Bonus Lecture Special discounts for our other courses

Course introduction and getting started
1 Introduction
2 Setting up the project
3 Setting up the developer environment
4 React project contents
5 Hot Module Replacement
6 Folder structure
7 Source control
8 Course assets and source code

React concepts
9 Introduction
10 Why React
11 React concepts
12 Intro to JSX
13 React Dev tools
14 Decisions made on this course

Thinking in React
15 Introduction
16 React component state
17 Summary of section 3
18 Breaking up the UI into components
19 Intro to Semantic UI
20 Building our first component
21 Exports and imports
22 Navigation bar and styling
23 Event List Items
24 Creating an Event Form
25 Passing props down to child components

CRUD Operations in React
26 Introduction
27 Basic forms in React
28 Creating an event
29 Selecting an event to read
30 Controlled components with a key
31 Updating an event
32 Deleting an event
33 React class components
34 Summary of section 4

Routing in React
35 Introduction
36 Event Detailed Page content
37 Cleaning up the unused code
38 Summary of section 5
39 Adding some additional components to route to
40 Routing configuration
41 Using NavLinks and Links
42 Home page styling
43 Adding menus for authenticated and unauthenticated users
44 Adding fake authentication
45 Using the useHistory hook
46 Event Detailed Page structure

Introduction to Redux
47 Introduction
48 Getting events from the redux store
49 Dispatching event actions
50 Clean up
51 Scroll to top
52 Summary of section 6
53 React-Redux
54 Setting up Redux
55 Adding a sandbox area for experimenting with the code
56 Redux Actions
57 Action Creators
58 Redux Dev Tools
59 Creating the event reducer
60 RRF 6-9 Creating a root reducer

Forms revisited
61 Introduction
62 Date-FNS
63 Formik props
64 Modals
65 Adding a Modal Manager
66 Creating the sign up form
67 Adding an auth reducer
68 Hooking up the sign up form
69 Summary of section 7
70 Setting up Formik
71 Formik with less code
72 Form validation
73 Creating a reusable text input
74 Cleaning up the form
75 Creating a reusable text area
76 Creating a reusable select input
77 Creating a reusable date input

Google maps integration
78 Introduction
79 Summary of section 8
80 Getting the Google API keys
81 Setting up places autocomplete
82 Creating a custom place input
83 Using the place input
84 Narrowing the place input search results
85 Google maps react
86 Challenge solution
87 Adding the map to the Event Detailed Page

Asynchronous code
88 Introduction
89 Summary of section 9
90 Redux Thunk 101
91 Redux Thunk 102
92 Isolating the loading indicators
93 Adding toast notifications
94 Adding a mock API
95 Adding a loading component
96 Using placeholders to improve the UI
97 Adding an event filters component

Introduction to Firestore
98 Introduction
99 Adding an error component
100 Creating and updating events in Firestore
101 Creating and updating events in Firestore part 2
102 Deleting an event
103 Cancelling an event function
104 Adding a confirmation prompt
105 Summary of section 10
106 Setting up Firestore
107 Firestore document fields
108 Listening to Firestore data
109 Shaping the Firestore data
110 Restoring the loading indicator
111 Creating a custom hook
112 Adding a useFirestoreDoc hook
113 Handling not found documents

Authentication
114 Introduction
115 Adding the facebook login method
116 Adding Google login
117 Adding an account page
118 Adding additional user info into the auth reducer
119 Adding a password change function
120 App initialization
121 Summary of section 11
122 Logging in
123 Persisting the login
124 Signing out the user
125 Registering new users
126 Handling auth errors
127 Setting user profile data
128 Creating a social login component
129 Facebook login

User profiles
130 Introduction
131 Selecting other user profiles
132 Summary of section 12
133 Adding a profile page
134 Adding the profile content
135 Creating the redux actions
136 Connecting the profile page to the store
137 Adding an about page
138 Adding the profile form
139 Adding the update user actions
140 Initializing the app with the current user profile

Image upload
141 Introduction
142 Deleting a photo
143 Summary of section 13
144 Adding a profile photos page
145 Adding a photo upload widget
146 React dropzone
147 React cropper
148 Adding an upload image method
149 Using the upload method in the widget
150 Displaying the images
151 Setting the main photo

Firestore relationships
152 Introduction
153 Adding the user event filters
154 Adding the user event query
155 Adding profile actions for user events
156 Summary of section 14
157 Firestore Database design
158 Adding attendances to an event
159 Setting up the event detailed header
160 Adding the join event handler
161 Cancelling a user attendance
162 Adding the user nav links
163 Adding the filter functionality
164 Getting the filtered data

Adding chat with Firebase
165 Introduction
166 Summary of section 15
167 Setting up firebase
168 Setting up the chat form
169 Listening to the chat data
170 Displaying the comments
171 Improving the chat UI
172 Clearing the chat comments
173 Adding the reply functionality
174 Displaying the replies

Adding a following followers feature
175 Introduction
176 Firestore batches
177 Firestore batches part 2
178 Cloud functions introduction
179 Setting up cloud functions
180 Creating our own cloud functions
181 Firebase functions logs
182 Creating a personalized news feed
183 Adding functions for the feed
184 Listening to the news feed
185 Displaying the news feed events
186 Adding the firestore functions
187 Summary of section 16
188 Unfollow a user
189 Listening to the following data
190 Adding the following components
191 Listening to the followers data
192 Updating the following count
193 Updating the following user status
194 Clearing the followings

Pagination and data consistency
195 Introduction
196 Summary of section 17
197 Implementing pagination
198 Improving the paging UI
199 Infinite scroll
200 Fixing the event detailed page
201 Fixing the event filters
202 Dealing with duplicate data
203 Implementing data consistency
204 Updating security rules

Securing the application
205 Introduction
206 Summary of section 18
207 Checking anonymous access
208 Creating a modal to prompt login
209 Creating a private route
210 Connecting the router to the store
211 Redirecting the user with connected router
212 Showing the modal on click
213 More on Firestore security rules
214 Restricting API Key usage

Optimizing and publishing the app
215 Introduction
216 Optimizing the events
217 Optimizing the events part 2
218 Optimizing the profiles
219 Building the application
220 Service worker
221 Publishing our app to Firebase
222 Resolving issues with the app and redeploying
223 End of course summary

Legacy content
224 Legacy content

Course introduction and getting started – LEGACY CONTENT
225 Introduction
226 Source control
227 Section 1 summary
228 Exercise Files
229 Setting up the project
230 Visual Studio Code Extensions
231 Course Snippets
232 Reviewing the React project contents and startup
233 Hot Module Replacement
234 Folder Structure
235 Versions

React Concepts
236 Introduction
237 Why React
238 React Concepts
239 Introduction to JSX
240 React Developer tools
241 Decisions decisions…

Thinking in React
242 Introduction
243 Adding state to our application
244 Inverse data flow
245 Summary of section 3
246 Breaking up the UI into a component hierarchy
247 Semantic UI Introduction
248 Building our first component
249 Adding the Navigation bar and styling
250 Adding the event list items component
251 Adding the Event Form
252 Passing down static props to components
253 Identifying state

Forms 101
254 Introduction
255 Uncontrolled Forms
256 Controlled Forms
257 Submitting form data
258 Summary of section 4

Creating a CRUD application in React
259 Introduction
260 Selecting event to open
261 React lifecycle method – componentDidMount
262 React Lifecycle method – Alternative to componentWillReceiveProps
263 Updating the events
264 Deleting the events
265 Summary of section 5

React Router 5
266 Introduction
267 Stateless functional components
268 Routing configuration
269 Adding a home page
270 Adding Signed in and Signed out menus to the nav bar
271 Using the withRouter Higher Order Component
272 Internal navigation for our application
273 Summary of section 6

Introduction to Redux
274 Introduction
275 Summary of section 7
276 React Redux
277 Creating a test area to practice concepts
278 Redux store configuration
279 Connecting the store to our application
280 Creating our first actions
281 Creating a root reducer
282 Improving the dev experience
283 Reducing boilerplate code

Converting our app to use Redux
284 Introduction
285 Connecting the event detailed page to the store
286 Fixing the scroll issue on routing to a new page
287 Connecting the event form to the store
288 Connecting the event actions to the event form
289 Summary of section 8
290 Creating actions for Events
291 Creating the Event reducer
292 Connecting the event dashboard to the store
293 Connecting the event actions to the event dashboard
294 Creating the event detailed page structure
295 Adding the Event detailed page header component
296 Adding the Event detailed page info, sidebar and chat
297 Adding static data for the event detailed page

Redux forms 101
298 Redux Forms introduction
299 Creating a reusable Date input field
300 Hooking up the Date input to the event form
301 Summary of section 9
302 Redux forms setup
303 Creating a reusable Text input field
304 Event form changes and cleanup
305 Creating a reusable Text area input field
306 Creating a reusable Select input field
307 Form submission in Redux forms
308 Introduction to Revalidate
309 Setting up validation for the event form

Adding Google maps integration into our application
310 Introduction
311 Getting our Google API Keys
312 Setting up Places Autocomplete
313 Creating a reusable Place Input field
314 Narrowing the venue results to the selected city
315 Setting up Google Maps + Google Maps Challenge
316 Google maps challenge solution
317 Adding a Map component to our application
318 Summary of section 10

Modals
319 Introduction
320 Setting up our modals in Redux part 1
321 Setting up our modals in Redux part 2
322 Adding login and register modals
323 Creating an auth reducer
324 Hooking up the nav bar to the auth
325 Summary of section 11

Redux Thunk
326 Introduction
327 Redux thunk 101 part 1
328 Redux-Thunk 101 part 2
329 Isolating button loading indicators
330 Creating a mock API
331 Fetching events from the mock API
332 Adding a Loading Component
333 Summary of section 12

Loose Ends
334 Introduction
335 React Redux Toastr
336 Date FNS
337 Event Activity
338 Summary of section 13

Firestore introduction
339 Introduction
340 Creating the Firebase project
341 Setting up the store for Firestore
342 Adding data to Firestore
343 Listening to data from Firestore
344 Summary of section 14

Firebase authentication
345 Introduction
346 Adding Facebook login to our app
347 Adding Google login to our app
348 Managing the User profile data
349 Changing the nav bar display name
350 Adding the Account page
351 Updating the Password form
352 Attaching auth is ready to the app
353 Summary of section 15
354 Firebase login
355 Handling Firebase errors
356 Using withFirebase to sign out of the app
357 Creating the register method
358 Hooking up the register method to our app
359 Error handing in the Register form
360 Social login component
361 Facebook login setup

User management
362 Introduction
363 Setting up the basic user page form
364 Creating a reusable Radio input field
365 Adding the update user profile user action
366 Hooking the update user method to the form
367 Date consistency
368 Adding the about me page
369 Summary of section 16

Photo Uploads in our application
370 Introduction
371 Displaying the photos on the page
372 Dealing with duplicate photos on the page
373 Adding the delete photo method
374 Adding the set main photo method
375 Improving the User experience
376 Summary of section 17
377 Setting up Firebase Storage
378 Adding the Photos page
379 React Dropzone
380 React Cropper
381 Adding the photo upload method
382 Adding the method to the photo component
383 Using the debugger in VS Code
384 Connecting the photos component to Firestore

Challenge 1
385 Introduction to the challenge
386 Challenge set up
387 Challenge solution

Moving the Events into Firestore
388 Introduction
389 improving the cancel experience
390 React lifecycle method – componentWillUnmount
391 Adding conditionals to the buttons in the event detailed header
392 Adding the user signup to events
393 Adding cancel signup to the events
394 Setting the links in the app
395 Viewing other users profiles
396 App cleanup
397 React lazy load
398 Adding loading indicators to improve the user experience
399 Firestore Database design
400 Summary of section 19
401 Create event method
402 Hooking up the create event method to the event form
403 Getting data from Firestore
404 Updating the mapState function
405 Converting objects to arrays
406 Updating events
407 Adding the cancel event toggle

Paging, sorting and filtering
408 Introduction
409 Adding filtered events to the reducer state
410 Adding the events to the UI
411 Adding tab functionality to change the query
412 Summary of section 20
413 Preparation for paging
414 Filtering and Sorting
415 Setting up paging
416 Adding the paging for the events dashboard
417 Improving the paging experience
418 Infinite scroll
419 Building compound queries
420 Firestore composite indexes

Event Chat system
421 Introduction
422 Summary of section 21
423 Connect to Firebase
424 Sending a comment to firebase
425 Shaping the chat data
426 Adding the chat data to the component
427 Adding the reply form
428 Using dynamic form names in redux forms
429 Adding parent ids to comments
430 Displaying the chat with replies

Cloud functions
431 Introduction
432 Cloud functions setup
433 Creating our first cloud function
434 Checking the cloud function logs
435 Adding another cloud function
436 Reviewing the data in cloud functions
437 Adding the event activity feed
438 Making the event activity feed stick
439 Summary of section 22

Firestore data consistency
440 Introduction
441 Batch updates for the user photos
442 Batch updates for the events
443 Firestore transactions
444 Summary of section 23

Securing our application
445 Introduction
446 Implementing Firestore security rules
447 Firestore security rules simulator
448 Checking our permissions
449 Adding an unauth modal
450 Adding a redux auth wrapper
451 Improving the user experience for anonymous users
452 Adding a popup for anonymous users when clicking buttons
453 Summary of section 25

Finishing touches and publishing our application
454 Introduction
455 Publishing to Firebase
456 End of course summary
457 Adding more loading indicators
458 Adding a Not Found component
459 Dealing with not found events
460 Final clean up and finishing touches
461 Fixing a bug in the application
462 Building the project
463 Examining the bundle size
464 Service Workers

Post course Challenge
465 Challenge introduction
466 Challenge set up
467 Challenge hints
468 Challenge solution part 1
469 Challenge solution part 2
470 Challenge solution part 3
471 Challenge solution part 4
472 Challenge solution part 5

Bonus – Course updates – June 2019
473 Course update June 2019 – whats changed and what to do if you mid course

Bonus – Revents Alpha, React Hooks and the future of this course
474 Introduction to Revents Alpha
475 React Hooks used in Revents Alpha
476 React Redux Hooks used in Revents Alpha
477 React Redux Firebase Alpha, setup, usage and the future of this course