React Burger App — React: The Complete Guide (Schwarzmüller, 2021)

React Burger App — React: The Complete Guide

Author/Course: Maximilian Schwarzmüller (Udemy, “React: The Complete Guide”) Repo folder: raw/repos/burgerApp/react-complete-guide/ Stack: React 17.0.2, Redux, React Router, Axios, Firebase Realtime Database, Firebase Auth (Google Identity Toolkit) Approximate date: 2021 (React 17 era)

---

Overview

The Burger Builder is the capstone project of Schwarzmüller’s flagship Udemy course. Users dynamically assemble a burger by adding and removing ingredients (salad, cheese, bacon, meat), see the price update in real time, and proceed through an authenticated checkout flow backed by Firebase. The repo (react-complete-guide) was bootstrapped with Create React App (ejected webpack config retained) and includes a production build.

---

Architecture

Component vs Container Split

The codebase follows the presentational/container pattern:

• src/components/ — pure UI components with no Redux awareness:

  • Burger/ — visual burger display + ingredient layers + order summary modal
  • Navigation/ — Toolbar, SideDrawer, DrawerToggle, NavigationItems
  • UI/ — reusable primitives: Modal, Spinner, Button, Input, Backdrop
  • Order/ — order display card + checkout summary + contact data form
  • Logo/ — branding component
  • Layout/ — page wrapper

• src/containers/ — Redux-connected smart components:

  • BurgerBuilder/BugerBuilder.js — main feature container; dispatches initIngredients, addIngredient, removeIngredient, purshaseInit; redirects unauthenticated users to /auth
  • Checkout/Checkout.js — checkout orchestration
  • Orders/Orders.js — order history listing
  • Auth/Auth.js — sign-up / login form
  • Auth/Logout/Logout.js — dispatches logout action + redirects

Redux Store

Three reducer slices (combined in src/index.js via combineReducers):

Slice	Key state
burger	ingredients (object), totalPrice (number, base $4), error, building
order	order list, loading, purchased flag
auth	token, userId, error, loading, authRedirectPath

Ingredient prices are flat $1 each (salad, cheese, bacon, meat). totalPrice is pure derived state computed in the reducer.

Action types (all defined in store/action/actionTypes.js):

• Burger: ADD_INGREDIENT, REMOVE_INGREDIENT, SET_INGREDIENTS, FETCH_INGREDIENTS_FAILED
• Purchase: PURCHASE_BURGER_START/SUCCESS/FAIL, PURCHASE_INIT
• Orders: FETCH_ORDERS_START/SUCCESS/FAIL, ORDER_DELETE
• Auth: AUTH_START/SUCCESS/FAIL/LOGOUT, SET_AUTH_REDIRECT

Async Middleware

redux-thunk is applied via applyMiddleware(thunk). Async action creators (in store/action/auth.js, order.js, burgerBuilder.js) return functions that dispatch multiple actions over the lifecycle of an HTTP request.

HTTP Layer

axios-orders.js creates an Axios instance with baseURL pointing to the Firebase Realtime Database (react-burger-app-66329-default-rtdb.firebaseio.com). All order CRUD operations go through this instance.

Authentication

Firebase Identity Toolkit is called directly via axios (not the Firebase SDK):

• Sign-up: POST googleapis.com/identitytoolkit/v3/relyingparty/signupNewUser?key=…
• Sign-in: POST googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=…

Tokens are persisted in localStorage (token, expirationDate, userId). authCheckState() is called on app mount to auto-restore sessions. Token expiry is managed with setTimeout via checkAuthTimeout.

Higher-Order Components (HOC)

Two HOCs in src/hoc/:

• Auxilary/Auxilary.js — thin wrapper returning props.children (React Fragment substitute for older Babel)
• withErrorHandling/withErrorHandling.js — intercepts Axios request/response errors globally and surfaces them in a modal

Routing

React Router v4 (react-router-dom) manages client-side navigation:

• / → BurgerBuilder
• /checkout → Checkout
• /orders → Orders
• /auth → Auth
• /logout → Logout

The root App component is wrapped with withRouter (for history access) and connect (for auto-sign-in dispatch).

---

Key Concepts Demonstrated

Concept	Where
react component lifecycle	componentDidMount in BurgerBuilder, App
redux unidirectional data flow	Full store structure
react-router client-side navigation	App.js route config
higher-order-components pattern	withErrorHandling, withRouter
firebase Realtime DB + Auth	axios-orders.js, store/action/auth.js
single-page-application architecture	One index.html, all routes client-side
webpack build pipeline	Custom ejected CRA config
redux-thunk async pattern	All action creators with side effects

---

Tech Stack Summary

Layer	Technology
UI framework	react 17.0.2
State management	redux + redux-thunk
Routing	react-router (react-router-dom v4)
HTTP client	Axios
Backend/DB	firebase Realtime Database
Authentication	Firebase Identity Toolkit (REST)
Build tool	webpack 3.8.1 (ejected CRA)
Test runner	Jest 20 + jsdom

---

Source Notes

• The README.md is the standard Create React App documentation — not project-specific.
• raw/repos/burgerApp/ contains an outer package-lock.json that is likely a remnant of a parent project; the actual app is in react-complete-guide/.
• API key visible in source is a Firebase project key (non-secret for client-side Firebase Auth; project react-burger-app-66329).