Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Life Purpose Meditation Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
2021-01-31 13:09:55
30-Day Money-Back Guarantee
Development Web Development React

Build an app with React, Redux and Firestore from scratch

Learn how to build a web app with React, Redux and Firestore from beginning to publishing
Bestseller
Rating: 4.7 out of 54.7 (1,418 ratings)
7,857 students
Created by Neil Cummings
Last updated 1/2021
English
English [Auto]
30-Day Money-Back Guarantee

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
Curated for the Udemy for Business collection

Course content

20 sections • 224 lectures • 23h 14m total length

  • Preview06:25
  • Preview06:21
  • Preview10:58
  • Preview09:18
  • Preview03:29
  • Preview06:27
  • Preview06:56
  • Course assets and source code
    01:39

  • Introduction
    02:28
  • Why React
    04:07
  • React concepts
    05:09
  • Intro to JSX
    04:15
  • React Dev tools
    04:16
  • Decisions made on this course
    06:55

  • Introduction
    02:17
  • Breaking up the UI into components
    04:09
  • Intro to Semantic UI
    12:00
  • Building our first component
    03:51
  • Exports and imports
    04:39
  • Navigation bar and styling
    11:24
  • Event List Items
    07:49
  • Creating an Event Form
    04:08
  • Passing props down to child components
    09:30
  • React component state
    11:54
  • Summary of section 3
    02:21

  • Introduction
    03:19
  • Basic forms in React
    11:08
  • Creating an event
    07:22
  • Selecting an event to read
    07:09
  • Controlled components with a key
    05:58
  • Updating an event
    05:30
  • Deleting an event
    02:41
  • React class components
    06:14
  • Summary of section 4
    01:40

  • Introduction
    04:20
  • Adding some additional components to route to
    01:53
  • Routing configuration
    06:13
  • Using NavLinks and Links
    04:03
  • Home page styling
    07:19
  • Adding menus for authenticated and unauthenticated users
    05:24
  • Adding fake authentication
    03:45
  • Using the useHistory hook
    03:28
  • Event Detailed Page structure
    05:33
  • Event Detailed Page content
    07:34
  • Cleaning up the unused code
    06:10
  • Summary of section 5
    02:32

  • Introduction
    08:31
  • React-Redux
    02:44
  • Setting up Redux
    06:38
  • Adding a sandbox area for experimenting with the code
    03:33
  • Redux Actions
    06:07
  • Action Creators
    03:34
  • Redux Dev Tools
    04:35
  • Creating the event reducer
    08:22
  • RRF 6-9 Creating a root reducer
    03:31
  • Getting events from the redux store
    10:31
  • Dispatching event actions
    08:56
  • Clean up
    06:37
  • Scroll to top
    05:49
  • Summary of section 6
    03:36

  • Introduction
    02:50
  • Setting up Formik
    10:12
  • Formik with less code
    05:07
  • Form validation
    05:38
  • Creating a reusable text input
    06:27
  • Cleaning up the form
    04:40
  • Creating a reusable text area
    02:06
  • Creating a reusable select input
    07:39
  • Creating a reusable date input
    10:17
  • Date-FNS
    07:49
  • Formik props
    05:05
  • Modals
    09:41
  • Adding a Modal Manager
    09:43
  • Creating the sign up form
    08:46
  • Adding an auth reducer
    05:13
  • Hooking up the sign up form
    08:10
  • Summary of section 7
    02:07

  • Introduction
    07:14
  • Getting the Google API keys
    07:06
  • Setting up places autocomplete
    08:27
  • Creating a custom place input
    12:38
  • Using the place input
    09:36
  • Narrowing the place input search results
    05:56
  • Google maps react
    06:03
  • Challenge solution
    05:16
  • Adding the map to the Event Detailed Page
    07:16
  • Summary of section 8
    02:19

  • Introduction
    04:44
  • Redux Thunk 101
    06:36
  • Redux Thunk 102
    07:47
  • Isolating the loading indicators
    03:20
  • Adding toast notifications
    04:51
  • Adding a mock API
    07:09
  • Adding a loading component
    03:16
  • Using placeholders to improve the UI
    03:59
  • Adding an event filters component
    06:03
  • Summary of section 9
    03:57

  • Introduction
    06:49
  • Setting up Firestore
    06:28
  • Firestore document fields
    11:55
  • Listening to Firestore data
    06:56
  • Shaping the Firestore data
    09:29
  • Restoring the loading indicator
    03:31
  • Creating a custom hook
    09:03
  • Adding a useFirestoreDoc hook
    11:00
  • Handling not found documents
    05:49
  • Adding an error component
    05:01
  • Creating and updating events in Firestore
    10:35
  • Creating and updating events in Firestore part 2
    05:26
  • Deleting an event
    03:45
  • Cancelling an event function
    05:42
  • Adding a confirmation prompt
    06:41
  • Summary of section 10
    03:27

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

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

Featured review

Mark Sandora
Mark Sandora
6 courses
2 reviews
Rating: 5.0 out of 58 months ago
As a beginner to React and Redux, after this course I am feeling much more confident in my abilities. I would love to see a follow up to this expanding on revents functionality. Maybe some notifications per user upon actions, like /dislike functionality or the ability to upload images to events. Great Job Neil!

Instructor

Neil Cummings
Professional freelance software developer
Neil Cummings
  • 4.6 Instructor Rating
  • 20,088 Reviews
  • 79,459 Students
  • 4 Courses

Neil Cummings is a professional freelance software developer.  Starting out in the IT industry about 15 years ago, initially working mostly on SharePoint before embracing more lightweight frameworks such as Angular and ASP.NET Core.

He has worked for companies such as Microsoft and Rackspace before trying out the freelance route.  Also a Microsoft certified trainer.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.