How sarzam/miscursions_portfolio works
Miscursions is a magazine-style portfolio presenting Misbah Shaikh’s profile and work. A visitor enters the React app, follows the cover or issue route, and reads an interactive page-flip issue; a secret-margin route adds an easter-egg page. Content is supplied by local mock data, while shared magazine components handle navigation, page layout, reader count, and theme. The backend and development health-check code are not mapped because the supplied evidence does not establish their role in this visitor workflow; the issue’s detailed interactions are only partly excerpted.
Main entry points: App.js App Router · CoverPage.jsx Cover Page · IssuePage.jsx Flipbook Issue · MagazineTopBar.jsx Magazine Navigation
Components 14
Application Routing
- App Router
frontend/src/App.js - Not Found
frontend/src/pages/NotFound.jsx
Magazine Experience
- Cover Page
frontend/src/pages/CoverPage.jsx - Flipbook Issue
frontend/src/pages/IssuePage.jsx - Secret Margin
frontend/src/pages/EasterEggPage.jsx
Editorial Content
- Profile Pages
frontend/src/components/magazine/pages/PagesPartA.jsx - Portfolio Pages
frontend/src/components/magazine/pages/PagesPartB.jsx - Portfolio Data
frontend/src/mock.js
Shared Presentation
- Page Shell
frontend/src/components/magazine/PageShell.jsx - Magazine Navigation
frontend/src/components/magazine/MagazineTopBar.jsx - Reader Counter
frontend/src/components/magazine/ReaderCounter.jsx - Theme State
frontend/src/context/ThemeContext.jsx - Toast UI
frontend/src/components/ui/sonner.jsx
Other components
- Visitor
Connections 22
- Visitor → App Router: opens
frontend/src/App.js - App Router → Cover Page: routes to
frontend/src/App.js - App Router → Flipbook Issue: routes to
frontend/src/App.js - App Router → Secret Margin: routes to
frontend/src/App.js - App Router → Not Found: routes to
frontend/src/App.js - App Router → Theme State: provides theme
frontend/src/App.js - App Router → Toast UI: renders
frontend/src/App.js - Cover Page → Portfolio Data: reads
frontend/src/pages/CoverPage.jsx - Cover Page → Magazine Navigation: renders
frontend/src/pages/CoverPage.jsx - Cover Page → Reader Counter: renders
frontend/src/pages/CoverPage.jsx - Cover Page → Theme State: reads theme
frontend/src/pages/CoverPage.jsx - Flipbook Issue → Magazine Navigation: renders
frontend/src/pages/IssuePage.jsx - Flipbook Issue → Profile Pages: renders
frontend/src/pages/IssuePage.jsx - Flipbook Issue → Portfolio Pages: renders
frontend/src/pages/IssuePage.jsx - Flipbook Issue → Page Shell: renders
frontend/src/pages/IssuePage.jsx - Secret Margin → Portfolio Data: reads
frontend/src/pages/EasterEggPage.jsx - Secret Margin → Magazine Navigation: renders
frontend/src/pages/EasterEggPage.jsx - Profile Pages → Page Shell: wraps pages
frontend/src/components/magazine/pages/PagesPartA.jsx - Profile Pages → Portfolio Data: reads
frontend/src/components/magazine/pages/PagesPartA.jsx - Portfolio Pages → Page Shell: wraps pages
frontend/src/components/magazine/pages/PagesPartB.jsx - Portfolio Pages → Portfolio Data: reads
frontend/src/components/magazine/pages/PagesPartB.jsx - Magazine Navigation → Theme State: reads theme
frontend/src/components/magazine/MagazineTopBar.jsx