AI Workbench

Ticket Metadata¶

1. User Story¶

As a developer maintaining the COVID-19 tracker SPA,
I want to replace the defunct covidtracking.com API with disease.sh, normalise error handling across the entire data layer so that components receive thrown errors instead of raw Error objects, add a React ErrorBoundary to prevent blank-screen crashes, convert App.js to a functional component for paradigm consistency, and fix UX gaps (loading states, CountryPicker label, type bugs),
So that the application displays accurate real-time data, handles all failure modes gracefully with user-visible feedback, and follows modern React conventions throughout the codebase.

2. Background¶

The project_corona_tracker is a React 16.13.1 SPA that visualises global COVID-19 statistics using two external APIs. The covidtracking.com API — which powered the Line chart with US daily historical data — was permanently shut down in March 2021, making the Line chart non-functional for over three years.

Beyond the broken API, src/api/index.js silently returns raw Error objects from all three functions (fetchData, fetchDailyData, fetchCountries) instead of throwing. Downstream components call .map() or destructure these objects, producing TypeError crashes. There is no ErrorBoundary, so any uncaught exception yields a blank white screen. App.js is the only class component; all others use hooks. Chart.jsx initialises dailyData as {} (object) when [] (array) is required.

The design doc selected disease.sh (https://disease.sh) as the replacement — it provides both global and per-country historical time-series data, is actively maintained, and requires no authentication.

3. Scope¶

In Scope:

• Replace covidtracking.com in fetchDailyData → disease.sh (global + per-country historical)
• Normalise all catch blocks in src/api/index.js from return error to throw new Error(...)
• Apply encodeURIComponent(country) to all URL path construction
• Move hardcoded API base URLs to REACT_APP_COVID_API_URL / REACT_APP_DAILY_API_URL env vars; add .env.example
• Add ErrorBoundary class component and wire into src/index.js
• Convert App.js → App.jsx functional component with useState/useEffect, loading/error state, AbortController
• Fix Chart.jsx: useState([]), [country] in useEffect deps, Line chart for all views, loading spinner, error state, AbortController
• Fix CountryPicker.jsx: default label "Global", country name as React key
• Update Cards.jsx: accept loading/error props; render MUI Skeleton/Alert
• Unit and component tests for api layer, ErrorBoundary, Chart, Cards
• Lint and build verification gate

Out of Scope:

• React 18 / MUI v5 / Chart.js 4 major dependency upgrades
• TypeScript migration, backend, routing, authentication, CSP

4. Acceptance Criteria¶

• fetchDailyData calls disease.sh and returns correct time-series data for global and per-country views
• All three api functions throw on error (never return raw Error objects)
• ErrorBoundary wraps <App> in index.js; uncaught render errors show a fallback UI instead of blank screen
• App.jsx is a functional component using useState/useEffect with loading/error state and AbortController
• Chart.jsx initialises dailyData as [], renders Line chart for all views, shows loading spinner and error state
• CountryPicker.jsx default label is "Global"
• Cards.jsx accepts and renders loading/error props
• Unit and component tests pass for api layer, ErrorBoundary, Chart, Cards
• Lint and build gates pass
• .env.example documents REACT_APP_COVID_API_URL and REACT_APP_DAILY_API_URL

Labels: ai-created, frontend, api-layer, enhancement, bug-fix, covid-tracker

Labels: ai-created, frontend, api-layer, enhancement, bug-fix, covid-tracker