React Pizza Shop - Ordering Food with Hooks and Firebase

Name: React Pizza Shop - Ordering Food with Hooks and Firebase
Rating: 4.5 (246 reviews)

Build a Tasty Restaurant Ordering App with React Hooks, Firebase, and Styled-Components. Mamma Mia!

Created byreact.school _

Last updated 1/2021

English

English [Auto],

What you'll learn

Cutting-edge React Development with React Hooks : useState, useEffect and your own custom hooks
Build a Complete Pizza Ordering Application for Customizing Restaurant Orders and Emailing Users
Beautiful UI Development from Scratch with Food Grids, Popup Dialogs, Buttons, Input Controls and more
Styled-components : The hottest CSS-in-JS library featuring CSS animations and extendable component styling
Authenticate Users with Google to Login and Logout
Firebase Realtime Database : Save pizza orders on Google's Serverless Data Platform
Firebase Functions and Nodemailer: Respond to order generation by emailing users their order
Ecommerce Patterns : Adding, Removing and Editing Orders, Calculating Tax and Totals for Dynamic Food Items
Hosting : Deploy your app on the web with Firebase Hosting

Course content

8 sections • 43 lectures • 4h 48m total length

Beginner Setup1:45
create-react-app4:15
Welcome to Sliceline1:41
Build a full stack React pizza shop with hooks and Firebase, featuring Gmail authentication, a real-time database, and order email confirmations, plus modern user interface and Firebase hosting for production.
Source Code0:10
React Hooks Examples0:09

useState example2:19
Food Dialog13:32
Order4:57
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.
Flexbox Direction Column4:40
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.
DialogButton and Order Layout9:29
Review2:44
Orders Hooks8:31
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.
List Orders2:45
Price7:43
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.
Favicon and useTitle6:56
Quantity29:38
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.
Total4:41
Toppings16:42
Choices16:08
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.
Edit & Delete Orders11:48

Important Notice about Firebase Functions1:32
Hi everyone!
It seems that to use Firebase Functions you now must be on the paid plan. This was not the case when I recorded these videos. But the good news is that as long as you stay within limits, you will only be charged $0.026 / GB of container storage per month.
As you can see, most of Firebase Function features are still free once you upgrade with the exception of the very small charge I mentioned above: https://firebase.google.com/pricing
Read this thread here for more information: https://stackoverflow.com/questions/62824043/is-function-cloud-in-firebase-free-or-not-cloud-functions-deployment-requires-t
Sorry for the inconvenience here.
-Lucas
-------------------------------------
Why will I need a billing account to use the Node.js 10 runtime for Cloud Functions for Firebase?
Because of updates to its underlying architecture planned for August 17, 2020, Cloud Functions for Firebase will rely on some additional paid Google services: Cloud Build, Container Registry, and Cloud Storage. These architecture updates will apply for functions deployed to the Node.js 10 runtime. Usage of these services will be billed in addition to existing pricing.
In the new architecture, Cloud Build supports the deployment of functions. You'll be billed only for the computing time required to build a function's runtime container.
Cloud Storage, interoperating with Google Container Registry, will provide storage space for the containers in which functions run. You'll be billed for each container required to deploy a function. If you're currently using Cloud Functions within free usage limits, you may notice new, small charges for each container stored— for example, 1GB of storage is billed at $0.026 per month.
To understand more about how your bill might change, please review the following
Cloud Functions pricing: existing free tier is unchanged.
Cloud Build pricing: Cloud Build provides for a free tier.
Container Registry pricing.
Firebase Install5:30
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.
Firebase Auth10:04
Firebase Auth part 212:48
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.
Quick warning about next lecture0:19
Firebase Realtime Database11:58
Order Confirmation Dialog12:11
Firebase Gmail Setup1:11
Firebase Functions / Nodemailer email20:39
You did it!0:22

Requirements

This course is at a professional level, basic familiarity with React and web development are recommended, however the entire project is created from scratch so beginners are encouraged to try it out.

Description

Welcome to React Pizza Shop. Here’s what we’ll be building: A pizza ordering system with multiple types of foods and editable popup dialogs to customize your order with delicious items from a menu. We'll add interactivity with a variety of custom React Hooks. After authenticating with a Google account, we’ll send this order to Firebase Realtime database and a serverless Firebase function will send your user an email confirmation of their order.

This course is intended for intermediate React developers looking for a fun project to practice React Hooks and/or learn Firebase. The full source code is provided. If you have any questions throughout the course, do not hesitate to reach out.

Here's just some of the features included in this 5+ hour course:

React with Hooks
- useState, useEffect
- Build custom hooks to control input elements, authentication, dialogs and more
Beautiful UI Development
- Styled-components
- Popup Dialogs
- Buttons, Inputs, Checkboxes
- Adding Stock Photos
Flexbox and CSS grids
CSS animations
Google Fonts
create-react-app boilerplate
- Starting from scratch
- Building for production
Firebase
- Deploying your site with Hosting
- Authenticating users with Google, logging them in and out
- Realtime Database to track food orders
- Functions to respond to orders
Ecommerce Ordering
- Adding, Removing Editing orders
- Calculating tax and totals of orders
- Dynamic food items
Emailing orders with Node.js and Nodemailer
Favicon app icon

Who this course is for:

Students learning React and Web Development looking for a professional course at an intermediate to advanced level.

React Pizza Shop - Ordering Food with Hooks and Firebase

What you'll learn

Explore related topics

Course content

Introduction5 lectures • 8min

Global Styles4 lectures • 8min

Navbar and Banner3 lectures • 21min

FoodGrid4 lectures • 31min

React Hooks - FoodDialog and Orders15 lectures • 2hr 23min

Firebase10 lectures • 1hr 17min

Mobile Responsiveness1 lecture • 1min

Bonus Content1 lecture • 1min

Requirements

Description

Who this course is for: