Implement Feature from Checklist

Implement: $ARGUMENTS

Reference Document

Always read the implementation checklist first:

• •Path: /Users/tyrelle/Desktop/KardashevNetwork/IMPLEMENTATION_CHECKLIST.md

Implementation Phases Overview

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