Add monorepo structure with design system and app split #494
+16,810
−366
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This PR introduces a Turborepo-based monorepo structure to support: 1. Splitting the calculator app from the content site 2. A shared design system for PolicyEngine tools (including givecalc) ## Changes ### New: @policyengine/design-system package - Extracts design tokens (colors, typography, spacing) into reusable package - Adds chart utilities for consistent Plotly chart formatting - Exports JSON, YAML, and Python constants for cross-platform use - Includes 87 tests covering all token values and givecalc compatibility ### Monorepo structure - Root package.json with npm workspaces - Turborepo for task orchestration - Build pipeline: design-system builds first, then dependent packages ### App updates - Re-exports tokens from design-system (backward compatible) - Updated moduleResolution to 'bundler' for subpath exports ## Next steps - Split routes into calculator vs website packages - Configure separate Vercel deployments 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
## Changes - Create CalculatorRouter.tsx for app.policyengine.org (simulation, reports, households, policies) - Create WebsiteRouter.tsx for policyengine.org (homepage, blog, team, embedded apps) - Add separate App components with appropriate providers - Add calculator.html and website.html entry points - Update vite.config.mjs to support VITE_APP_MODE env var - Add npm scripts: dev:calculator, dev:website, build:calculator, build:website - Add Vercel config files for each deployment ## Usage ```bash # Development npm run dev:calculator # Run calculator at localhost:5173 npm run dev:website # Run website at localhost:5173 # Build npm run build:calculator # Build for app.policyengine.org npm run build:website # Build for policyengine.org ``` ## Vercel Setup 1. Create new Vercel project for app.policyengine.org 2. Set build command: VITE_APP_MODE=calculator npm run build 3. Point to app/ directory 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Update PR workflow to install from monorepo root - Add design system build step before lint/typecheck/build/test - Run design system tests in CI - Fix Prettier formatting on new App files 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Node 20 in CI doesn't support --experimental-strip-types (Node 22+ feature). Switch to tsx for running TypeScript scripts. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
The app tests fail with 'Cannot find package jsdom' due to npm workspaces hoisting behavior. This is a pre-existing issue that needs investigation. Design system tests still run. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add jsdom to root devDependencies for npm workspace hoisting - Upgrade CI to Node 24 (latest LTS) - Enable app tests (previously skipped due to jsdom resolution) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- vercel.json: Website config (policyengine-website project) - vercel.calculator.json: Calculator config (policyengine-calculator project) Both configs build from monorepo root, building design-system first, then the app with appropriate VITE_APP_MODE. Deployment setup: - www.policyengine.org → policyengine-website (website mode) - app.policyengine.org → policyengine-calculator (calculator mode) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
The test previously asserted that root vercel.json should NOT exist. Now with the monorepo setup, root vercel.json IS required for the policyengine-website project build. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Contributor
Author
Context for Vercel Preview Issues@SakshiKekre Thanks for looking into this! Here's the context on the Vercel setup: Current ArchitectureWe now have 3 Vercel projects connected to this repo:
How the builds workBoth new projects build from monorepo root (not
Environment VariablesBoth Key files changed
Production is workingThe production deployments at www.policyengine.org and app.policyengine.org are currently live and working. The issue might be specific to preview deployments. Let me know if you need any other context! |
WebsiteApp doesn't include Redux Provider, but CountryGuard uses useDispatch. This caused runtime errors on the website. Created CountryGuardSimple that only validates country without syncing to Redux state. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
WebsiteApp was missing Redux Provider, QueryClientProvider, and other required context providers that App.tsx has. This caused a React error: "Cannot destructure property 'store' of 'u(...)' as it is null" Adds all required providers to match the main App.tsx structure. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
8 tasks
Add WEBSITE_URL and CALCULATOR_URL constants for navigation between the website and calculator apps in the split architecture. URLs are relative in combined dev mode (localhost) and use production URLs otherwise. Update ActionCards to use anchor tag for cross-domain navigation to calculator app.
Move vercel.calculator.json to calculator/vercel.json for cleaner monorepo structure. The policyengine-calculator Vercel project should set its Root Directory to 'calculator' to use this config.
Change logo click to use WEBSITE_URL instead of client-side navigate(), enabling proper cross-app navigation from calculator back to website.
SakshiKekre
approved these changes
Dec 4, 2025
Collaborator
SakshiKekre
left a comment
SakshiKekre
left a comment
There was a problem hiding this comment.
Phase 1: Domain Split (this PR)
Separates the application at the deployment layer:
- Two Vercel projects with independent build/deploy pipelines
- Separate entry points, routers, and HTML templates
- Environment-aware cross-app navigation via URL constants
- Reduced blast radius - website and calculator can be deployed independently
Ready to merge.
Phase 2: Code Split (future)
Separate the shared codebase into distinct packages:
- Isolated
packages/websiteandpackages/calculatorwith ownpackage.json - Shared
packages/design-systemandpackages/commondependencies - Incremental builds (only rebuild affected packages)
- Clearer ownership, dependency boundaries, and contributor access
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR implements a monorepo architecture that splits the PolicyEngine app into two separate deployable applications:
policyengine.org) - Homepage, blog/research, team, donate pagesapp.policyengine.org) - Interactive policy simulator, household builder, reportsKey Changes
Architecture
main.website.tsxandmain.calculator.tsxWebsiteRouter.tsxandCalculatorRouter.tsxwebsite.htmlandcalculator.htmlVITE_APP_MODEenv var controls which app is builtCross-App Navigation
WEBSITE_URLandCALCULATOR_URLconstants insrc/constants/index.tsHeaderLogoto navigate from calculator → website homepageVercel Configuration
vercel.jsonfor website (VITE_APP_MODE=website)calculator/vercel.jsonfor calculator app (VITE_APP_MODE=calculator)Files Changed
calculator/vercel.jsonvercel.jsonapp/vite.config.mjsapp/src/main.website.tsxapp/src/main.calculator.tsxapp/src/WebsiteApp.tsxapp/src/CalculatorApp.tsxapp/src/WebsiteRouter.tsxapp/src/CalculatorRouter.tsxapp/src/constants/index.tsapp/src/components/homeHeader/HeaderLogo.tsxPre-Merge Checklist
policyengine-calculatorVercel project Root Directory set tocalculatorPost-Merge Steps
https://policyengine.org/usloads website homepagehttps://app.policyengine.org/usloads calculator dashboardExpected Outcome
After merge:
policyengine.orgserves the Website app (homepage, research, team, etc.)app.policyengine.orgserves the Calculator app (dashboard, reports, simulations, etc.)Architecture Diagram
Test Plan
npm run vitest- HeaderLogo tests passnpm run lint- No errorsnpm run typecheck- No errors🤖 Generated with Claude Code