Build an app with React, Redux and Firestore from scratch

Build an app with React, Redux and Firestore from scratch, available at $79.99, has an average rating of 4.63, with 404 lectures, based on 1830 reviews, and has 11279 subscribers.

You will learn about 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 This course is ideal for individuals who are Beginner developers who have familiarity with HTML, CSS and JS who want to learn about React and Redux or Beginner developers who want to learn about Firestore, Google's new database service It is particularly useful for Beginner developers who have familiarity with HTML, CSS and JS who want to learn about React and Redux or Beginner developers who want to learn about Firestore, Google's new database service.

Enroll now: Build an app with React, Redux and Firestore from scratch

Summary

Title: Build an app with React, Redux and Firestore from scratch

Price: $79.99

Average Rating: 4.63

Number of Lectures: 404

Number of Published Lectures: 190

Number of Curriculum Items: 404

Number of Published Curriculum Objects: 190

Original Price: $189.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

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

Target Audiences

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

* Re-recorded, rewritten and fully up to date as at September 2023*

This course has been completely rewritten and re-recorded from scratch using the tools and techniques available to us to build an application as at September 2023.

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 React hook 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.

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 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 course

We 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.

Course Curriculum

Chapter 1: Course introduction and getting started

Lecture 1: Introduction

Lecture 2: Setting up the project

Lecture 3: Setting up the developer environment

Lecture 4: Reviewing the project files

Lecture 5: Folder structure

Lecture 6: Souce control

Lecture 7: Where to get course assets and source code

Chapter 2: React concepts

Lecture 1: Introduction to section 2

Lecture 2: Why React?

Lecture 3: React concepts

Lecture 4: Intro to JSX

Lecture 5: React dev tools

Lecture 6: Decisions made on this course

Chapter 3: React basics

Lecture 1: Introduction to section 3

Lecture 2: Breaking up the UI into components

Lecture 3: Semantic UI introduction

Lecture 4: Building our first component

Lecture 5: Creating a nav bar

Lecture 6: Creating event list items

Lecture 7: Creating an event form

Lecture 8: Passing down props to components

Lecture 9: Using types with Typescript

Lecture 10: React component state

Lecture 11: The useEffect hook

Lecture 12: Summary

Chapter 4: CRUD operations in React

Lecture 1: Introduction to section 4

Lecture 2: Basic forms in react

Lecture 3: Creating an event

Lecture 4: Selecting events

Lecture 5: Controlled components with keys

Lecture 6: Updating events

Lecture 7: Deleting events

Lecture 8: Summary

Chapter 5: React Router

Lecture 1: Introduction to section 5

Lecture 2: Adding some components to route to

Lecture 3: Configuring the router

Lecture 4: Cleaning up the app

Lecture 5: Adding nav links and links

Lecture 6: Styling the home page

Lecture 7: Adding menus for the signed in user

Lecture 8: Faking authentication

Lecture 9: Event detailed page layout

Lecture 10: Event detailed page content

Lecture 11: Summary

Chapter 6: Redux

Lecture 1: Introduction to section 6

Lecture 2: React and Redux

Lecture 3: Setting up Redux

Lecture 4: Creating a scratch component

Lecture 5: Redux actions

Lecture 6: Redux dev tools

Lecture 7: Creating an event slice

Lecture 8: Creating the event actions

Lecture 9: Using the store to select a single event

Lecture 10: Dispatching the create/update actions

Lecture 11: Summary

Chapter 7: React hook form

Lecture 1: Introduction to section 7

Lecture 2: Setting up React hook form

Lecture 3: Adding validation

Lecture 4: Cleaning up the form

Lecture 5: The select input

Lecture 6: Adding a datepicker

Lecture 7: Re-enabling update and submit

Lecture 8: Adding modals part 1

Lecture 9: Adding modals part 2

Lecture 10: Adding a login form

Lecture 11: Adding an auth slice

Lecture 12: Summary

Chapter 8: Firestore

Lecture 1: Introduction to section 8

Lecture 2: Setting up Firebase Firestore

Lecture 3: Setting up linting in our app

Lecture 4: Adding data to firestore

Lecture 5: Listening to the data

Lecture 6: Shaping the firestore data

Lecture 7: Adding loading indicators

Lecture 8: Adding the create/update function to Firestore

Lecture 9: Adding a toast library to show notifications

Lecture 10: Getting an individual document

Lecture 11: Deleting data from Firestore

Lecture 12: Creating a generic redux slice

Lecture 13: Creating a Firestore hook

Lecture 14: Using the hook to get a single document

Lecture 15: Updating the event form

Lecture 16: Adding the Create/Update/Delete functions to the hook

Lecture 17: Cancelling events

Lecture 18: Summary

Chapter 9: Firebase authentication

Lecture 1: Introduction to section 9

Lecture 2: Logging in

Lecture 3: Shaping the data from Firestore

Lecture 4: Persisting the authentication

Lecture 5: Registering new users

Lecture 6: Handling authentication errors

Instructors

Neil Cummings
Professional freelance software developer

Rating Distribution

1 stars: 10 votes
2 stars: 14 votes
3 stars: 101 votes
4 stars: 450 votes
5 stars: 1255 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!

Menu