Build an app with React, Redux and Firestore from scratch from Udemy

* 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. Please note that this is a 23 hour course (not 46 hours) as both the new version of the course and the previous (legacy) version of the course are available at this time.

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.

What's inside

Learning objectives

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

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

Syllabus

Course introduction and getting started

Introduction

Setting up the project

Setting up the developer environment

Reviewing the project files

Folder structure

Souce control

Where to get course assets and source code

React concepts

Introduction to section 2

Why React?

Intro to JSX

React dev tools

Decisions made on this course

React basics

Introduction to section 3

Breaking up the UI into components

Semantic UI introduction

Building our first component

Creating a nav bar

Creating event list items

Creating an event form

Passing down props to components

Using types with Typescript

React component state

The useEffect hook

Summary

CRUD operations in React

Introduction to section 4

Basic forms in react

Creating an event

Selecting events

Controlled components with keys

Updating events

Deleting events

React Router

Introduction to section 5

Adding some components to route to

Configuring the router

Cleaning up the app

Adding nav links and links

Styling the home page

Adding menus for the signed in user

Faking authentication

Event detailed page layout

Event detailed page content

Redux

Introduction to section 6

React and Redux

Setting up Redux

Creating a scratch component

Redux actions

Redux dev tools

Creating an event slice

Creating the event actions

Using the store to select a single event

Dispatching the create/update actions

React hook form

Introduction to section 7

Setting up React hook form

Adding validation

Cleaning up the form

The select input

Adding a datepicker

Re-enabling update and submit

Adding modals part 1

Adding modals part 2

Adding a login form

Adding an auth slice

Firestore

Introduction to section 8

Setting up Firebase Firestore

Setting up linting in our app

Adding data to firestore

Listening to the data

Shaping the firestore data

Adding loading indicators

Adding the create/update function to Firestore

Adding a toast library to show notifications

Getting an individual document

Deleting data from Firestore

Creating a generic redux slice

Creating a Firestore hook

Using the hook to get a single document

Updating the event form

Adding the Create/Update/Delete functions to the hook

Cancelling events

Firebase authentication

Introduction to section 9

Logging in

Shaping the data from Firestore

Persisting the authentication

Registering new users

Handling authentication errors

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Builds a foundational understanding of the React, Redux, and Firestore frameworks

Ideal for learners with a basic understanding of JavaScript who seek to enhance their web development skills

Provides exposure to a diverse range of practical tools and techniques for building modern applications

Led by an experienced instructor with a proven track record in the field

Covers the latest version of the React, Redux, and Firestore frameworks (as of September 2023)

Requires proficiency in JavaScript; prior experience with React and Redux is recommended

Reviews summary

Excellent react app building course

Learners say this well-structured course is easy to follow and beginner-friendly. They praise the engaging lectures and ample examples, saying it has helped them understand React, Redux, and Firestore.

The instructor, Sal Jade, is knowledgeable and experienced.

"Sal's background as a teacher really shows in the way she structures her courses and in the way she produces the content."

"She really knows her stuff and is a great resource for mastering the tarot!"

Sal Jade explains concepts in an understandable way.

"good easy to understand"

"easy to understand and lots of examples"

"I've found the topics easy to remember so far"

Great for beginners to learn React, Redux, and Firestore.

"It was great course for beginners."

"Easy to understand for beginners."

"I am a total beginner and the explanations are great to understand the tarot clearly!"

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Build an app with React, Redux and Firestore from scratch with these activities:

Follow React and Redux Tutorials

Show steps

Supplement your learning by following guided tutorials that provide hands-on experience and reinforce your understanding of React and Redux concepts.

Browse courses on React

Show steps

Identify reputable online platforms or instructors that offer React and Redux tutorials
Choose tutorials that align with your learning goals and experience level
Follow the tutorials step-by-step, building projects and practicing concepts
Troubleshoot any issues you encounter and seek assistance when needed

Solve React and Redux Practice Problems

Show steps

Strengthen your problem-solving skills and reinforce your understanding of React and Redux concepts by working through practice problems.

Browse courses on React

Show steps

Find online resources or textbooks that provide practice problems
Set aside regular time for solving practice problems
Work through the problems step-by-step, writing code and testing your solutions
Review your solutions and identify areas for improvement

Attend a React and Redux Workshop

Show steps

Enhance your practical understanding of React and Redux concepts and techniques by participating in a workshop led by experienced professionals.

Browse courses on React

Show steps

Research and identify relevant workshops in your area or online
Register and attend the workshop
Actively participate and ask questions to clarify concepts
Apply what you learned to your own project or coursework

Three other activities

Expand to see all activities and additional details

Show all six activities

Create a Social Events Application

Show steps

Create a full-stack social events application from scratch using React, Redux, and Firestore, allowing you to practice and apply the concepts learned in the course.

Browse courses on React

Show steps

Set up the project and install dependencies
Create the React application using create-react-app utility
Implement Login and Register functionality using Firebase authentication
Integrate social login (Facebook/Google) into the application
Implement Google maps and Places autocomplete integration

Form a Study Group with Peers

Show steps

Gain diverse perspectives, reinforce concepts, and practice problem-solving through regular discussions and collaboration with peers.

Browse courses on React

Show steps

Identify classmates or colleagues interested in forming a study group
Establish a regular meeting schedule and set goals
Take turns presenting concepts and leading discussions
Work together on practice problems and assignments
Provide feedback and support to each other

Write a Blog Post on React and Redux Best Practices

Show steps

Deepen your understanding by researching and sharing your insights on best practices in leveraging React and Redux for building efficient and scalable applications.

Browse courses on React

Show steps

Research and gather information on React and Redux best practices
Organize your thoughts and outline the content
Write and edit the blog post, ensuring clarity and accuracy
Publish your blog post on a relevant platform
Share your blog post with peers and instructors for feedback

Career center

Learners who complete Build an app with React, Redux and Firestore from scratch will develop knowledge and skills that may be useful to these careers:

Front-End Developer

The course's hands-on approach will help you develop real-world Front End Developer skills, such as building user interfaces and implementing interactive features using JavaScript libraries and frameworks like React, Redux, and Firestore. The project-based learning will provide you with a strong foundation in web development and prepare you to take on complex front-end challenges in your professional role.

See salaries and explore the career path for Front-End Developer

React Developer

The course is tailor-made for individuals interested in becoming React Developers. With a focus on practical implementation, you'll learn how to build interactive and responsive user interfaces using React, Redux, and Firestore. The course's project-based approach will provide you with a portfolio of real-world projects to showcase your skills and increase your chances of success in this in-demand field.

See salaries and explore the career path for React Developer

Redux Developer

If you're aspiring to become a Redux Developer, this course offers a solid foundation. You'll learn how to manage application state effectively using Redux, a powerful state management library for React applications. The course's hands-on approach will equip you with the skills to implement Redux in real-world projects, making you a valuable asset to any development team.

See salaries and explore the career path for Redux Developer

UI Engineer

Aspiring UI Engineers will find this course particularly valuable. It focuses on building user interfaces using React, Redux, and Firestore, providing you with a comprehensive understanding of the tools and techniques used in UI development. The course's emphasis on practical implementation will equip you with the skills to create user-friendly and visually appealing interfaces for web applications.

See salaries and explore the career path for UI Engineer

Full Stack Engineer

This course offers a comprehensive introduction to the fundamentals of Full Stack development with React, Redux, and Firestore. By building a fully functional social events application, you'll gain hands-on experience in handling data, managing state, and creating user interfaces. This will help you develop a solid foundation for a career as a Full Stack Engineer, enabling you to work on both the front-end and back-end aspects of web applications.

See salaries and explore the career path for Full Stack Engineer

JavaScript Developer

The course is designed to enhance your JavaScript skills, making you a more competitive candidate for JavaScript Developer roles. You'll learn how to build interactive and dynamic web applications using React, Redux, and Firestore, which are essential technologies in modern JavaScript development. The course's hands-on approach will provide you with the practical experience necessary to succeed in this field.

See salaries and explore the career path for JavaScript Developer

Software Engineer

As a Software Engineer, you'll benefit from the comprehensive training this course provides in React, Redux, and Firestore. These are essential technologies for modern web development, and the course's focus on practical application will give you a competitive edge in the job market. By mastering these technologies, you'll be well-equipped to take on complex software development projects and contribute to cutting-edge applications.

See salaries and explore the career path for Software Engineer

Web Developer

This course may be beneficial for aspiring Web Developers. It provides a solid foundation in React, Redux, and Firestore, which are widely used technologies in web development. By building a full-stack social events application, you'll gain hands-on experience in all aspects of web development, making you a versatile candidate for web development roles.

See salaries and explore the career path for Web Developer

Mobile Developer

While primarily focused on web development, the course's coverage of React Native may be beneficial for Mobile Developers. React Native is a popular framework for building cross-platform mobile applications, and the course provides an introduction to its features and capabilities. This knowledge can enhance your mobile development skills and make you a more well-rounded candidate in the job market.

See salaries and explore the career path for Mobile Developer

Data Engineer

This course may be of interest to individuals considering a career as a Data Engineer. It introduces Firestore, a NoSQL database service from Google, and explores its features and capabilities. While not a comprehensive guide to data engineering, the course provides a foundation for understanding how to work with and manage data in web applications, which is a valuable skill for Data Engineers.

See salaries and explore the career path for Data Engineer

Product Manager

For those interested in Product Management, this course offers insights into the technical aspects of web development. By understanding how React, Redux, and Firestore are used to build and manage web applications, you can better communicate with your development team and make informed decisions about product features and functionality. This knowledge will enhance your ability to define and deliver successful digital products.

See salaries and explore the career path for Product Manager

UX Designer

UX Designers may find this course helpful as it provides a glimpse into the technical side of web development. Understanding the capabilities and limitations of React, Redux, and Firestore can inform your design decisions and enable you to create user experiences that are both functional and technically feasible. This knowledge will enhance your ability to collaborate with developers and deliver user-centric digital products.

See salaries and explore the career path for UX Designer

Business Analyst

Business Analysts can benefit from this course by gaining an understanding of the technical aspects of web development. By learning about React, Redux, and Firestore, you can better assess the feasibility of software solutions and communicate effectively with development teams. This knowledge will enable you to bridge the gap between business requirements and technical implementation, leading to more successful project outcomes.

See salaries and explore the career path for Business Analyst

Technical Writer

For Technical Writers, this course provides valuable insights into the technologies used in web development. By understanding how React, Redux, and Firestore work, you can create accurate and informative documentation that helps developers and users alike. This knowledge will enhance your ability to convey complex technical concepts in a clear and accessible manner.

See salaries and explore the career path for Technical Writer

Quality Assurance Engineer

This course may be beneficial for Quality Assurance Engineers who want to expand their knowledge of web development technologies. By learning about React, Redux, and Firestore, you can better understand the codebase you are testing and identify potential issues more effectively. This knowledge will enhance your ability to ensure the quality and reliability of web applications.

See salaries and explore the career path for Quality Assurance Engineer