How daniel7939/apple-website works
This is a React marketing site presenting product highlights, with client-side routes for the home page and product categories. A visitor enters through the browser, the app’s router selects a page, and the shared layout frames routed content with navigation and footer. The home page renders six promotional sections and a video feed; the feed fetches recent videos from YouTube when an API key is available and otherwise uses fallback entries. The graph reflects shown imports and routes; the shared layout’s contents are supported by the indexed read reference, not a source excerpt.
Main entry points: App.jsx Routes · Home.jsx Home page · Sharelayout.jsx Shared layout · main.jsx Browser entry
Components 15
App routing
- Browser entry
src/main.jsx - Routes
src/App.jsx - Shared layout
src/components/Sharelayout/Sharelayout.jsx - Navigation
src/components/Header/Header.jsx - Footer links
src/components/Footer/Footer.jsx
Product content
- Home page
src/components/Home/Home.jsx - Mac highlights
src/components/First section/Firstsection.jsx - iPad highlights
src/components/Second section/Secondsection.jsx - iPhone highlights
src/components/Third section/Thirdsection.jsx - Watch highlights
src/components/Fourth section/Fourthsection.jsx - TV highlights
src/components/Fifth section/Fifthsection.jsx - Music highlights
src/components/Sixth section/Sixthsection.jsx
External media
- Video feed
src/components/Youtube video/Youtubevideo.jsx - YouTube API
Other components
- Visitor
Connections 20
- Visitor → Browser entry: opens
- Browser entry → Routes: renders
src/main.jsx - Routes → Shared layout: routes through
src/App.jsx - Routes → Home page: routes to
src/App.jsx - Routes → Mac highlights: routes to
src/App.jsx - Routes → iPad highlights: routes to
src/App.jsx - Routes → iPhone highlights: routes to
src/App.jsx - Routes → Watch highlights: routes to
src/App.jsx - Routes → TV highlights: routes to
src/App.jsx - Routes → Music highlights: routes to
src/App.jsx - Shared layout → Navigation: renders
src/components/Sharelayout/Sharelayout.jsx - Shared layout → Footer links: renders
src/components/Sharelayout/Sharelayout.jsx - Home page → Mac highlights: renders
src/components/Home/Home.jsx - Home page → iPad highlights: renders
src/components/Home/Home.jsx - Home page → iPhone highlights: renders
src/components/Home/Home.jsx - Home page → Watch highlights: renders
src/components/Home/Home.jsx - Home page → TV highlights: renders
src/components/Home/Home.jsx - Home page → Music highlights: renders
src/components/Home/Home.jsx - Home page → Video feed: renders
src/components/Home/Home.jsx - Video feed → YouTube API: fetches videos
src/components/Youtube video/Youtubevideo.jsx