Macro Market Analyzer Development

A comprehensive guide for building and maintaining a full-stack economic analysis dashboard with Next.js 14 App Router and Express.js backend.

What This Skill Does

This skill helps you develop a sophisticated economic data analysis platform featuring:

Interactive data visualizations using Recharts

RESTful API with Yahoo Finance and World Bank integration

Statistical analysis and automated insights

CSV fallback for data reliability

Responsive design with dark mode support

Project Architecture

Frontend Stack

**Framework**: Next.js 14 with App Router

**Language**: TypeScript (strict mode)

**Styling**: Tailwind CSS

**Charts**: Recharts library

**Features**: Dark mode, responsive design, lazy loading

Backend Stack

**Framework**: Express.js

**Data Sources**: Yahoo Finance API, World Bank API, CSV fallbacks

**Caching**: In-memory with 1-hour TTL

**Architecture**: RESTful API with service layer

Step-by-Step Development Instructions

1. Project Setup

When initializing the project:

1. Create frontend with Next.js 14:

```bash

npx create-next-app@latest frontend --typescript --tailwind --app

```

2. Create backend with Express:

```bash

mkdir backend && cd backend

npm init -y

npm install express cors dotenv axios csv-parser

npm install --save-dev nodemon

```

3. Set up environment variables:

- Frontend `.env.local`: `NEXT_PUBLIC_API_URL=http://localhost:5000`

- Backend `.env`: `PORT=5000`, `NODE_ENV=development`, `CORS_ORIGIN=http://localhost:3000`

2. Backend Development

**Data Service Layer** (`backend/src/services/dataService.js`):

Implement API fetch functions with try/catch for each data source

Always provide CSV fallback: `catch (error) { return loadFromCSV('filename.csv'); }`

Filter data by date range in every fetch function

Cache responses in memory with 1-hour TTL

**Analysis Service** (`backend/src/services/analysisService.js`):

Calculate correlations between datasets

Compute moving averages (SMA, EMA)

Measure volatility (standard deviation)

Generate automated insights based on statistical thresholds

**API Routes** (`backend/src/routes/`):

Validate all query parameters (startDate, endDate, symbol, etc.)

Use proper HTTP status codes (200, 400, 404, 500)

Implement error handling middleware

Return consistent JSON structure: `{ data, metadata, error? }`

3. Frontend Development

**API Client** (`frontend/lib/api.ts`):

```typescript

// Create typed API functions for each endpoint

export async function fetchMarketData(params: MarketDataParams): Promise<MarketData> {

const response = await fetch(`${API_URL}/market-data?${new URLSearchParams(params)}`);

if (!response.ok) throw new Error('Failed to fetch data');

return response.json();

}

```

**Chart Components** (`frontend/components/charts/`):

Use `ResponsiveContainer` for all charts

Implement loading skeleton states

Handle empty/missing data gracefully

Make charts responsive (adjust height/margin on mobile)

Use consistent color scheme from Tailwind config

**Page Structure** (`frontend/app/`):

Create layout with disclaimer banner

Implement date range picker in shared component

Use React Server Components where possible

Lazy load chart components: `const Chart = dynamic(() => import('@/components/charts/Chart'))`

4. Key Features Implementation

**Data Visualization**:

1. Line charts for time series (GDP, S&P 500, Treasury yields)

2. Scatter plots for correlations

3. Heatmaps for multi-dimensional analysis

4. Implement zoom, tooltip, and legend interactions

**Statistical Analysis**:

1. Pearson correlation coefficient between any two metrics

2. 50-day and 200-day moving averages

3. Rolling volatility calculations

4. Auto-generate insights when correlation > 0.7 or volatility spike > 2σ

**Export Functionality**:

Convert chart data to CSV format

Use `downloadjs` or native Blob API

Include metadata header (date range, source)

Filename format: `metric-name_YYYY-MM-DD.csv`

5. Code Quality Standards

**TypeScript Practices**:

Define interfaces for all data structures in `types.ts`

Use strict null checks

Avoid `any` type; use `unknown` if necessary

Export types from centralized location

**Error Handling**:

```typescript

// Frontend

try {

const data = await fetchData();

setData(data);

} catch (error) {

console.error('Error fetching data:', error);

setError('Failed to load data. Please try again.');

} finally {

setLoading(false);

}

// Backend

app.use((err, req, res, next) => {

console.error(err.stack);

res.status(500).json({ error: 'Internal server error' });

});

```

**Component Organization**:

One component per file

Props interface defined above component

Loading and error states always included

Maximum 200 lines per component (split if larger)

6. Performance Optimization

**Frontend**:

Lazy load charts: `dynamic(() => import('./Chart'), { ssr: false })`

Memoize expensive calculations: `useMemo(() => calculateCorrelation(data), [data])`

Debounce date range changes: `useDebounce(dateRange, 500)`

Use Next.js Image component for all images

**Backend**:

Cache API responses for 1 hour

Batch database/API requests when possible

Use streaming for large CSV files

Implement rate limiting for external APIs

7. Required Disclaimers

Add prominent disclaimer to all pages:

```typescript

<strong>Disclaimer:</strong> This dashboard is for educational and research

purposes only. Data may be delayed or inaccurate. Not investment advice.

Past performance does not guarantee future results.

</p>

</div>

```

8. Testing Checklist

Before deploying, verify:

[ ] All pages load without console errors

[ ] Charts render with real data

[ ] Date filtering updates all visualizations

[ ] CSV export downloads correctly formatted files

[ ] Dark mode toggle persists across pages

[ ] Mobile layout works on 375px width

[ ] API returns proper error messages

[ ] Loading states display during data fetch

[ ] All TypeScript compiles without errors

[ ] Disclaimer visible on every page

Common Development Tasks

Adding a New Data Source

1. **Backend**: Add fetch function to `dataService.js`:

```javascript

export async function fetchNewMetric() {

try {

const response = await axios.get('API_URL');

return processData(response.data);

} catch (error) {

console.error('API failed, using CSV:', error);

return loadFromCSV('new-metric.csv');

}

```

2. **Create CSV fallback** in `backend/src/data/new-metric.csv`

3. **Add route** in `backend/src/routes/dataRoutes.js`:

```javascript

router.get('/new-metric', async (req, res) => {

try {

const data = await fetchNewMetric();

res.json({ data, source: 'API' });

} catch (error) {

res.status(500).json({ error: error.message });

}

});

```

4. **Update TypeScript types** in `frontend/types.ts`

5. **Create API client function** in `frontend/lib/api.ts`

6. **Build chart component** and add to appropriate page

Adding a New Visualization

1. Create component in `frontend/components/charts/NewChart.tsx`:

```typescript

import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, Legend } from 'recharts';

interface NewChartProps {

data: DataPoint[];

loading?: boolean;

}

export function NewChart({ data, loading }: NewChartProps) {

if (loading) return <ChartSkeleton />;

if (!data.length) return <EmptyState message="No data available" />;

return (

</LineChart>

</ResponsiveContainer>

);

}

```

2. Use in page with lazy loading:

```typescript

const NewChart = dynamic(() => import('@/components/charts/NewChart'), { ssr: false });

```

Troubleshooting Guide

Data Not Loading

1. Verify backend is running on port 5000: `curl http://localhost:5000/health`

2. Check `NEXT_PUBLIC_API_URL` in `.env.local`

3. Confirm CSV files exist in `backend/src/data/`

4. Open browser DevTools → Network tab to inspect failed requests

5. Check backend logs for error messages

Build Errors

1. Clear Next.js cache: `rm -rf .next`

2. Delete and reinstall dependencies: `rm -rf node_modules && npm install`

3. Fix TypeScript errors: `npm run build` (read error messages carefully)

4. Check for missing environment variables

Chart Not Rendering

1. Verify data format matches component props (check console.log)

2. Ensure no `undefined` values in data array

3. Confirm `ResponsiveContainer` has parent with defined height

4. Check Recharts version compatibility with Next.js 14

5. Disable SSR for chart component if hydration errors occur

File Organization

```

project/

├── frontend/

│ ├── app/

│ │ ├── layout.tsx # Root layout with providers

│ │ ├── page.tsx # Homepage/dashboard

│ │ └── analysis/page.tsx # Analysis tools page

│ ├── components/

│ │ ├── charts/ # All chart components

│ │ ├── ui/ # Reusable UI components

│ │ └── layout/ # Header, footer, nav

│ ├── lib/

│ │ ├── api.ts # API client functions

│ │ └── utils.ts # Utility functions

│ └── types.ts # TypeScript interfaces

└── backend/

├── src/

│ ├── routes/ # Express routes

│ ├── services/ # Business logic

│ │ ├── dataService.js # Data fetching

│ │ └── analysisService.js # Statistical analysis

│ ├── data/ # CSV fallback files

│ └── index.js # Express app entry

└── .env # Backend environment vars

```

Quick Reference Commands

```bash

Development

cd frontend && npm run dev # Start Next.js dev server (port 3000)

cd backend && npm run dev # Start Express with nodemon (port 5000)

Production build

cd frontend && npm run build # Build Next.js for production

cd backend && npm start # Start Express in production mode

Code quality

npm run lint # ESLint check

npm run type-check # TypeScript check

```

Important Constraints

1. **No Investment Advice**: Never include predictive language or recommendations

2. **Disclaimer Required**: Must be visible on every page with data visualization

3. **Data Accuracy**: Always show data source and last updated timestamp

4. **Error Resilience**: All external API calls must have CSV fallback

5. **Accessibility**: Charts must have text alternatives for screen readers

Resources

[Next.js 14 Documentation](https://nextjs.org/docs)

[Recharts API Reference](https://recharts.org/en-US/api)

[Express.js Guide](https://expressjs.com/en/guide/routing.html)

[Tailwind CSS Docs](https://tailwindcss.com/docs)

[TypeScript Handbook](https://www.typescriptlang.org/docs/)

Usage Example

When asked to "add a new economic indicator to the dashboard":

1. Ask for data source API and CSV fallback location

2. Create fetch function in `dataService.js` with error handling

3. Add CSV file to `backend/src/data/`

4. Create Express route with query parameter validation

5. Define TypeScript interface in `types.ts`

6. Build API client function in `api.ts`

7. Create Recharts component with loading/error states

8. Add to appropriate page with lazy loading

9. Test with date range filtering

10. Verify CSV export functionality

This skill enables you to build production-ready economic analysis dashboards with proper error handling, performance optimization, and user experience considerations.

Macro Market Analyzer Development

Macro Market Analyzer Development

What This Skill Does

Project Architecture

Frontend Stack

Backend Stack

Step-by-Step Development Instructions

1. Project Setup

2. Backend Development

3. Frontend Development

4. Key Features Implementation

5. Code Quality Standards

6. Performance Optimization

7. Required Disclaimers

8. Testing Checklist

Common Development Tasks

Adding a New Data Source

Adding a New Visualization

Troubleshooting Guide

Data Not Loading

Build Errors

Chart Not Rendering

File Organization

Quick Reference Commands

Development

Production build

Code quality

Important Constraints

Resources

Usage Example

Reviews (0)