# ashraf-ul-i/burgerbuilder_project architecture

> Architecture diagram of the GitHub repository ashraf-ul-i/burgerbuilder_project, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ashraf-ul-i/burgerbuilder_project
- Repository: https://github.com/ashraf-ul-i/burgerbuilder_project

## Overview

1. **Project shape**
   - This is a **React single-page application** built with **Vite**.
   - The repo is almost entirely frontend code; the backend dependency is **Firebase** for auth and order storage.

2. **Application entry and shell**
   - `index.html`, `src/main.jsx`, and `src/Components/Main.jsx` form the startup path that mounts the React app.
   - `src/App.jsx` and `src/App.css` provide the top-level application composition and visual framing.

3. **Core user journey: building a burger**
   - The main feature lives under `src/Components/BurgerBuilder/`.
   - `BurgerBuilder.jsx` is the orchestrator for the builder experience.
   - `Controls/Controls.jsx` is the user input surface for adding/removing ingredients.
   - `Burger/Burger.jsx` and `Ingredient/Ingredient.jsx` render the live burger preview.
   - `Summery/Summery.jsx` summarizes the current build before ordering.

4. **Order flow**
   - `Order/Order.jsx` groups the ordering flow.
   - `Order/Checkout/Checkout.jsx` is the transition from burger selection into checkout.
   - `Order/SingleOrder/SingleOrder.jsx` suggests a list/detail view for saved or fetched orders.
   - The app likely moves from builder state → summary/checkout → persisted order.

5. **Authentication boundary**
   - `Auth/Login.jsx` and `Auth/Logout.jsx` handle user session actions.
   - `redux/authActionCreator.js` is the main integration point for auth state and Firebase auth calls.
   - The README notes that an **API key must be replaced** in the auth action creator, so auth is implemented via Firebase’s external service rather than a local server.

6. **State management**
   - `src/redux/store.js`, `reducer.js`, `actionTypes.js`, `actionCreator.js`, and `authActionCreator.js` indicate a **Redux-based global state layer**.
   - This likely holds:
     - burger ingredient state
     - order-related data
     - loading state
     - authentication/session state
   - The UI components appear to be split into presentational pieces plus Redux-connected orchestration.

7. **Backend/data persistence**
   - The README explicitly says order saving uses **Firebase**.
   - `redux/actionCreator.js` is where the order endpoint URL must be replaced with the project’s Firebase link.
   - That implies order submission and retrieval are remote async operations, with Firebase acting as the persistence boundary.

8. **Asynchronous feedback**
   - `src/Components/spinner/Spinner.jsx` and its CSS provide a loading indicator.
   - This is important because burger/order/auth flows likely involve remote calls to Firebase and need UI feedback during fetch/save/login/logout.

9. **UI composition and styling**
   - Most components have colocated CSS files, e.g. `Header/Header.css`, `Burger/Burger.css`, `Ingredient/Ingredient.css`, `Spinner/Spinner.css`.
   - This suggests styling is managed per component rather than through a separate design system.
   - `src/index.css` is the global style layer.

10. **Assets and presentation**
   - `src/assets/BurgerBrand.avif` is the main branding image used by the UI.
   - `src/Components/Header/Header.jsx` likely provides the persistent top navigation/branding for the app.

11. **Build/runtime/tooling**
   - The repo uses **Vite** (`vite.config.js`) for development and bundling.
   - `tailwind.config.js` and `postcss.config.js` exist, so the project has Tailwind/PostCSS tooling available, even though most visible component styling is still CSS-based.
   - `package.json`/`package-lock.json` define the runtime dependencies and scripts.

12. **Diagram boundaries to capture**
   - **Client UI layer:** React components under `src/Components/`
   - **State layer:** Redux store/actions/reducer under `src/redux/`
   - **External services:** Firebase Auth and Firebase-backed order storage
   - **Static assets/styling:** component CSS, global CSS, image assets
   - **App shell:** Vite entry files and top-level React composition

Main entry points: [`src/App.jsx`](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/App.jsx) (App), [`src/Components/BurgerBuilder/BurgerBuilder.jsx`](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/BurgerBuilder.jsx) (Builder), [`src/Components/spinner/Spinner.jsx`](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/spinner/Spinner.jsx) (Spinner), [`src/Components/Header/Header.jsx`](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/Header/Header.jsx) (Header)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_app_shell["App Shell"]
  node_node_index_html["index.html<br/>entry html<br/>[index.html]"]
  node_node_main_jsx["main.jsx<br/>react entry<br/>[main.jsx]"]
  node_node_main_component["Main<br/>app mount<br/>[Main.jsx]"]
  node_node_app_jsx["App<br/>shell component<br/>[App.jsx]"]
end

subgraph group_group_ui["Client UI"]
  node_node_header["Header<br/>navigation<br/>[Header.jsx]"]
  node_node_burger_builder["Builder<br/>orchestrator<br/>[BurgerBuilder.jsx]"]
  node_node_controls["Controls<br/>input panel<br/>[Controls.jsx]"]
  node_node_burger["Burger<br/>preview<br/>[Burger.jsx]"]
  node_node_ingredient["Ingredient<br/>render unit<br/>[Ingredient.jsx]"]
  node_node_summary["Summary<br/>review view<br/>[Summery.jsx]"]
  node_node_order["Order<br/>[Order.jsx]"]
  node_node_checkout["Checkout<br/>[Checkout.jsx]"]
  node_node_single_order["Single Order<br/>order detail<br/>[SingleOrder.jsx]"]
  node_node_login["Login<br/>auth ui<br/>[Login.jsx]"]
  node_node_logout["Logout<br/>auth ui<br/>[Logout.jsx]"]
  node_node_spinner(("Spinner<br/>loading ui<br/>[Spinner.jsx]"))
end

subgraph group_group_state["State & Services"]
  node_node_store[("Store<br/>[store.js]")]
  node_node_reducer["Reducer<br/>[reducer.js]"]
  node_node_action_types["Action Types<br/>redux constants<br/>[actionTypes.js]"]
  node_node_actions["Actions<br/>order async<br/>[actionCreator.js]"]
  node_node_auth_actions["Auth Actions<br/>firebase auth"]
  node_node_firebase_orders[("Firebase Orders<br/>remote store")]
  node_node_firebase_auth[("Firebase Auth<br/>external auth")]
end

subgraph group_group_assets["Assets & Styling"]
  node_node_app_css["App CSS<br/>shell style<br/>[App.css]"]
  node_node_global_css["Global CSS<br/>global style<br/>[index.css]"]
  node_node_header_css["Header CSS<br/>component style<br/>[Header.css]"]
  node_node_burger_css["Burger CSS<br/>component style<br/>[Burger.css]"]
  node_node_ingredient_css["Ingredient CSS<br/>component style<br/>[Ingredient.css]"]
  node_node_spinner_css["Spinner CSS<br/>component style<br/>[Spinner.css]"]
  node_node_brand_asset["Brand Image<br/>asset<br/>[BurgerBrand.avif]"]
end

node_node_index_html -->|"loads"| node_node_main_jsx
node_node_main_jsx -->|"mounts"| node_node_main_component
node_node_main_component -->|"renders"| node_node_app_jsx
node_node_app_jsx -->|"frames"| node_node_header
node_node_app_jsx -->|"hosts"| node_node_burger_builder
node_node_burger_builder -->|"uses"| node_node_controls
node_node_burger_builder -->|"previews"| node_node_burger
node_node_burger -->|"composes"| node_node_ingredient
node_node_burger_builder -->|"summarizes"| node_node_summary
node_node_burger_builder -->|"routes"| node_node_order
node_node_order -->|"contains"| node_node_checkout
node_node_order -->|"shows"| node_node_single_order
node_node_app_jsx -->|"exposes"| node_node_login
node_node_app_jsx -->|"exposes"| node_node_logout
node_node_store -->|"applies"| node_node_reducer
node_node_reducer -->|"matches"| node_node_action_types
node_node_actions -->|"updates"| node_node_store
node_node_auth_actions -->|"updates"| node_node_store
node_node_actions -->|"persists"| node_node_firebase_orders
node_node_auth_actions -->|"authenticates"| node_node_firebase_auth
node_node_spinner -.->|"feedback for"| node_node_actions
node_node_spinner -.->|"feedback for"| node_node_auth_actions
node_node_header -->|"shows"| node_node_brand_asset
node_node_app_jsx -.->|"styles"| node_node_app_css
node_node_app_jsx -.->|"inherits"| node_node_global_css
node_node_header -.->|"styles"| node_node_header_css
node_node_burger -.->|"styles"| node_node_burger_css
node_node_ingredient -.->|"styles"| node_node_ingredient_css
node_node_spinner -.->|"styles"| node_node_spinner_css

click node_node_index_html "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/index.html"
click node_node_main_jsx "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/main.jsx"
click node_node_main_component "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/Main.jsx"
click node_node_app_jsx "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/App.jsx"
click node_node_header "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/Header/Header.jsx"
click node_node_burger_builder "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/BurgerBuilder.jsx"
click node_node_controls "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/Controls/Controls.jsx"
click node_node_burger "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/Burger/Burger.jsx"
click node_node_ingredient "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/Ingredient/Ingredient.jsx"
click node_node_summary "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/Summery/Summery.jsx"
click node_node_order "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/Order/Order.jsx"
click node_node_checkout "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/Order/Checkout/Checkout.jsx"
click node_node_single_order "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/Order/SingleOrder/SingleOrder.jsx"
click node_node_login "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/Auth/Login.jsx"
click node_node_logout "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/Auth/Logout.jsx"
click node_node_spinner "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/spinner/Spinner.jsx"
click node_node_store "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/redux/store.js"
click node_node_reducer "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/redux/reducer.js"
click node_node_action_types "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/redux/actionTypes.js"
click node_node_actions "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/redux/actionCreator.js"
click node_node_auth_actions "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/redux/authActionCreator.js"
click node_node_app_css "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/App.css"
click node_node_global_css "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/index.css"
click node_node_header_css "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/Header/Header.css"
click node_node_burger_css "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/Burger/Burger.css"
click node_node_ingredient_css "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/Ingredient/Ingredient.css"
click node_node_spinner_css "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/spinner/Spinner.css"
click node_node_brand_asset "https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/assets/BurgerBrand.avif"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_node_index_html,node_node_main_jsx,node_node_main_component,node_node_app_jsx toneBlue
class node_node_header,node_node_burger_builder,node_node_controls,node_node_burger,node_node_ingredient,node_node_summary,node_node_order,node_node_checkout,node_node_single_order,node_node_login,node_node_logout,node_node_spinner toneAmber
class node_node_store,node_node_reducer,node_node_action_types,node_node_actions,node_node_auth_actions,node_node_firebase_orders,node_node_firebase_auth toneMint
class node_node_app_css,node_node_global_css,node_node_header_css,node_node_burger_css,node_node_ingredient_css,node_node_spinner_css,node_node_brand_asset toneRose
```

## Components

### App Shell

Vite entry and top-level React composition

- [index.html](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/index.html): entry html · Vite HTML entry point · `index.html`
- [main.jsx](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/main.jsx): react entry · Bootstraps the React app · `src/main.jsx`
- [Main](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/Main.jsx): app mount · Top-level React mount wrapper · `src/Components/Main.jsx`
- [App](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/App.jsx): shell component · Application framing and composition · `src/App.jsx`

### Client UI

React components for navigation, builder, auth, and loading states

- [Header](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/Header/Header.jsx): navigation · Persistent brand/navigation header · `src/Components/Header/Header.jsx`
- [Builder](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/BurgerBuilder.jsx): orchestrator · Main burger-building experience · `src/Components/BurgerBuilder/BurgerBuilder.jsx`
- [Controls](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/Controls/Controls.jsx): input panel · Adds and removes ingredients · `src/Components/BurgerBuilder/Controls/Controls.jsx`
- [Burger](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/Burger/Burger.jsx): preview · Live burger rendering · `src/Components/BurgerBuilder/Burger/Burger.jsx`
- [Ingredient](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/Ingredient/Ingredient.jsx): render unit · Single burger ingredient view · `src/Components/BurgerBuilder/Ingredient/Ingredient.jsx`
- [Summary](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/Summery/Summery.jsx): review view · Build summary before ordering · `src/Components/BurgerBuilder/Summery/Summery.jsx`
- [Order](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/Order/Order.jsx): order flow · Ordering flow container · `src/Components/BurgerBuilder/Order/Order.jsx`
- [Checkout](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/Order/Checkout/Checkout.jsx): checkout step · Moves from build to checkout · `src/Components/BurgerBuilder/Order/Checkout/Checkout.jsx`
- [Single Order](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/Order/SingleOrder/SingleOrder.jsx): order detail · Saved or fetched order view · `src/Components/BurgerBuilder/Order/SingleOrder/SingleOrder.jsx`
- [Login](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/Auth/Login.jsx): auth ui · User sign-in action · `src/Components/Auth/Login.jsx`
- [Logout](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/Auth/Logout.jsx): auth ui · User sign-out action · `src/Components/Auth/Logout.jsx`
- [Spinner](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/spinner/Spinner.jsx): loading ui · Feedback during async work · `src/Components/spinner/Spinner.jsx`

### State & Services

Redux state layer and Firebase-backed persistence/authentication

- [Store](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/redux/store.js): redux store · Global application state container · `src/redux/store.js`
- [Reducer](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/redux/reducer.js): state reducer · Central state transitions · `src/redux/reducer.js`
- [Action Types](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/redux/actionTypes.js): redux constants · Action identifiers for state changes · `src/redux/actionTypes.js`
- [Actions](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/redux/actionCreator.js): order async · Burger/order async actions and persistence calls · `src/redux/actionCreator.js`
- [Auth Actions](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/redux/authActionCreator.js): firebase auth · Authentication actions and Firebase auth calls · `src/redux/authActionCreator.js`
- **Firebase Orders**: remote store · Order persistence boundary
- **Firebase Auth**: external auth · Session and sign-in backend

### Assets & Styling

Global styles and component-scoped CSS

- [App CSS](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/App.css): shell style · Top-level application styling · `src/App.css`
- [Global CSS](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/index.css): global style · Base stylesheet for the app · `src/index.css`
- [Header CSS](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/Header/Header.css): component style · Header-scoped styles · `src/Components/Header/Header.css`
- [Burger CSS](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/Burger/Burger.css): component style · Burger preview styles · `src/Components/BurgerBuilder/Burger/Burger.css`
- [Ingredient CSS](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/BurgerBuilder/Ingredient/Ingredient.css): component style · Ingredient styles · `src/Components/BurgerBuilder/Ingredient/Ingredient.css`
- [Spinner CSS](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/Components/spinner/Spinner.css): component style · Spinner styles · `src/Components/spinner/Spinner.css`
- [Brand Image](https://github.com/ashraf-ul-i/burgerbuilder_project/blob/main/src/assets/BurgerBrand.avif): asset · Primary branding image · `src/assets/BurgerBrand.avif`

## Connections

- index.html → main.jsx: loads · HTML entry loads the React bundle
- main.jsx → Main: mounts · Bootstraps the root React component
- Main → App: renders · Main wrapper hands off to the app shell
- App → Header: frames · App composition includes persistent header
- App → Builder: hosts · Primary view is the burger builder
- Builder → Controls: uses · Builder delegates ingredient actions to controls
- Builder → Burger: previews · Builder renders the live burger preview
- Burger → Ingredient: composes · Burger is built from ingredient units
- Builder → Summary: summarizes · Builder surfaces the pre-order summary
- Builder → Order: routes · Builder hands off into the order flow
- Order → Checkout: contains · Order flow includes checkout transition
- Order → Single Order: shows · Order flow can display saved order details
- App → Login: exposes · App provides authentication entry points
- App → Logout: exposes · App provides authentication exit points
- Store → Reducer: applies · Store is driven by the root reducer
- Reducer → Action Types: matches · Reducer responds to defined action types
- Actions → Store: updates · Order actions dispatch into global state
- Auth Actions → Store: updates · Auth actions dispatch session state changes
- Actions → Firebase Orders: persists · Order data is written to Firebase storage
- Auth Actions → Firebase Auth: authenticates · Auth flow calls Firebase authentication
- Spinner → Actions: feedback for · Spinner indicates async order work
- Spinner → Auth Actions: feedback for · Spinner indicates async auth work
- Header → Brand Image: shows · Header uses the brand image
- App → App CSS: styles · Top-level shell styling
- App → Global CSS: inherits · App relies on global base styles
- Header → Header CSS: styles · Header component stylesheet
- Burger → Burger CSS: styles · Burger preview stylesheet
- Ingredient → Ingredient CSS: styles · Ingredient stylesheet
- Spinner → Spinner CSS: styles · Spinner stylesheet