About the Project

Inspiration

Web developers often waste time checking MDN, caniuse, and blogs to confirm if a feature is safe to use in production. The Baseline initiative solves this by providing clear compatibility data, but there’s still no team-friendly dashboard to track how codebases evolve with respect to Baseline. This gap inspired me to build a Baseline Compatibility Dashboard that makes compliance visible at the project and pull request level.

What I Learned

• How to integrate Baseline APIs to fetch real feature compatibility data.
• How to design a dummy GitHub-like API to simulate repo scans and PRs without needing authentication.
• How to use React + TailwindCSS + Recharts to create a clean, developer-focused UI.
• Importance of making tooling that is both useful for solo devs and scales to teams.

How I Built It

• Frontend: React + Vite + TailwindCSS for fast UI development.

• Data Sources:

  • Real Baseline API for feature support information.
  • Dummy API (mock server / JSON) to simulate GitHub PRs, repos, and scan results.

• Visualizations: Recharts for compliance trends (line chart) and feature risk breakdowns (pie chart).

• Workflow:

  • A developer can select a project from the dashboard.
  • The system shows overall compliance, risky features, and PR impact.
  • PRs introducing unsafe features are flagged automatically.

Challenges

• Data Integration: Combining real Baseline data with a dummy GitHub-like API in a way that feels seamless.
• UI Clarity: Presenting complex compatibility data in a simple, actionable way.
• Time Constraints: Building a solo project meant balancing innovation with feasibility.

Built With

• baselineapi
• node.js
• react
• tailwindcss