Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Build an app with React, Redux and Firestore from scratch

Name: Build an app with React, Redux and Firestore from scratch
Rating: 4.7 (1860 reviews)

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

Created byNeil Cummings

Last updated 11/2025

English

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

Course content

18 sections • 210 lectures • 26h 28m total length

Introduction to the course7:36
Setting up the developer environment4:21
Creating the React Project7:25
Setting up VS Code8:48
What’s in the React project8:02
Saving our code into Source control5:33
Where to get the course assets and source code5:02

Introduction to section 37:49
Adding Tailwind CSS, DaisyUI and Motion9:12
Adding the EventDashboard component10:32
Adding a NavBar component10:00
Adding the EventDashboard content14:47
Adding the EventForm component6:45
Adding some sample data to work with10:14
Passing down props to components9:44
Using component state with useState12:05
Using the useEffect hook10:20
Using animations when components mount and unmount6:24
Summary of section 32:52
Explore tailwind setup, flexbox concepts, and component organization in a React app. Learn prop drilling, useState, useEffect, and Framer Motion for animation, with prep for CRUD in React.

Introduction to section 44:37
Form basics8:52
Creating an event9:04
Selecting an event to read and populate in the form8:51
Controlling components with a key10:03
Update event operation5:04
Delete event operation4:26
Master the delete operation in a react redux app by wiring a delete button on each event card, filtering the events by id in the dashboard, and preserving immutable state.
Updating the theme6:25
Summary of section 41:09
Implement CRUD operations with React using uncontrolled forms, explore prop drilling, and introduce Redux to manage global state for easier data access.

Introduction to section 64:12
Installing react router3:30
Configuring React Router6:23
Updating the Nav bar with NavLinks4:27
Animating the route transitions8:33
Adding a User menu to the nav bar8:29
Adding an Account slice9:03
Routing in code2:38
Setting up the Event detailed page6:01
Design the Event detailed header8:53
Design the Event detailed info3:51
Design the Event detailed chat3:25
Design the Event detailed sidebar3:35
Selecting an event in the detailed page12:11
Using the selected event to populate the detailed page13:52
Designing the home page4:18
Section 6 Challenge6:10
Challenge solution5:31
Summary of section 62:03

Introduction to section 76:33
Installing and setting up React Hook form10:24
Validating the inputs7:34
Creating a reusable uncontrolled text input11:12
Creating a reusable controlled text input7:42
Schema validation with Zod10:52
Creating a reusable text area input3:39
Creating a reusable select input5:41
The Date Time input6:39
Creating a place autocomplete part 17:54
Creating a place autocomplete part 212:21
Creating a place autocomplete part 38:57
Selecting the location with lat/lng11:00
Tidying up and testing the event form6:38
Adding a map component12:10
Adding a login form12:56
Create a reusable login form with Zod validation and react-hook-form, integrate sign-in with Redux, set up the login route and navbar link, and prepare toast notifications for feedback.
Validation errors3:43
Summary of section 71:24

Introduction to section 88:34
Setting up firebase9:36
Learn to integrate Firebase and Firestore, plug into your back end, and perform create, read, update, delete operations, while configuring a web app and starting in test mode.
Seeding data part 18:42
Seed Firestore with sample data using the Firebase Admin SDK by configuring a service account, generating a private key, and initializing the app to manage Firestore and user authentication.
Seeding data part 28:30
Seeding data part 35:58
Listening to data from Firestore8:41
Shaping the Firestore data8:52
Listening to a single document from Firestore12:29
Creating a Firestore slice8:22
Create a useCollection custom hook12:36
Converting Timestamps again9:35
Creating a useDocument hook11:48
Create a useFirestoreActions custom hook7:33
Updating an event in Firestore11:21
Fixing the loading issue2:30
Error handling6:22
Creating an Event in Firestore3:30
Deleting an Event in Firestore10:20
Summary of section 82:39

Introduction to section 93:46
Setting up auth in firebase2:21
Signing in with Firebase auth5:48
Preparing the user data in the account slice5:37
Update the account slice to map Firebase auth user data into an app user, resolve type issues, dispatch sign in, and enable login persistence for a seamless redux-driven experience.
Persisting the login7:20
Creating a centered card4:28
Registering users11:16
Social logins part 16:06
Social logins part 213:14
Introduction to Firestore security rules10:53
Server side validation8:50
Summary of section 91:34

Introduction to section 103:19
Creating a profile page8:08
Creating the profile content8:40
Creating the profile components6:43
Getting the profile data from Firestore6:46
Adding the edit mode for the current user9:33
Adding the profile form11:08
Designing the profile photos component7:00
Displaying the list of members part 112:10
Displaying the list of members part 29:01
Updating the profile links in the app3:24
Updating the create method with the current user6:15
Updating the event detailed header with user info6:04
Adding the attendance toggle function6:37
Updating the security rules5:44
Cancelling the event functionality10:30
Formatting the dates8:57
Adding a countdown timer for the events13:57
Summary of section 102:00

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-mastered, re-imagined and re-recorded in full as at April 2025*

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 April 2025.

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 Tailwind CSS, DaisyUI and Framer Motion
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.

Who this course is for:

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

Build an app with React, Redux and Firestore from scratch

What you'll learn

Explore related topics

Course content

Introduction to the course7 lectures • 47min

React concepts4 lectures • 23min

React basics12 lectures • 1hr 51min

CRUD operations in React9 lectures • 59min

Redux11 lectures • 1hr 13min

Routing19 lectures • 1hr 57min

Forms Revisited18 lectures • 2hr 27min

Firestore19 lectures • 2hr 38min

Firebase authentication12 lectures • 1hr 21min

Profiles19 lectures • 2hr 26min

Requirements

Description

Who this course is for: