Implement

Phase 1: API Layer + x402 Foundation

API Routes

• Create /api/solar/irradiance.ts — proxy to Open-Meteo
• Create /lib/api/openMeteo.ts — API client with response transform
• Create /types/solar.ts — TypeScript interfaces
• Add simple in-memory caching (5-minute TTL)

x402 Setup

• Install x402 dependencies (x402, @x402/next)
• Create /lib/x402/config.ts — pricing per endpoint
• Create /lib/x402/middleware.ts — Next.js API middleware
• Configure x402 with Base network + USDC

Phase 2: Location Flow

• Create LocationContext.tsx — global location state
• Create useLocation.ts hook — browser geolocation
• Create LocationSearch.tsx — address input with geocoding
• Create /api/geocode/search.ts — Nominatim proxy
• Update _app.tsx — wrap with LocationProvider

Phase 3: Core Dashboard

• Create dashboard.tsx page
• Create useSolarData.ts hook with SWR
• Create SolarMeter.tsx — radial gauge
• Create WastedValue.tsx — animated dollar counter
• Create /lib/calculations/solarValue.ts
• Create useX402.ts hook
• Create PaymentGate.tsx

Phase 4: Charts & Additional Data

• Create IrradianceChart.tsx — Recharts area chart
• Create /api/grid/carbon.ts — Electricity Maps proxy
• Create GridCarbonBadge.tsx
• Create /api/buildings/area.ts — Overpass proxy
• Create useBuildingArea.ts hook

Phase 5: 3D Visualization & Animation

Three.js Setup

• Install dependencies (three, @react-three/fiber, @react-three/drei)
• Create SunScene.tsx — R3F Canvas
• Create Sun.tsx — 3D sun with glow shader
• Implement bloom post-processing

Particle System

• Create EnergyParticles.tsx
• Create CloudLayer.tsx
• Create Ground.tsx
• Add day/night transitions

Interactive Features

• Mouse parallax camera
• Sun hover effects
• Click for stats overlay
• Touch support

Phase 6: Final Polish

• Loading states (framer-motion skeletons)
• Error handling for all API calls
• Nighttime state handling
• Share functionality
• Mobile responsive
• Performance optimization
• Cross-browser testing
• Deploy to Vercel

File Structure Reference

src/
├── pages/
│   ├── index.tsx              # Landing
│   ├── dashboard.tsx          # Main dashboard
│   └── api/
│       ├── solar/irradiance.ts
│       ├── grid/carbon.ts
│       ├── buildings/area.ts
│       └── geocode/search.ts
├── components/
│   ├── LocationSearch.tsx
│   ├── SolarMeter.tsx
│   ├── WastedValue.tsx
│   ├── IrradianceChart.tsx
│   ├── GridCarbonBadge.tsx
│   ├── PaymentGate.tsx
│   └── three/
│       ├── SunScene.tsx
│       ├── Sun.tsx
│       ├── EnergyParticles.tsx
│       └── ...
├── hooks/
│   ├── useLocation.ts
│   ├── useSolarData.ts
│   ├── useBuildingArea.ts
│   └── useX402.ts
├── lib/
│   ├── api/
│   │   ├── openMeteo.ts
│   │   ├── electricityMaps.ts
│   │   └── overpass.ts
│   ├── x402/
│   │   ├── config.ts
│   │   └── middleware.ts
│   └── calculations/
│       └── solarValue.ts
├── context/
│   └── LocationContext.tsx
└── types/
    ├── solar.ts
    └── x402.ts

Implementation Workflow

1. Read the checklist for the specific phase/task
2. Check dependencies - install any missing packages
3. Create types first - define TypeScript interfaces
4. Implement the feature - follow project patterns
5. Test the implementation - use /check skill
6. Update the checklist - mark items as complete

Checklist

• Read IMPLEMENTATION_CHECKLIST.md for context
• Identify all files that need to be created/modified
• Install any required dependencies
• Implement following project patterns
• Run /check to verify no errors
• Mark completed items in checklist