FRED Economic Indicators Dashboard

This is a Next.js 15 application that displays real-time economic indicators from the Federal Reserve Economic Data (FRED) API. The dashboard features interactive charts showing key economic metrics like Consumer Price Index (CPI), unemployment rate, and Treasury yields.

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun
• FRED API key (free from fred.stlouisfed.org)

Getting Started

1. Install dependencies:

npm install

2. Create a .env.local file in the root directory:

NEXT_PUBLIC_FRED_API_KEY=your_actual_fred_api_key_here

Get your free FRED API key at fred.stlouisfed.org/docs/api/api_key.html

3. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

4. Open http://localhost:3000 with your browser to see the dashboard.

Features

• Real-time Economic Data: Fetches live data from FRED API
• Interactive Charts: Built with Recharts for responsive data visualization
• Key Economic Indicators:
  • Consumer Price Index (CPI)
  • Unemployment Rate
  • 10-Year Treasury Yield
  • 3-Month Treasury Yield
• Responsive Design: Built with Tailwind CSS
• Mock Data Fallback: Works without API key for development

Tech Stack

• Next.js 15 with App Router
• TypeScript
• Tailwind CSS v4
• Recharts
• Lucide React (icons)

Development Commands

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linter
npm run lint

Learn More

• FRED API Documentation - Learn about Federal Reserve Economic Data API
• Next.js Documentation - Learn about Next.js features and API
• Recharts Documentation - Data visualization library

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.