Task 5: Comparison Dashboard & Documentation (6-10 hours) #8
Description
Overview
Create a comparison dashboard showing side-by-side metrics from both versions, and write documentation for running, deploying, and demoing the app.
Dependency: Tasks 3 & 4 (both versions must be complete)
Deliverables
1. Metrics Dashboard (/dashboard)
- Side-by-side metrics: Traditional vs RSC
- Charts: LCP over time, CLS distribution
- Network waterfall visualization
- Key stats highlighted:
- 59% LCP improvement (550ms → 225ms)
- 83% CLS improvement (0.12 → 0.02)
2. Comparison View (/comparison)
- Two iframes: Traditional + RSC side-by-side
- Synchronized scrolling
- Real-time metrics overlay
- The "wow" moment for customer demos
3. Documentation
| File | Purpose |
|---|---|
README.md |
What is LocalHub, how to run it |
DEPLOYMENT.md |
How to deploy (Docker, Heroku) |
DEMO_WALKTHROUGH.md |
5-minute presentation script |
Components to Create
// MetricsComparison.tsx
interface Props {
traditionalMetrics: Metric[];
rscMetrics: Metric[];
}
// Shows LCP, CLS, INP comparison with improvement percentages
// Includes bar charts visualizing the difference// ComparisonView.tsx
// Two iframes side-by-side
// Traditional (gray border) | RSC (green border)
// Metrics overlay at bottomDatabase Model for Metrics
# db/migrate/XXX_create_performance_metrics.rb
create_table :performance_metrics do |t|
t.string :version, null: false # 'traditional' or 'rsc'
t.float :lcp, null: false
t.float :cls, null: false
t.float :inp, null: false
t.datetime :timestamp, null: false
t.timestamps
endRoutes
get '/dashboard', to: 'dashboard#index'
get '/comparison', to: 'comparison#show'Success Criteria
-
/dashboardaccessible and metrics accurate -
/comparisonshows both versions side-by-side - Metrics show 59% LCP improvement, 83% CLS improvement
- Documentation is clear and complete
- Demo is ready to show to customers
- 5-minute walkthrough script tested
Demo Walkthrough Script (5 minutes)
- Show Problem (1 min):
/searchwith spinners, LCP ~500ms - Show Solution (1 min):
/search/rsccomplete immediately, LCP ~200ms - Show Metrics (2 min):
/dashboardwith charts - Explain Architecture (1 min): Same components, different fetch timing
Key Files to Create
app/controllers/
├─ dashboard_controller.rb
└─ comparison_controller.rb
app/views/
├─ dashboard/index.html.erb
└─ comparison/show.html.erb
app/javascript/components/
├─ MetricsComparison.tsx
├─ MetricCard.tsx
└─ ComparisonView.tsx
app/models/
└─ performance_metric.rb
docs/
├─ DEPLOYMENT.md
├─ DEMO_WALKTHROUGH.md
└─ README_FOR_DEMO.md
Final Checklist
Before considering the demo complete:
- Both versions load successfully
- Traditional: LCP ~500-600ms, CLS ~0.10-0.15
- RSC: LCP ~200-250ms, CLS ~0.02
- Metrics dashboard displays accurately
- Comparison view works smoothly
- Documentation complete and clear
- Demo walkthrough script ready
- No console errors on either version
- Responsive design works on mobile/tablet/desktop