Skip to content

FRONTEND.md

Latest commit

 

History

History
98 lines (77 loc) · 2.6 KB

FRONTEND.md

File metadata and controls

98 lines (77 loc) · 2.6 KB

UK Economic Dashboard Frontend

A React-based dashboard that displays UK macroeconomic data from the UK Macro Crew system.

Features

  • Real-time Data: Loads data from research_report.json generated by the UK Macro Crew system
  • Economic Indicators: Displays Interest Rates, CPIH Inflation, and GDP Growth with trend indicators
  • Report Summaries: Shows comprehensive summaries of Monetary Policy and Financial Stability reports
  • Responsive Design: Works on desktop and mobile devices
  • Error Handling: Graceful loading states and error messages
  • Source Links: Direct links to official Bank of England and ONS sources

Quick Start

Prerequisites

  • Node.js 18+
  • npm

Installation & Running

# Install dependencies
npm install

# Start development server
npm run dev

The dashboard will be available at http://localhost:5173

Building for Production

npm run build

Data Integration

The frontend automatically loads data from /public/research_report.json. To update the dashboard with new data:

  1. Run the UK Macro Crew system: crewai run
  2. Copy the updated report: cp research_report.json public/
  3. Refresh the dashboard or click the "Refresh" button

Technology Stack

  • React 18 with TypeScript
  • Vite for build tooling
  • Tailwind CSS for styling
  • Radix UI components for accessibility
  • Lucide React for icons
  • Recharts for potential future data visualization

Project Structure

src/
├── app/
│   ├── App.tsx                 # Main application component
│   └── components/
│       ├── EconomicIndicatorCard.tsx  # Individual indicator display
│       ├── ReportSummaryCard.tsx      # Report summary display
│       └── ui/                        # Reusable UI components
├── main.tsx                    # Application entry point
└── styles/                     # CSS and styling files

Data Format

The dashboard expects data in this format:

{
  "current_economic_indicators": {
    "interest_rate": {
      "value": "3.75%",
      "publication_date": "2025-12-18",
      "next_publication_date": "2026-02-05",
      "source": "https://..."
    },
    // ... other indicators
  },
  "current_report_summaries": {
    "monetary_policy_report": {
      "summary": "Comprehensive analysis...",
      "report_date": "2025-12-18",
      "next_publication_date": "2026-02-05",
      "source": "https://..."
    },
    // ... other reports
  },
  "metadata": {
    "generated_at": "2026-02-02T20:47:50.650600Z",
    "last_updated": "2026-02-02T20:47:50.650600Z"
  }
}