Break down #1 into phased implementation (5 phases) #5

New issue

Closed

opened 2026-05-13 23:26:39 +00:00 by Mark · 1 comment

Mark commented

2026-05-13 23:26:39 +00:00

Owner

Goal

Break down freshfind-marketmap#1 (No backend/API layer) into independently implementable phases.

Decomposition

All price data and alert subscriptions are currently hardcoded mockups. The alerts form (AlertsSection.tsx) simulates submission with setTimeout but does not actually send data anywhere.

Phase 1 — API Service Interface & Data Types

src/services/types.ts — Define API types (MarketPrice, Alert, AlertSubscription, MarketRegion, MapViewState, ApiResponse)
src/services/api.ts — Define MarketMapApiService interface:

interface MarketMapApiService {
  getPrices(region?: string): Promise<ApiResponse<MarketPrice[]>>;
  getAlerts(): Promise<ApiResponse<Alert[]>>;
  createAlert(subscription: AlertSubscription): Promise<ApiResponse<Alert>>;
  deleteAlert(id: string): Promise<ApiResponse<void>>;
  getRegions(): Promise<ApiResponse<MarketRegion[]>>;
}

src/services/mockApi.ts — Implement MockMarketMapApiService returning existing hardcoded data (no functional change yet)
No UI changes — just the interface + mock adapter

Phase 2 — Abstraction Layer

Create a service context/provider so components consume the interface, not mock data directly
Refactor AlertsSection.tsx and price display components to use MarketMapApiService via context
Wire MockMarketMapApiService by default — behavior identical to current app

Phase 3 — HTTP API Adapter

src/services/httpApi.ts — Implement HttpMarketMapApiService
Configurable VITE_MARKET_API_URL env var
Axios/fetch with typed error responses and retry
Auth token injection (for future auth)
Toggle via VITE_USE_MOCK_API env var

Phase 4 — Lightweight Backend

server/ directory
Hono or Express with SQLite (better-sqlite3 or Turso)
Endpoints: GET/POST/DELETE /api/prices, /api/alerts, /api/regions
Seed data from the existing mock values
GET /api/health
CORS for localhost dev

Phase 5 — Cutover

Wire HttpMarketMapApiService with dev server
Smoke test CRUD flows
Remove mock adapters (or keep for offline dev config)
Update README

Dependency Graph

Phase 1 -> Phase 2 -> Phase 3 -> Phase 4 -> Phase 5

Effort

Phases 1-2: ~1-2 hours (client-side, safe, testable immediately)
Phase 3: ~1 hour (HTTP adapter)
Phase 4-5: ~2-3 hours (server + wiring)

## Goal Break down freshfind-marketmap#1 (No backend/API layer) into independently implementable phases. ## Decomposition All price data and alert subscriptions are currently hardcoded mockups. The alerts form (AlertsSection.tsx) simulates submission with setTimeout but does not actually send data anywhere. ### Phase 1 — API Service Interface & Data Types - `src/services/types.ts` — Define API types (MarketPrice, Alert, AlertSubscription, MarketRegion, MapViewState, ApiResponse<T>) - `src/services/api.ts` — Define `MarketMapApiService` interface: ``` interface MarketMapApiService { getPrices(region?: string): Promise<ApiResponse<MarketPrice[]>>; getAlerts(): Promise<ApiResponse<Alert[]>>; createAlert(subscription: AlertSubscription): Promise<ApiResponse<Alert>>; deleteAlert(id: string): Promise<ApiResponse<void>>; getRegions(): Promise<ApiResponse<MarketRegion[]>>; } ``` - `src/services/mockApi.ts` — Implement `MockMarketMapApiService` returning existing hardcoded data (no functional change yet) - **No UI changes** — just the interface + mock adapter ### Phase 2 — Abstraction Layer - Create a service context/provider so components consume the interface, not mock data directly - Refactor `AlertsSection.tsx` and price display components to use `MarketMapApiService` via context - Wire `MockMarketMapApiService` by default — behavior identical to current app ### Phase 3 — HTTP API Adapter - `src/services/httpApi.ts` — Implement `HttpMarketMapApiService` - Configurable `VITE_MARKET_API_URL` env var - Axios/fetch with typed error responses and retry - Auth token injection (for future auth) - Toggle via `VITE_USE_MOCK_API` env var ### Phase 4 — Lightweight Backend - `server/` directory - Hono or Express with SQLite (better-sqlite3 or Turso) - Endpoints: GET/POST/DELETE /api/prices, /api/alerts, /api/regions - Seed data from the existing mock values - GET /api/health - CORS for localhost dev ### Phase 5 — Cutover - Wire `HttpMarketMapApiService` with dev server - Smoke test CRUD flows - Remove mock adapters (or keep for offline dev config) - Update README ## Dependency Graph Phase 1 -> Phase 2 -> Phase 3 -> Phase 4 -> Phase 5 ## Effort - Phases 1-2: ~1-2 hours (client-side, safe, testable immediately) - Phase 3: ~1 hour (HTTP adapter) - Phase 4-5: ~2-3 hours (server + wiring)