# sachinmaurya96/mackbooklanding architecture

> Architecture diagram of the GitHub repository sachinmaurya96/mackbooklanding, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sachinmaurya96/mackbooklanding
- Repository: https://github.com/sachinmaurya96/mackbooklanding

## Overview

This is a React landing page for a MacBook product, rather than a general-purpose application. A visitor enters the page, views the hero and product sections, selects a laptop size or color, and sees the corresponding 3D model; a separate showcase presents chip capabilities. The sampled code confirms the app composition and configurator wiring. Hero, Navbar, and lighting internals were not sampled, so their detailed behavior and data links are not inferred.

Main entry points: [`src/App.jsx`](https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/App.jsx) (Page composition), [`src/components/ProductViewer.jsx`](https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/components/ProductViewer.jsx) (Product viewer), [`src/components/three/ModelSwitcher.jsx`](https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/components/three/ModelSwitcher.jsx) (Model switcher), [`src/components/models/Macbook-14.jsx`](https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/components/models/Macbook-14.jsx) (14-inch model)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Landing page"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app["Page composition<br/>[App.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_hero["Hero section<br/>[Hero.jsx]"]
end

subgraph group_config["Product configurator"]
  node_viewer["Product viewer<br/>[ProductViewer.jsx]"]
  node_state["Product state<br/>[index.js]"]
  node_switcher["Model switcher<br/>[ModelSwitcher.jsx]"]
  node_model14["14-inch model<br/>[Macbook-14.jsx]"]
  node_model16["16-inch model<br/>[Macbook-16.jsx]"]
  node_lighting["Studio lighting<br/>[StudioLight.jsx]"]
  node_models["3D model assets"]
end

subgraph group_media["Presentation media"]
  node_showcase["Chip showcase<br/>[Showcase.jsx]"]
  node_videos["Showcase videos"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_viewer
node_app -->|"renders"| node_showcase
node_viewer -->|"reads and updates"| node_state
node_viewer -->|"renders"| node_switcher
node_viewer -->|"renders"| node_lighting
node_switcher -->|"renders"| node_model14
node_switcher -->|"renders"| node_model16
node_model14 -->|"reads color"| node_state
node_model16 -->|"reads color"| node_state
node_model14 -->|"loads model"| node_models
node_model16 -->|"loads model"| node_models
node_showcase -->|"plays video"| node_videos

click node_entry "https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/main.jsx"
click node_app "https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/App.jsx"
click node_navbar "https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/components/Navbar.jsx"
click node_hero "https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/components/Hero.jsx"
click node_viewer "https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/components/ProductViewer.jsx"
click node_state "https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/store/index.js"
click node_switcher "https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/components/three/ModelSwitcher.jsx"
click node_model14 "https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/components/models/Macbook-14.jsx"
click node_model16 "https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/components/models/Macbook-16.jsx"
click node_lighting "https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/components/StudioLight.jsx"
click node_models "https://github.com/sachinmaurya96/mackbooklanding/tree/main/public/models"
click node_showcase "https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/components/Showcase.jsx"
click node_videos "https://github.com/sachinmaurya96/mackbooklanding/tree/main/public/videos"

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_entry,node_app,node_navbar,node_hero toneBlue
class node_viewer,node_state,node_switcher,node_model14,node_model16,node_lighting,node_models toneAmber
class node_showcase,node_videos toneMint
class node_visitor toneIndigo
```

## Components

### Landing page

- [React entry](https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/main.jsx): `src/main.jsx`
- [Page composition](https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Hero section](https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/components/Hero.jsx): `src/components/Hero.jsx`

### Product configurator

- [Product viewer](https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/components/ProductViewer.jsx): `src/components/ProductViewer.jsx`
- [Product state](https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/store/index.js): `src/store/index.js`
- [Model switcher](https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/components/three/ModelSwitcher.jsx): `src/components/three/ModelSwitcher.jsx`
- [14-inch model](https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/components/models/Macbook-14.jsx): `src/components/models/Macbook-14.jsx`
- [16-inch model](https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/components/models/Macbook-16.jsx): `src/components/models/Macbook-16.jsx`
- [Studio lighting](https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/components/StudioLight.jsx): `src/components/StudioLight.jsx`
- [3D model assets](https://github.com/sachinmaurya96/mackbooklanding/tree/main/public/models): `public/models`

### Presentation media

- [Chip showcase](https://github.com/sachinmaurya96/mackbooklanding/blob/main/src/components/Showcase.jsx): `src/components/Showcase.jsx`
- [Showcase videos](https://github.com/sachinmaurya96/mackbooklanding/tree/main/public/videos): `public/videos`

### Other components

- **Visitor**

## Connections

- Visitor → React entry: opens
- React entry → Page composition: renders
- Page composition → Navigation: renders
- Page composition → Hero section: renders
- Page composition → Product viewer: renders
- Page composition → Chip showcase: renders
- Product viewer → Product state: reads and updates
- Product viewer → Model switcher: renders
- Product viewer → Studio lighting: renders
- Model switcher → 14-inch model: renders
- Model switcher → 16-inch model: renders
- 14-inch model → Product state: reads color
- 16-inch model → Product state: reads color
- 14-inch model → 3D model assets: loads model
- 16-inch model → 3D model assets: loads model
- Chip showcase → Showcase videos: plays video