How haseef88/stylecue-mw works
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: App.tsx App Shell · InteractiveStylistDemo.tsx Stylist Demo · StylistQuizModal.tsx Stylist Quiz · HeroSection.tsx Hero Preview
Components 23
Shopper Experience
- Hero Preview
src/components/HeroSection.tsx - Stylist Demo
src/components/InteractiveStylistDemo.tsx - Stylist Quiz
src/components/Modals/StylistQuizModal.tsx
Style Content
- Outfit Lookbook
src/components/LookbookSection.tsx - Runway Gallery
src/components/RunwayGallerySection.tsx - Curated Content
src/data/mockData.ts - How It Works
src/components/HowItWorksSection.tsx - Benefits
src/components/BenefitsSection.tsx - Retailer Showcase
src/components/RetailersSection.tsx - About
src/components/AboutSection.tsx - Testimonials
src/components/TestimonialsSection.tsx - FAQ
src/components/FaqSection.tsx
Engagement
- Call to Action
src/components/CtaSection.tsx - Auth Modal
src/components/Modals/AuthModal.tsx - Retailer Inquiry
src/components/Modals/RetailerModal.tsx - Info Modal
src/components/Modals/InfoModal.tsx
App Presentation
- App Bootstrap
src/main.tsx - App Shell
src/App.tsx - Theme State
src/context/ThemeContext.tsx - Navigation
src/components/Navbar.tsx - Footer
src/components/Footer.tsx
Other components
- Shopper
- Fitting Staff
Connections 34
- 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