Act as a principal full-stack engineer, product architect, geospatial data engineer, and data-visualization designer.
Build a production-quality web app called MapFactbook.
The product vision: MapFactbook is a modern, premium, interactive world economic intelligence platform that combines a beautiful world map, country factbook, subnational drill-down, comparison tools, rankings, forecasting, risk, trade, demographics, sustainability, and exportable reports.
Important:
- Build everything except news.
- Do not add news feeds, headlines, article cards, or breaking-news widgets.
- Make strong, sensible assumptions and move forward without asking for clarification.
- Start with a concrete implementation plan, then generate the codebase.
- Prefer a modular architecture so data providers can be swapped later.
- Use sample/mock data where real global coverage is difficult, but design the app so real sources can be plugged in later.
- Handle missing data gracefully and transparently.
- Make the UI look modern, premium, dark-by-default, and highly polished.
Use:
- Next.js (App Router) + TypeScript
- Tailwind CSS
- shadcn/ui
- Zustand for UI/global state
- TanStack Query for async data
- MapLibre GL JS for maps
- deck.gl when useful for advanced layers and flow visualizations
- Recharts for charts
- Framer Motion for animations
- Prisma with SQLite for local dev persistence
- Zod for schema validation
- date-fns for dates
- a small provider-agnostic AI insight service layer
- local mock datasets + adapter interfaces for future real data integrations
If some library choice creates friction, choose the closest robust alternative and continue.
Create a beautiful, interactive world map with:
- dark premium theme
- smooth hover states
- zoom and pan
- search bar
- metric selector
- year selector / time slider
- region filter
- economic bloc filter
- left/right side panels
- responsive layout
The homepage should immediately feel like a high-end economic intelligence terminal.
When a country is clicked, show an initial overview panel with:
- country name
- flag
- capital
- region
- population
- GDP
- GDP per capita
- inflation
- unemployment
- currency
- exchange rate
- exports
- imports
- debt-to-GDP
- policy interest rate
- credit rating
- latest available year
- data source metadata
- missing-data notices if needed
Create full country pages with tabs:
- Overview
- Economy
- Trade
- Demographics
- Labor
- Government Finance
- Monetary & Currency
- Energy & Sustainability
- Infrastructure & Logistics
- Business Environment
- Risk
- Regions
- Historical Timeline
- Forecasts
- Methodology / Sources
Support subnational drill-down:
- country -> state/province
- subnational map layer when available
- regional GDP
- regional GDP per capita
- unemployment
- median income
- population
- sector composition
- exports
- industrial output
- education/labor data
- urbanization
- infrastructure indicators
Design this as ADM0 country and ADM1 subnational hierarchy. Gracefully show “data unavailable” where subnational coverage is missing.
Support:
- choropleth mode
- bubble mode
- heat/density mode
- categorical mode
- flow mode for trade routes
- sector overlay mode
Add a year/time slider so users can:
- animate indicators over time
- compare current vs past values
- scrub through years
- play/pause time animation
- view mini time-series charts on hover or click
Allow users to compare 2–5 countries or subnational regions side by side with:
- KPI cards
- line charts
- bar charts
- radar chart
- rankings
- normalized comparisons
- downloadable comparison report
Create a rankings view with filters and sorting for:
- GDP
- GDP per capita
- inflation
- unemployment
- population
- exports
- imports
- debt-to-GDP
- growth
- emissions
- inequality
- business environment
- risk scores and more.
Create a large indicator browser with categories:
- Macroeconomy
- Trade
- Labor
- Public Finance
- Monetary & Currency
- Demographics
- Energy
- Sustainability
- Inequality & Welfare
- Technology
- Education
- Health
- Infrastructure
- Business Environment
- Risk
Each indicator should have:
- name
- definition
- unit
- formula/notes where useful
- category
- latest year available
- source
- coverage notes
Users can:
- pin indicators
- pin countries/regions
- save custom dashboard layouts
- rearrange widgets
- create named dashboards
- persist to database
- fall back to local storage if auth is absent
For countries and regions, add:
- sector composition
- top industries
- top exports
- top imports
- top trade partners
- strategic sectors
- economic complexity style summary if data exists
- company/industry concentration placeholders if needed
Add a dedicated trade view with:
- origin-destination flow lines/arcs
- partner ranking tables
- export/import composition
- bilateral trade values
- commodity/product grouping support
- toggles for exports/imports/total trade
Dedicated section for:
- CPI inflation
- PPI inflation
- policy rate
- exchange rate history
- currency depreciation/appreciation
- purchasing power comparisons
- external balance context
Build a risk framework and UI for:
- sovereign risk
- inflation risk
- debt risk
- external vulnerability
- political/institutional risk placeholders
- sanctions exposure placeholder
- climate vulnerability
- commodity dependence
- banking/financial fragility placeholder
If exact real-world risk data is absent in mock mode, create a transparent composite-score framework with clear methodology labels.
Create a forecasts section for:
- GDP growth
- inflation
- unemployment
- debt path
- population
- emissions where available
Implementation:
- Use mock/sample forecast data for demo mode
- Also scaffold a forecasting service layer so models can be plugged in later
- Make forecast cards clearly labeled as forecast, not actual
- Support baseline / optimistic / pessimistic scenarios
For each country, support a historical timeline view with events such as:
- crises
- devaluations
- recessions
- reforms
- IMF programs
- elections
- wars/conflicts
- sanctions
- major policy turning points
This should be a structured dataset, not a news feed.
Support filters and aggregated views for:
- EU
- OECD
- G20
- ASEAN
- BRICS
- GCC
- African Union
- Mercosur
- Turkic States
- custom collections
Users should be able to compare a country with bloc averages.
Create a “similar economies/regions” feature based on configurable similarity dimensions like:
- GDP per capita
- sector mix
- inflation
- unemployment
- trade openness
- population
- urbanization
- energy structure
- emissions profile
Build it as a transparent scoring engine, not a black box.
Add small explainers/tooltips/help drawers for key concepts such as:
- GDP
- real vs nominal GDP
- PPP
- inflation
- current account
- debt-to-GDP
- labor force participation
- Gini
- carbon intensity
- etc.
Add an AI insight feature where the user can ask:
- summarize this economy
- compare A and B
- explain why inflation is high
- summarize the labor market
- explain regional disparities
Implementation requirements:
- provider-agnostic architecture
- a stub/mock local provider for dev
- prompt templates
- citation hooks to internal data records
- no news integration
- answers must be based on in-app data context where possible
Support overlays for:
- agriculture
- manufacturing
- mining
- oil & gas
- tourism
- finance
- technology
- logistics
- energy infrastructure
Add indicators and views for:
- ports
- airports
- rail
- roads
- logistics performance
- internet penetration
- electricity access
- trade corridors
Add:
- median age
- fertility
- urbanization
- migration
- labor force participation
- youth unemployment
- education attainment
- dependency ratio
Add:
- Gini
- poverty rate
- social spending
- HDI-style placeholder structure if needed
- minimum wage
- regional inequality
Add:
- energy mix
- oil/gas production
- renewables share
- electricity generation mix
- emissions
- emissions per capita
- carbon intensity
- climate vulnerability
- energy prices if available
Add:
- tax burden
- corporate tax
- startup conditions
- corruption/institution quality placeholders
- regulatory burden
- labor regulation placeholders
- investment attractiveness framework
Support:
- save views
- export charts as PNG/SVG
- export tables as CSV
- generate printable PDF-style country reports
- generate comparison reports
- shareable URLs with filters encoded
Create a “story mode” where curated narratives can be assembled from app data, such as:
- inflation crisis walkthrough
- trade dependence story
- regional inequality story
- energy transition story
This should use internal data, charts, and annotations only.
Users can:
- save countries/regions
- define simple threshold alerts
- trigger in-app alert center items when mock data crosses thresholds
- manage watchlists
Do not implement external email/SMS. In-app only is enough.
Every metric and chart should support:
- source label
- dataset/update metadata
- notes
- coverage quality
- missing-data warnings
- actual vs estimate vs forecast tags
- Dark premium UI by default
- Strong typography hierarchy
- Beautiful spacing
- Smooth motion
- Modern control panels
- High information density without clutter
- Mobile responsive, but optimized for desktop analysts first
- Keyboard-friendly search and navigation
- Fast, professional feel, like a serious economic terminal
Build this cleanly with:
- feature-based folder structure
- reusable map layer system
- reusable chart components
- reusable data table components
- strong TypeScript typing
- Zod schemas for domain objects
- mock data adapters
- service layer for:
- geo data
- indicators
- rankings
- trade
- forecasts
- similarity
- AI insights
- alerts
- exports
Create explicit schemas/interfaces for:
- Country
- Region/SubnationalUnit
- IndicatorDefinition
- IndicatorObservation
- TradeFlow
- ForecastSeries
- HistoricalEvent
- RiskScore
- Bloc
- Dashboard
- Watchlist
- AlertRule
- SourceMeta
- Support world countries now
- Support ADM1 subnational units where available in mock/sample coverage
- Make map layer loading modular
- Use TopoJSON/GeoJSON efficiently
- Simplify boundaries if needed for performance
- Keep labels performant
- Lazy load heavy map and chart modules
- Virtualize long tables where useful
- Cache derived computations
- Keep initial load reasonable
- Avoid rendering all heavy layers at once
Generate:
- complete runnable project
- sensible file tree
- seed script for mock data
- README with setup instructions
- architecture notes
- TODO markers where real data providers can be connected later
- environment variable examples
- basic tests for core utility functions
- comments only where they add value
Do this in order:
- Write a short but concrete implementation plan
- Generate the folder structure
- Generate core types/schemas
- Generate mock data and adapters
- Build layout and design system
- Build homepage map
- Build country pages
- Build subnational drill-down
- Build compare/rankings/library
- Build trade/risk/forecast/timeline/similarity/AI/story/report/watchlist
- Add export and persistence
- Write README and final notes
I want:
- the code
- the project structure
- key files fully written
- realistic mock data seeds
- reusable components
- no placeholder hand-waving
- clear explanation of what is complete and what is scaffolded
- Exclude news entirely
- No shallow toy app
- No generic dashboard template
- No vague pseudo-code unless absolutely necessary
- Prefer working implementation over excessive explanation
- When data is uncertain or incomplete globally, build elegant fallbacks and document assumptions
- Make the app feel premium, serious, and extensible
Now begin with the implementation plan and then start generating the actual codebase.