React Pizza Shop - Ordering Food with Hooks and Firebase from Udemy

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

What's inside

Learning objectives

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

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

Syllabus

Introduction

Beginner Setup

create-react-app

Welcome to Sliceline

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.

Career center

Learners who complete React Pizza Shop - Ordering Food with Hooks and Firebase will develop knowledge and skills that may be useful to these careers:

React Developer

The React Developer role concentrates on building dynamic and responsive user interfaces using the React library. This course provides a comprehensive hands-on experience in becoming a proficient React Developer, guiding you through the creation of a complete pizza ordering system. Learners gain practical expertise in React Hooks like useState and useEffect, developing custom hooks, and designing beautiful UIs with Styled-components, Flexbox, and CSS animations. The course also teaches building for production and deploying React applications with Firebase Hosting, offering a full lifecycle understanding of modern React development.

See salaries and explore the career path for React Developer

Ecommerce Web Developer

An Ecommerce Web Developer constructs online stores and digital purchasing systems, handling everything from product display to order processing. This course is an exceptionally strong fit for aspiring Ecommerce Web Developers, as it walks you through building a complete pizza ordering application. You will master Ecommerce Patterns such as adding, removing, and editing orders, calculating tax and totals for dynamic food items, and authenticating users. Integrating Firebase Realtime Database for order tracking and Firebase Functions for email confirmations provides a robust understanding of an end-to-end ecommerce solution.

See salaries and explore the career path for Ecommerce Web Developer

Firebase Specialist

A Firebase Specialist focuses on implementing and managing applications using Google's Firebase platform for backend services. This course is tailor-made for those wishing to excel as a Firebase specialist, offering practical experience with its core features. You will learn to deploy sites with Firebase Hosting, authenticate users with Google, utilize Firebase Realtime Database to track food orders, and implement serverless logic with Firebase Functions to send email confirmations via Nodejs and Nodemailer. This hands-on project provides a deep dive into Firebase's ecosystem for building scalable, real-time applications.

See salaries and explore the career path for Firebase Specialist

Frontend Developer

A Frontend Developer focuses on the client-side of web applications, ensuring an engaging and intuitive user experience. This course is highly relevant for aspiring Frontend Developers as it covers extensive UI development, from scratch, emphasizing Styled-components, popup dialogs, buttons, and input controls. You will learn to implement mobile responsiveness using media queries and craft beautiful designs with CSS grids and animations. Building the React Pizza Shop provides practical experience in creating interactive web interfaces and deploying them, equipping you with crucial skills for a successful career.

See salaries and explore the career path for Frontend Developer

User Interface Engineer

A User Interface Engineer specializes in designing and implementing the visual and interactive elements of software applications. This course directly contributes to developing the skills necessary to excel as a User Interface Engineer by focusing on building a Beautiful UI Development from Scratch. You will gain hands-on experience with Styled-components, Flexbox, CSS grids, CSS animations, and creating interactive elements like popup dialogs, buttons, and input controls. The emphasis on mobile responsiveness ensures you can deliver accessible and engaging interfaces, making this course essential for mastering modern UI engineering practices.

See salaries and explore the career path for User Interface Engineer

Fullstack Developer

A Fullstack Developer possesses expertise across both the frontend and backend aspects of web application development. The React Pizza Shop course offers a well-rounded foundation for a Fullstack Developer, integrating React for the frontend with Firebase for robust backend services. You will learn to build interactive user interfaces with React Hooks and Styled-components, implement user authentication with Google, manage data with Firebase Realtime Database, and handle server-side logic with Firebase Functions and Nodejs for email confirmations. This comprehensive project experience is invaluable for understanding full-stack architecture.

See salaries and explore the career path for Fullstack Developer

Web Application Developer

A Web Application Developer designs, builds, and maintains software applications accessed via a web browser. This course offers a comprehensive learning experience for any aspiring Web Application Developer, as it covers the entire process of creating a modern, interactive web application from scratch. You will build a Complete Pizza Ordering Application, gaining expertise in cutting-edge React Development with React Hooks for a dynamic frontend, alongside Firebase for robust backend functionalities like authentication and real-time data management. The course also details deploying your app, providing a full development lifecycle perspective.

See salaries and explore the career path for Web Application Developer

Software Engineer Web

A Software Engineer Web applies engineering best practices to design, develop, and maintain web-based software systems. This course provides a robust foundation for a Software Engineer Web, guiding you through building a production-ready web application from the ground up. You will engage in Cutting-edge React Development with React Hooks for dynamic user interfaces and implement serverless backend components using Firebase. Covering UI design with Styled-components and mobile responsiveness, user authentication, database integration, and deployment offers invaluable insight into modern web software engineering principles.

See salaries and explore the career path for Software Engineer Web

Cloud Application Developer

A Cloud Application Developer designs and builds applications that leverage cloud computing platforms for scalability, reliability, and ease of deployment. This course is highly relevant for aspiring Cloud Application Developers, demonstrating a practical implementation using Firebase, which is Google's serverless platform. You will gain hands-on experience deploying your site with Firebase Hosting, managing user authentication, utilizing Firebase Realtime Database for data storage, and executing server-side logic with Firebase Functions. This project-based learning helps build a foundation in developing and deploying applications within a modern cloud ecosystem.

See salaries and explore the career path for Cloud Application Developer

Nodejs Developer

A Nodejs Developer specializes in building server-side applications and APIs using JavaScript. While the React Pizza Shop course primarily focuses on a React frontend, it incorporates Nodejs within Firebase Functions for handling serverless logic, specifically for emailing user order confirmations via Nodemailer. For an aspiring Nodejs Developer, this exposure to serverless functions and integration with external services may be useful in understanding modern backend architectures. It demonstrates practical application of Nodejs in a real-world project, providing insights into its role in a fullstack context.

See salaries and explore the career path for Nodejs Developer

Mobile Application Developer

Mobile Application Developers create software for smartphones and tablets, often focusing on native or cross-platform frameworks. Although React Pizza Shop focuses on web development, the core skills in React and custom hooks are highly transferable to mobile development using frameworks like React Native. Understanding state management (useState, useEffect), UI component creation, and integrating with backend services like Firebase for authentication and real-time data, as taught in this course, may be useful for building robust mobile applications with modern architecture.

See salaries and explore the career path for Mobile Application Developer

User Experience Designer

User Experience Designers focus on a product's overall usability and user satisfaction by researching user behavior and crafting intuitive interactions. While this course primarily centers on building the user interface, it provides a foundational understanding of how UI elements like popup dialogs, buttons, and input controls are implemented using React and Styled-components. For a User Experience Designer, knowing the technical feasibility and implementation methods covered in the course may be useful in designing more practical and engaging user interfaces. Understanding visual presentation through Flexbox and CSS grids also contributes to a holistic design approach.

See salaries and explore the career path for User Experience Designer

Technical Project Manager

A Technical Project Manager oversees the planning, execution, and closing of technical projects, necessitating a solid grasp of the underlying technologies. The React Pizza Shop course provides practical insights that may be useful for a Technical Project Manager by demonstrating the end-to-end development of a modern web application. Understanding the process of building a React frontend with hooks, implementing UI designs with Styled-components, integrating Firebase for authentication and database management, and deploying the application, helps a Technical Project Manager effectively coordinate teams and manage risks and timelines.

See salaries and explore the career path for Technical Project Manager

Digital Product Manager

Digital Product Managers guide the strategy, roadmap, and feature definition for a product, requiring a nuanced understanding of its technical implementation to communicate effectively with engineering teams. While not a coding role, this course, which builds a complete ecommerce application from a practical standpoint, may be useful for a Digital Product Manager to understand the nuances of React frontend and serverless Firebase backend development. It provides insights into design, authentication, data flow, and deployment, which are crucial for informed decision-making, and may be useful for those aspiring to advanced leadership roles.

See salaries and explore the career path for Digital Product Manager

Solutions Architect

Solutions Architects design technical solutions that meet specific business requirements, involving complex system integration, data flow, and technology selection. This course offers a practical example of a modern web application architecture, combining a React frontend with a Firebase serverless backend. Understanding how components like Realtime Database, Authentication, and Functions integrate, as demonstrated, may be useful for a Solutions Architect in conceptualizing and designing similar systems. This role typically requires an an advanced degree, making a foundational technical understanding from courses like this valuable.

See salaries and explore the career path for Solutions Architect