Build an app with React Redux and Firestore from scratch

Build an app with React Redux and Firestore from scratch

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

Requirements

Students should be familiar with HTML, CSS and Javascript
A computer with either Windows, Mac OSX or Linux is required
We will make use of (free) Google services so a Google account is necessary

Description

*** Re-recorded, rewritten and fully up to date as at  July 2020***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 environmentCreating a React application using the create-react-app utility from FacebookLogin and Register functionality using Firebase authenticationAdding social login for Facebook and Google into the applicationGoogle maps and Places autocomplete integrationPhoto uploading using drag and drop, with resizing and cropping of the images before uploadAdding a live chat systemPaging, Sorting and Filtering with FirestoreInfinite scroll for the paginationFirestore database designCreating reusable form components with Formik formsBuilding a great looking application with Semantic UIMany more things as wellTools you need for this courseIn 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.Is this course for you?This course is extremely practical.  About 90% of our time is spent actually building the application.  If you are the type of person who gets the most out of learning ‘by doing’, then this course will be for you.Please note that we do not start from zero coding knowledge.   Whilst this is aimed at beginner/intermediate level, you will need to have some basic javascript knowledge (not a lot is needed) or if you are coming from another programming language then you should be fine with this course.  It’s designed to take you from beginner level to having the skills to build a much more significant application.What do we do on this courseWe are building a social events application, much like Facebook events or Meetup.   Building a social application gives us opportunity to build more than just a simple CRUD application.

Overview

Section 1: Course introduction and getting started

Lecture 1 Introduction

Lecture 2 Setting up the project

Lecture 3 Setting up the developer environment

Lecture 4 React project contents

Lecture 5 Hot Module Replacement

Lecture 6 Folder structure

Lecture 7 Source control

Lecture 8 Course assets and source code

Section 2: React concepts

Lecture 9 Introduction

Lecture 10 Why React

Lecture 11 React concepts

Lecture 12 Intro to JSX

Lecture 13 React Dev tools

Lecture 14 Decisions made on this course

Section 3: Thinking in React

Lecture 15 Introduction

Lecture 16 Breaking up the UI into components

Lecture 17 Intro to Semantic UI

Lecture 18 Building our first component

Lecture 19 Exports and imports

Lecture 20 Navigation bar and styling

Lecture 21 Event List Items

Lecture 22 Creating an Event Form

Lecture 23 Passing props down to child components

Lecture 24 React component state

Lecture 25 Summary of section 3

Section 4: CRUD Operations in React

Lecture 26 Introduction

Lecture 27 Basic forms in React

Lecture 28 Creating an event

Lecture 29 Selecting an event to read

Lecture 30 Controlled components with a key

Lecture 31 Updating an event

Lecture 32 Deleting an event

Lecture 33 React class components

Lecture 34 Summary of section 4

Section 5: Routing in React

Lecture 35 Introduction

Lecture 36 Adding some additional components to route to

Lecture 37 Routing configuration

Lecture 38 Using NavLinks and Links

Lecture 39 Home page styling

Lecture 40 Adding menus for authenticated and unauthenticated users

Lecture 41 Adding fake authentication

Lecture 42 Using the useHistory hook

Lecture 43 Event Detailed Page structure

Lecture 44 Event Detailed Page content

Lecture 45 Cleaning up the unused code

Lecture 46 Summary of section 5

Section 6: Introduction to Redux

Lecture 47 Introduction

Lecture 48 React-Redux

Lecture 49 Setting up Redux

Lecture 50 Adding a sandbox area for experimenting with the code

Lecture 51 Redux Actions

Lecture 52 Action Creators

Lecture 53 Redux Dev Tools

Lecture 54 Creating the event reducer

Lecture 55 RRF 6-9 Creating a root reducer

Lecture 56 Getting events from the redux store

Lecture 57 Dispatching event actions

Lecture 58 Clean up

Lecture 59 Scroll to top

Lecture 60 Summary of section 6

Section 7: Forms revisited

Lecture 61 Introduction

Lecture 62 Setting up Formik

Lecture 63 Formik with less code

Lecture 64 Form validation

Lecture 65 Creating a reusable text input

Lecture 66 Cleaning up the form

Lecture 67 Creating a reusable text area

Lecture 68 Creating a reusable select input

Lecture 69 Creating a reusable date input

Lecture 70 Date-FNS

Lecture 71 Formik props

Lecture 72 Modals

Lecture 73 Adding a Modal Manager

Lecture 74 Creating the sign up form

Lecture 75 Adding an auth reducer

Lecture 76 Hooking up the sign up form

Lecture 77 Summary of section 7

Section 8: Google maps integration

Lecture 78 Introduction

Lecture 79 Getting the Google API keys

Lecture 80 Setting up places autocomplete

Lecture 81 Creating a custom place input

Lecture 82 Using the place input

Lecture 83 Narrowing the place input search results

Lecture 84 Google maps react

Lecture 85 Challenge solution

Lecture 86 Adding the map to the Event Detailed Page

Lecture 87 Summary of section 8

Section 9: Asynchronous code

Lecture 88 Introduction

Lecture 89 Redux Thunk 101

Lecture 90 Redux Thunk 102

Lecture 91 Isolating the loading indicators

Lecture 92 Adding toast notifications

Lecture 93 Adding a mock API

Lecture 94 Adding a loading component

Lecture 95 Using placeholders to improve the UI

Lecture 96 Adding an event filters component

Lecture 97 Summary of section 9

Section 10: Introduction to Firestore

Lecture 98 Introduction

Lecture 99 Setting up Firestore

Lecture 100 Firestore document fields

Lecture 101 Listening to Firestore data

Lecture 102 Shaping the Firestore data

Lecture 103 Restoring the loading indicator

Lecture 104 Creating a custom hook

Lecture 105 Adding a useFirestoreDoc hook

Lecture 106 Handling not found documents

Lecture 107 Adding an error component

Lecture 108 Creating and updating events in Firestore

Lecture 109 Creating and updating events in Firestore part 2

Lecture 110 Deleting an event

Lecture 111 Cancelling an event function

Lecture 112 Adding a confirmation prompt

Lecture 113 Summary of section 10

Section 11: Authentication

Lecture 114 Introduction

Lecture 115 Logging in

Lecture 116 Persisting the login

Lecture 117 Signing out the user

Lecture 118 Registering new users

Lecture 119 Handling auth errors

Lecture 120 Setting user profile data

Lecture 121 Creating a social login component

Lecture 122 Facebook login

Lecture 123 Adding the facebook login method

Lecture 124 Adding Google login

Lecture 125 Adding an account page

Lecture 126 Adding additional user info into the auth reducer

Lecture 127 Adding a password change function

Lecture 128 App initialization

Lecture 129 Summary of section 11

Section 12: User profiles

Lecture 130 Introduction

Lecture 131 Adding a profile page

Lecture 132 Adding the profile content

Lecture 133 Creating the redux actions

Lecture 134 Connecting the profile page to the store

Lecture 135 Adding an about page

Lecture 136 Adding the profile form

Lecture 137 Adding the update user actions

Lecture 138 Initializing the app with the current user profile

Lecture 139 Selecting other user profiles

Lecture 140 Summary of section 12

Section 13: Image upload

Lecture 141 Introduction

Lecture 142 Adding a profile photos page

Lecture 143 Adding a photo upload widget

Lecture 144 React dropzone

Lecture 145 React cropper

Lecture 146 Adding an upload image method

Lecture 147 Using the upload method in the widget

Lecture 148 Displaying the images

Lecture 149 Setting the main photo

Lecture 150 Deleting a photo

Lecture 151 Summary of section 13

Section 14: Firestore relationships

Lecture 152 Introduction

Lecture 153 Firestore Database design

Lecture 154 Adding attendances to an event

Lecture 155 Setting up the event detailed header

Lecture 156 Adding the join event handler

Lecture 157 Cancelling a user attendance

Lecture 158 Adding the user nav links

Lecture 159 Adding the filter functionality

Lecture 160 Getting the filtered data

Lecture 161 Adding the user event filters

Lecture 162 Adding the user event query

Lecture 163 Adding profile actions for user events

Lecture 164 Summary of section 14

Section 15: Adding chat with Firebase

Lecture 165 Introduction

Lecture 166 Setting up firebase

Lecture 167 Setting up the chat form

Lecture 168 Listening to the chat data

Lecture 169 Displaying the comments

Lecture 170 Improving the chat UI

Lecture 171 Clearing the chat comments

Lecture 172 Adding the reply functionality

Lecture 173 Displaying the replies

Lecture 174 Summary of section 15

Section 16: Adding a following / followers feature

Lecture 175 Introduction

Lecture 176 Adding the firestore functions

Lecture 177 Unfollow a user

Lecture 178 Listening to the following data

Lecture 179 Adding the following components

Lecture 180 Listening to the followers data

Lecture 181 Updating the following count

Lecture 182 Updating the following user status

Lecture 183 Clearing the followings

Lecture 184 Firestore batches

Lecture 185 Firestore batches part 2

Lecture 186 Cloud functions introduction

Lecture 187 Setting up cloud functions

Lecture 188 Creating our own cloud functions

Lecture 189 Firebase functions logs

Lecture 190 Creating a personalized news feed

Lecture 191 Adding functions for the feed

Lecture 192 Listening to the news feed

Lecture 193 Displaying the news feed events

Lecture 194 Summary of section 16

Section 17: Pagination and data consistency

Lecture 195 Introduction

Lecture 196 Implementing pagination

Lecture 197 Improving the paging UI

Lecture 198 Infinite scroll

Lecture 199 Fixing the event detailed page

Lecture 200 Fixing the event filters

Lecture 201 Dealing with duplicate data

Lecture 202 Implementing data consistency

Lecture 203 Updating security rules

Lecture 204 Summary of section 17

Section 18: Securing the application

Lecture 205 Introduction

Lecture 206 Checking anonymous access

Lecture 207 Creating a modal to prompt login

Lecture 208 Creating a private route

Lecture 209 Connecting the router to the store

Lecture 210 Redirecting the user with connected router

Lecture 211 Showing the modal on click

Lecture 212 More on Firestore security rules

Lecture 213 Restricting API Key usage

Lecture 214 Summary of section 18

Section 19: Optimizing and publishing the app

Lecture 215 Introduction

Lecture 216 Optimizing the events

Lecture 217 Optimizing the events part 2

Lecture 218 Optimizing the profiles

Lecture 219 Building the application

Lecture 220 Service worker

Lecture 221 Publishing our app to Firebase

Lecture 222 Resolving issues with the app and redeploying

Lecture 223 End of course summary

Section 20: Update Oct 2021 – React 17 & Firebase v9

Lecture 224 Updating the Node Module packages to latest versions

Lecture 225 Updating the Firestore and Firebase methods with the new modular imports

Section 21: Legacy content

Lecture 226 Where to access legacy content

Beginner developers who have familiarity with HTML, CSS and JS who want to learn about React and Redux,Beginner developers who want to learn about Firestore, Google’s new database service

Course Information:

Udemy | English | 23h 52m | 9.45 GB
Created by: Neil Cummings

You Can See More Courses in the Developer >> Greetings from CourseDown.com