A web-based dashboard for tracking and visualizing key economic metrics from Ray Dalio's "Principles for Navigating Big Debt Crises". This application displays interactive charts for metrics related to both deflationary and inflationary debt cycles, focusing on U.S. data from the 1900s onward.
- Interactive Metrics Dashboard: View and explore key economic indicators for deflationary and inflationary debt cycles
- Detailed Metric Analysis: Click on any metric to see detailed historical data and relevant statistics
- Educational Content: Learn about debt cycles and their impact on economic indicators
- Responsive Design: Works on mobile, tablet, and desktop devices
- Dark/Light Mode: Automatically adjusts to your system preferences
- Data Caching: Real FRED data is cached in a PostgreSQL database for better performance
- Frontend: Next.js with React and TypeScript
- Styling: Tailwind CSS
- Charts: Chart.js with react-chartjs-2
- Icons: Heroicons
- Database: PostgreSQL with Prisma ORM
- Testing: Jest and React Testing Library
- Node.js (v18.0.0 or later)
- npm or yarn
- PostgreSQL (v14 or later)
- Clone the repository:
git clone https://github.com/yourusername/debt-cycles.git
cd debt-cycles- Install dependencies:
npm install
# or
yarn install- Set up environment variables:
Create a .env.local file in the root directory with the following:
NEXT_PUBLIC_FRED_API_KEY=your_fred_api_key
DATABASE_URL=postgresql://username:password@localhost:5432/debt_cycles
You can obtain a FRED API key from fred.stlouisfed.org.
- Set up the database:
# Run the database bootstrap script to set up and seed the database
npm run db:bootstrap
# Alternatively, you can run the individual commands:
npm run db:setup # Run Prisma migrations and generate client
npm run seed # Seed the database with FRED data- Run the development server:
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser to see the application.
app/: Application source code (Next.js App Router)components/: React componentscharts/: Chart componentsui/: UI components (cards, modals, etc.)
data/: Data sources and mock data generatorstypes/: TypeScript type definitionsabout/: About pagedatabase/: Database services and modelsservices/: API serviceshooks/: React hooks__tests__/: Test files
public/: Static assetsscripts/: Utility scripts for database setup and seedingprisma/: Prisma schema and migrationstailwind.config.ts: Tailwind CSS configuration
The application uses PostgreSQL with Prisma ORM to cache data from the FRED API. This improves performance and reduces API calls.
npm run db:setup # Set up database (run migrations + generate Prisma client)
npm run db:migrate # Run Prisma migrations
npm run db:generate # Generate Prisma client
npm run db:studio # Open Prisma Studio to view/edit database
npm run seed # Seed the database with FRED data
npm run seed:test # Seed the database with test data for testing
npm run db:bootstrap # Full database setup (reset + migrate + seed + test)For more detailed information about the database, see DATABASE.md.
The application includes comprehensive tests for components, hooks, and services.
npm test # Run all tests
npm run test:watch # Run tests in watch mode
npm run test:coverage # Generate test coverage report
./scripts/test-database.sh # Run database-specific testsFor more detailed information about testing, see TESTING.md.
The primary data source for this dashboard is the Federal Reserve Economic Data (FRED) API. In development and test environments, cached mock data may be used.
Real data is fetched from:
- Federal Reserve Economic Data (FRED)
This project is inspired by Ray Dalio's book "Principles for Navigating Big Debt Crises". It is intended for educational purposes only and is not affiliated with Bridgewater Associates or Ray Dalio.
MIT