# haseef88/stylecue-mw architecture

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

- Interactive diagram: https://gitdiagram.com/haseef88/stylecue-mw
- Repository: https://github.com/haseef88/stylecue-mw

## Overview

StyleCue is a fashion retail kiosk and stylist-demo frontend: shoppers explore sample outfits, enter preferences in a quiz, select items, and can confirm a fitting-room request. The sampled implementation is a React presentation layer backed by curated mock data; the quiz’s staff-notification message is shown in the UI, but no notification service or backend is evidenced. Other landing-page capabilities are present in App’s imports and render flow; their internals were not sampled.

Main entry points: [`src/App.tsx`](https://github.com/haseef88/stylecue-mw/blob/main/src/App.tsx) (App Shell), [`src/components/InteractiveStylistDemo.tsx`](https://github.com/haseef88/stylecue-mw/blob/main/src/components/InteractiveStylistDemo.tsx) (Stylist Demo), [`src/components/Modals/StylistQuizModal.tsx`](https://github.com/haseef88/stylecue-mw/blob/main/src/components/Modals/StylistQuizModal.tsx) (Stylist Quiz), [`src/components/HeroSection.tsx`](https://github.com/haseef88/stylecue-mw/blob/main/src/components/HeroSection.tsx) (Hero Preview)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Shopper Experience"]
  node_hero["Hero Preview<br/>[HeroSection.tsx]"]
  node_demo["Stylist Demo"]
  node_quiz["Stylist Quiz"]
end

subgraph group_content["Style Content"]
  node_lookbook["Outfit Lookbook"]
  node_runway["Runway Gallery"]
  node_mockdata["Curated Content<br/>[mockData.ts]"]
  node_how["How It Works"]
  node_benefits["Benefits"]
  node_retailers["Retailer Showcase"]
  node_about["About<br/>[AboutSection.tsx]"]
  node_testimonials["Testimonials"]
  node_faq["FAQ<br/>[FaqSection.tsx]"]
end

subgraph group_engagement["Engagement"]
  node_cta["Call to Action<br/>[CtaSection.tsx]"]
  node_auth["Auth Modal<br/>[AuthModal.tsx]"]
  node_retailermodal["Retailer Inquiry<br/>[RetailerModal.tsx]"]
  node_info["Info Modal<br/>[InfoModal.tsx]"]
end

subgraph group_presentation["App Presentation"]
  node_entry["App Bootstrap<br/>[main.tsx]"]
  node_app["App Shell<br/>[App.tsx]"]
  node_theme["Theme State<br/>[ThemeContext.tsx]"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
end

node_shopper(("Shopper"))
node_staff(("Fitting Staff"))

node_shopper -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"provides context"| node_theme
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_demo
node_app -->|"renders"| node_lookbook
node_app -->|"renders"| node_runway
node_app -->|"renders"| node_how
node_app -->|"renders"| node_benefits
node_app -->|"renders"| node_retailers
node_app -->|"renders"| node_about
node_app -->|"renders"| node_testimonials
node_app -->|"renders"| node_faq
node_app -->|"renders"| node_cta
node_app -->|"renders"| node_footer
node_app -->|"renders"| node_quiz
node_app -->|"renders"| node_auth
node_app -->|"renders"| node_retailermodal
node_app -->|"renders"| node_info
node_navbar -->|"requests quiz or modal"| node_app
node_hero -->|"starts styling"| node_demo
node_hero -->|"explores looks"| node_lookbook
node_demo -->|"opens full quiz"| node_quiz
node_lookbook -->|"reads looks"| node_mockdata
node_demo -->|"reads looks"| node_mockdata
node_quiz -->|"matches looks"| node_mockdata
node_quiz -->|"shows notification"| node_staff
node_theme -->|"provides theme"| node_app
node_footer -->|"requests navigation or info"| node_app
node_cta -->|"starts quiz"| node_app
node_navbar -->|"theme controls"| node_theme
node_app -->|"opens auth"| node_auth
node_app -->|"opens inquiry"| node_retailermodal

click node_entry "https://github.com/haseef88/stylecue-mw/blob/main/src/main.tsx"
click node_app "https://github.com/haseef88/stylecue-mw/blob/main/src/App.tsx"
click node_theme "https://github.com/haseef88/stylecue-mw/blob/main/src/context/ThemeContext.tsx"
click node_navbar "https://github.com/haseef88/stylecue-mw/blob/main/src/components/Navbar.tsx"
click node_hero "https://github.com/haseef88/stylecue-mw/blob/main/src/components/HeroSection.tsx"
click node_demo "https://github.com/haseef88/stylecue-mw/blob/main/src/components/InteractiveStylistDemo.tsx"
click node_quiz "https://github.com/haseef88/stylecue-mw/blob/main/src/components/Modals/StylistQuizModal.tsx"
click node_lookbook "https://github.com/haseef88/stylecue-mw/blob/main/src/components/LookbookSection.tsx"
click node_runway "https://github.com/haseef88/stylecue-mw/blob/main/src/components/RunwayGallerySection.tsx"
click node_mockdata "https://github.com/haseef88/stylecue-mw/blob/main/src/data/mockData.ts"
click node_how "https://github.com/haseef88/stylecue-mw/blob/main/src/components/HowItWorksSection.tsx"
click node_benefits "https://github.com/haseef88/stylecue-mw/blob/main/src/components/BenefitsSection.tsx"
click node_retailers "https://github.com/haseef88/stylecue-mw/blob/main/src/components/RetailersSection.tsx"
click node_about "https://github.com/haseef88/stylecue-mw/blob/main/src/components/AboutSection.tsx"
click node_testimonials "https://github.com/haseef88/stylecue-mw/blob/main/src/components/TestimonialsSection.tsx"
click node_faq "https://github.com/haseef88/stylecue-mw/blob/main/src/components/FaqSection.tsx"
click node_cta "https://github.com/haseef88/stylecue-mw/blob/main/src/components/CtaSection.tsx"
click node_auth "https://github.com/haseef88/stylecue-mw/blob/main/src/components/Modals/AuthModal.tsx"
click node_retailermodal "https://github.com/haseef88/stylecue-mw/blob/main/src/components/Modals/RetailerModal.tsx"
click node_info "https://github.com/haseef88/stylecue-mw/blob/main/src/components/Modals/InfoModal.tsx"
click node_footer "https://github.com/haseef88/stylecue-mw/blob/main/src/components/Footer.tsx"

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_hero,node_demo,node_quiz toneBlue
class node_lookbook,node_runway,node_mockdata,node_how,node_benefits,node_retailers,node_about,node_testimonials,node_faq toneAmber
class node_cta,node_auth,node_retailermodal,node_info toneMint
class node_entry,node_app,node_theme,node_navbar,node_footer toneRose
class node_shopper,node_staff toneIndigo
```

## Components

### Shopper Experience

- [Hero Preview](https://github.com/haseef88/stylecue-mw/blob/main/src/components/HeroSection.tsx): `src/components/HeroSection.tsx`
- [Stylist Demo](https://github.com/haseef88/stylecue-mw/blob/main/src/components/InteractiveStylistDemo.tsx): `src/components/InteractiveStylistDemo.tsx`
- [Stylist Quiz](https://github.com/haseef88/stylecue-mw/blob/main/src/components/Modals/StylistQuizModal.tsx): `src/components/Modals/StylistQuizModal.tsx`

### Style Content

- [Outfit Lookbook](https://github.com/haseef88/stylecue-mw/blob/main/src/components/LookbookSection.tsx): `src/components/LookbookSection.tsx`
- [Runway Gallery](https://github.com/haseef88/stylecue-mw/blob/main/src/components/RunwayGallerySection.tsx): `src/components/RunwayGallerySection.tsx`
- [Curated Content](https://github.com/haseef88/stylecue-mw/blob/main/src/data/mockData.ts): `src/data/mockData.ts`
- [How It Works](https://github.com/haseef88/stylecue-mw/blob/main/src/components/HowItWorksSection.tsx): `src/components/HowItWorksSection.tsx`
- [Benefits](https://github.com/haseef88/stylecue-mw/blob/main/src/components/BenefitsSection.tsx): `src/components/BenefitsSection.tsx`
- [Retailer Showcase](https://github.com/haseef88/stylecue-mw/blob/main/src/components/RetailersSection.tsx): `src/components/RetailersSection.tsx`
- [About](https://github.com/haseef88/stylecue-mw/blob/main/src/components/AboutSection.tsx): `src/components/AboutSection.tsx`
- [Testimonials](https://github.com/haseef88/stylecue-mw/blob/main/src/components/TestimonialsSection.tsx): `src/components/TestimonialsSection.tsx`
- [FAQ](https://github.com/haseef88/stylecue-mw/blob/main/src/components/FaqSection.tsx): `src/components/FaqSection.tsx`

### Engagement

- [Call to Action](https://github.com/haseef88/stylecue-mw/blob/main/src/components/CtaSection.tsx): `src/components/CtaSection.tsx`
- [Auth Modal](https://github.com/haseef88/stylecue-mw/blob/main/src/components/Modals/AuthModal.tsx): `src/components/Modals/AuthModal.tsx`
- [Retailer Inquiry](https://github.com/haseef88/stylecue-mw/blob/main/src/components/Modals/RetailerModal.tsx): `src/components/Modals/RetailerModal.tsx`
- [Info Modal](https://github.com/haseef88/stylecue-mw/blob/main/src/components/Modals/InfoModal.tsx): `src/components/Modals/InfoModal.tsx`

### App Presentation

- [App Bootstrap](https://github.com/haseef88/stylecue-mw/blob/main/src/main.tsx): `src/main.tsx`
- [App Shell](https://github.com/haseef88/stylecue-mw/blob/main/src/App.tsx): `src/App.tsx`
- [Theme State](https://github.com/haseef88/stylecue-mw/blob/main/src/context/ThemeContext.tsx): `src/context/ThemeContext.tsx`
- [Navigation](https://github.com/haseef88/stylecue-mw/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Footer](https://github.com/haseef88/stylecue-mw/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`

### Other components

- **Shopper**
- **Fitting Staff**

## Connections

- Shopper → App Bootstrap: opens app
- App Bootstrap → App Shell: renders
- App Shell → Theme State: provides context
- App Shell → Navigation: renders
- App Shell → Hero Preview: renders
- App Shell → Stylist Demo: renders
- App Shell → Outfit Lookbook: renders
- App Shell → Runway Gallery: renders
- App Shell → How It Works: renders
- App Shell → Benefits: renders
- App Shell → Retailer Showcase: renders
- App Shell → About: renders
- App Shell → Testimonials: renders
- App Shell → FAQ: renders
- App Shell → Call to Action: renders
- App Shell → Footer: renders
- App Shell → Stylist Quiz: renders
- App Shell → Auth Modal: renders
- App Shell → Retailer Inquiry: renders
- App Shell → Info Modal: renders
- Navigation → App Shell: requests quiz or modal
- Hero Preview → Stylist Demo: starts styling
- Hero Preview → Outfit Lookbook: explores looks
- Stylist Demo → Stylist Quiz: opens full quiz
- Outfit Lookbook → Curated Content: reads looks
- Stylist Demo → Curated Content: reads looks
- Stylist Quiz → Curated Content: matches looks
- Stylist Quiz → Fitting Staff: shows notification
- Theme State → App Shell: provides theme
- Footer → App Shell: requests navigation or info
- Call to Action → App Shell: starts quiz
- Navigation → Theme State: theme controls
- App Shell → Auth Modal: opens auth
- App Shell → Retailer Inquiry: opens inquiry