The Complete React Bootcamp 2023 (w/ React Hooks, Firebase)

Install Git and Git Bash on Windows, configure installer options, set the path, and enable mintty as the terminal. Verify installation and set your user name and email for commits.

Learn the basics of git for project history and collaboration. Initialize a repo, stage changes, commit work, view history with git commands, and use VS Code integration to visualize changes.

Discover how ESLint and Prettier keep code readable and error-free by enforcing style rules and formatting, with config files, npm scripts, and editor extensions.

Compare var, let, and const in JavaScript, highlighting function scope versus block scope, and explain when to reassign with let, when to use const, and how objects can be mutated.

Learn how array.reduce compresses array elements into a single value using an accumulator, callback, and optional initial value, including examples for summing numbers and building objects.

Compare function declaration and function expression in JavaScript, including hoisting and initialization behavior. Function declarations are hoisted, while expressions stay at their definition and cannot be accessed before initialization.

Delve into how JavaScript uses the call stack, event loop, and web APIs to manage synchronous and asynchronous code, with promises and callbacks driving non-blocking behavior in browsers and Node.

Explore promises, their states, then, catch, and chaining; learn fetch with set timeout, response.json, and async/await for non-blocking, readable code.

Lift the game state to the app component to display next player and winner messages, and calculate the winner with a helper while passing data via props.

Polish the React app by loading the Roboto font from Google Fonts via index.html and applying inline styles with a style object to control font weight and title appearance.

Create and scaffold a box office web app using Create React App. Explore a progressive web app template and configure ESLint and Prettier while understanding public and source structure.

Learn to implement reusable layouts with React Router using a main layout and outlet to render content for home and start pages, plus a navigation component and default props.

Learn how to submit forms in a React app, prevent page refresh, and fetch shows data from the TV Maze API using fetch with async/await and a dynamic search string.

Create dynamic show pages with React Router DOM by turning show IDs into URL segments, using useParams to read the show ID, and updating the read more link to navigate.

Show how to render a complete show page by composing show main data and details, display image, html summary, and embed seasons and cast via the use query hook.

Add a go back to home button on the show page and open the show in a new tab with an anchor tag; compare link component and use navigate.

Explains how a service worker turns a web app into a progressive web app by intercepting requests, caching assets with workbox, enabling offline use and installability, guided by Lighthouse checks.

Build a progressive web app with React, using Create React App, React Router, fetch data, and React Query. Employ custom hooks, browser storage, dynamic pages, and styling choices.

Discover how Firebase provides a backend abstraction layer that replaces API calls with predefined library functions, enabling real time, fast database queries on Google Cloud Platform with well documented features.

Compare Firebase's Spark free plan with Blaze pay-as-you-go, noting cloud functions require Blaze. Check the pricing page for details as you begin building your project.

Explore the final project: sign in with Google or linked Facebook, manage profile with nickname and avatar, chat with rooms, send messages and attachments, and use admin controls and notifications.

Create a dashboard feature to update a user's nickname in the Firebase real-time database, using precise references, a nickname-only update, error handling, and real-time listeners to refresh the UI.

Add and manage user profile avatars in a dashboard by selecting a file, uploading to Firebase, previewing with the React Avatar Editor, and controlling the modal state.

Display the avatar or show name initials when missing, using a profile avatar wrapper and a get name initials helper to derive initials from the user name, including two-word names.

Create chat room lists in the sidebar with React components, including a chat room list and room item, featuring scrolling and a relative time display.

Learn to manage denormalized data by updating all duplicated references (messages and rooms) atomically with a helper function that propagates nickname and avatar changes.

Master real-time chat pagination with Firebase by loading messages in pages, handling subscriptions, and preserving scroll position, including a 30 percent bottom threshold when typing.

Upgrade the Firebase project to the Blaze plan to enable Cloud Functions and real-time notifications with Firebase Cloud Messaging, and prepare for a discussion on serverless architecture.

Fix cloud function errors by correcting room data access from roomSnapshot.value, rename FGM users to FGM user, replace registration tokens with tokens, and ensure sign-in before saving and committing changes.

Develop a modal window to manage FCM users by asking if they want to receive notifications, showing subscription status, checking browser notification permissions, and updating Firebase data for room chats.

Wrap your app with a global error boundary to render a fallback UI when rendering errors occur. Use multiple boundaries per page or component to isolate failures.