Awesome Apps with React Hooks and Firebase

Video description

Master cutting-edge React along with the most popular serverless framework by building a Hacker News clone

About This Video

  • Build a complete Hacker News clone from zero to deployment
  • Build and deploy serverless Firebase functions

In Detail

In this course, you'll build full-stack, serverless applications that harness the latest and greatest features in the React ecosystem on top of the Firebase platform.

You'll learn how to bring React Hooks, Firebase, and Firestore together to build a complete Hacker News clone from zero to deployment. It will look and work exactly like the original Hacker News site, but with some added features.

You'll cover tons of concepts throughout the process of making your Hacker News clone: authenticating users with Firebase in-depth; adding comments; upvoting stories; creating, modifying, and persisting shared link data in real-time with your Firestore database; writing multiple reusable hooks for essential tasks in your app; building and deploying serverless Firebase functions for added functionality; and much more.

This course covers:

  • Rock-solid patterns for using/integrating Firebase with React
  • Full CRUD functionality with the Firestore real-time database
  • Building and using your own custom React Hooks with Firebase
  • Managing global app state with React context and the useContext Hook
  • Firebase authentication with login/register
  • Reset password functionality for returning users
  • User authorization and handling unauthorized actions
  • In-depth routing concepts with React Router 5
  • How to implement cursor-based pagination
  • Sorting, ordering, and limiting documents with Firestore queries
  • Full-text search functionality
  • Realtime subscriptions on data changes with Firestore
  • Working with the Firebase Tools CLI
  • Seamless app deployment with Firebase hosting
  • Using date functions to format time

Table of contents

  1. Chapter 1 : Getting Started
    1. Tools Required 00:00:59
    2. Getting our Starting Code 00:01:12
    3. Overview of Project Code 00:01:09
  2. Chapter 2 : App Structure
    1. Adding Routing with React Router 5 00:04:12
    2. Building Header / Navigation 00:04:24
    3. Creating and Toggling Login / Register Forms 00:06:08
  3. Chapter 3 : Custom React Hook
    1. Developing a Reusable Form Hook 00:09:21
    2. Adding Validation to useFormValidation 00:09:56
  4. Chapter 4 : Firebase Authentication
    1. Create Firebase Project, Setup Auth Resource 00:03:32
    2. Registering and Logging in Users with Firebase Auth 00:06:37
    3. Handling Serverside Errors 00:02:25
    4. Tracking User Sessions with useAuth Hook 00:04:30
    5. Providing User Data and Firebase Instance with React Context 00:05:47
    6. Adding Logout Functionality 00:02:17
    7. Password Reset Functionality 00:07:59
  5. Chapter 5 : Firestore CRUD Operations
    1. Building Create Link Form with Validation 00:07:44
    2. Adding Firestore and Creating Links 00:06:08
    3. Fetching Links with. get(), .onSnapshot() 00:04:45
    4. Displaying Links, Formatting Urls and Dates 00:07:27
    5. Upvoting Links, Updating Docs in Firestore 00:05:37
    6. Deleting Links, Firestore Docs 00:03:25
  6. Chapter 6 : Ordering, Limiting, Searching, Pagination
    1. Ordering, Sorting Documents in Firestore 00:05:02
    2. Adding Full-Text Search 00:07:07
    3. Displaying Link Details, Adding Comments 00:10:23
    4. Dynamically Ordering Links, Preparing for Pagination 00:04:48
    5. Cursor-based Pagination with startAfter and limit 00:09:17
  7. Chapter 7 : Firebase Functions for Serverless Backends
    1. Firebase Function for Offset Query 00:11:24
  8. Chapter 8 : Firebase Hosting for Deployment
    1. Deployment with Firebase Hosting 00:04:45

Product information

  • Title: Awesome Apps with React Hooks and Firebase
  • Author(s): Reed Barger
  • Release date: October 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781839211348