policyengine-app

Build an interactive web interface using React functional components with React Router v6 for navigation, Plotly.js for data visualization, and axios for API integration. This approach enables users to input household details, compute tax and benefit outcomes, visualize marginal rates, and compare reform scenarios while maintaining URL-encoded parameters for reproducible sharing.

Integrate Plotly.js into your React app by creating functional components that fetch data via axios and render interactive charts with PolicyEngine branding. Plotly provides responsive, interactive visualizations suitable for displaying marginal tax rates and reform comparisons within your application's UI.

Yes. React Router v6 works with functional components to manage URL-encoded reform parameters, enabling reproducible policy scenarios and shareable links. This pattern allows users to bookmark, share, and embed specific reform comparisons across different parts of the application.

Use axios for API integration following a standard pattern: lift state up to manage household inputs, fetch calculations through axios calls, and pass results to child components for rendering. This ensures consistent data flow across your application and supports efficient re-renders with React 18.

Create self-contained React functional components with URL-encoded reform parameters that can be embedded externally. Use axios to fetch data independently, Plotly for visualization, and React Router patterns to manage internal navigation while maintaining isolation from the host site.

URL-encoded parameters work well for reproducible sharing and embedding but have practical length limits for complex scenarios. For very detailed reforms with many parameters, consider supplementary approaches like unique scenario identifiers or API-persisted configurations alongside URL sharing.