React Pizza Shop - Ordering Food with Hooks and Firebase

Remove boilerplate to start a barebones hello world React app by deleting app.tsx, index.tsx, and logo imports/files, then switch to styled components for future development.

Define global css with styled-components using createGlobalStyle to set body background and fonts, replacing separate css files. Render the global style in the app to apply changes.

learn to add google fonts to a react app, selecting righteous for headers and open sands for body text, and applying font-family in css.

Build a navbar in a React pizza shop app using styled components, a pizza red brand color, a righteous font logo, and subtle padding and text shadow.

Create a dynamic food menu with a two-column food grid using styled-components, map a foods data array to render images, labels, and hover effects for an interactive restaurant UI.

Learn how to use CSS transitions to animate hover effects, including box-shadow, filter, and margin-top changes, to make cards jump and come to life.

Learn to add and use the use state hook in a functional component to track the open food item, and trigger a dialogue via a setOpenFood handler from the menu.

Build a right-side, fixed order panel in a React app using styled components to show selected foods, compute totals, and render an empty state when no items are added.

Create a responsive dialogue layout by using display: flex with flex-direction: column, positioning a bottom footer, and applying overflow: auto to keep content scrollable.

Build a responsive food dialog and a fixed right-side order panel in React, updating the confirm text to add to order, and style with overflow, shadows, and a commit workflow.

Create and apply custom React hooks like use open food and use orders to manage an order list, then wire add-to-order interactions across components.

Add a format price helper using toLocaleString for USD, import it into the menu and order, and display prices in both the menu and the order dialog.

Learn to customize your React pizza shop app by setting a custom favicon and updating the page title using a useTitle hook and useEffect to reflect current orders.

Develop a dynamic quantity input in a food ordering dialogue by refactoring with a dedicated quantity hook, implementing increment/decrement controls, input validation, and live price updates on the order.

Learn to compute subtotal, tax, and total in a React orders component using reduce with an accumulator and the format price helper, rendering three rows for subtotal, tax, and total.

Add a toppings section to the food dialog using a three-column checkbox grid and a use toppings hook, with pizza-only rendering and dynamic price per topping.

Add a drinks choices feature that forces selecting a drink flavor via radio buttons, using a choice hook, updating the order with the selected option, and disabling confirmation until chosen.

Learn to edit and delete orders in a React pizza shop app by splicing the orders array, wiring a delete handler, and opening an editable dialog with an index.

Install firebase tools, log in, and initialize hosting, databases, and functions for the slice line project; build and deploy, then include firebase scripts in index.

Learn to implement Firebase authentication in a React pizza shop app by adding a login button, managing auth state with a hook, and gating checkout behind login.

Learn to set up firebase real-time database for a pizza app, enable test mode, define write rules, push orders, and send user details with formatted data to firebase.

Set up a Firebase function to email users using Google’s sample. Turn on less secure apps, enable display unlock capture, and verify the security alert activity to finalize setup.

Learn how to use firebase functions that trigger on new orders, deploy functions, and send emails with nodemailer using a gmail transport, including order details.