How code-4me/csit340-g6-midterms-legaspi works
This is a small Cloudline subscription-plan configurator, not a production billing service. The user adjusts seats and months, sees plan totals, and can increment or clear an in-page waitlist count. State is local to React components; no persistence or external service is shown. The graph follows the sampled render and callback relationships. Footer.jsx is not included because App.jsx does not render it.
Main entry points: App.jsx App state · PlanPicker.jsx Plan picker · PlanCard.jsx Plan card · Waitlist.jsx Waitlist counter
Components 9
App shell
- React entry
src/main.jsx - App state
src/App.jsx - Navigation
src/components/Navbar.jsx
Plan builder
- Plan picker
src/components/PlanPicker.jsx - Plan summary
src/components/Summary.jsx - Plan card
src/components/PlanCard.jsx - Plan features
src/components/Feature.jsx
Waitlist
- Waitlist counter
src/components/Waitlist.jsx
Other components
- Visitor
Connections 10
- React entry → App state: renders
src/main.jsx - App state → Navigation: renders
src/App.jsx - App state → Plan picker: passes state and handlers
src/App.jsx - App state → Waitlist counter: renders
src/App.jsx - Plan picker → Plan summary: renders state
src/components/PlanPicker.jsx - Plan picker → Plan card: renders plan options
src/components/PlanPicker.jsx - Plan card → Plan features: renders features
src/components/PlanCard.jsx - Visitor → Plan picker: adjusts plan
src/components/PlanPicker.jsx - Plan picker → App state: invokes handlers
src/components/PlanPicker.jsx - Visitor → Waitlist counter: updates count
src/components/Waitlist.jsx