Baseline Analytics Dashboard

Inspiration

As the web platform rapidly evolves, developers often struggle to keep their codebases compatible with the features that are reliably supported across browsers. While new APIs empower us to build better experiences, it's easy to accidentally rely on features that aren't yet safe for all users. We wanted to help teams make informed, data-driven decisions about modernizing their code while ensuring web compatibility. That's why we built the Baseline Analytics Dashboard: to shine a light on where you're using cutting-edge features, track your journey toward best practices, and provide clear, actionable guidance.

What it does

Baseline Analytics Dashboard scans your codebase, detects the use of web platform features (JavaScript, CSS, HTML), and compares them to the Baseline set of widely supported features. It presents:

• A dashboard showing what percentage of your code uses Baseline vs. non-Baseline features.
• Visual trends over time, so you can measure progress toward Baseline compliance.
• Per-feature and per-file breakdowns, highlighting where compatibility risks live.
• Actionable recommendations—such as polyfills, alternatives, or migration guides—for any non-Baseline features detected.

How i built it

We combined several open-source tools and data sources:

• Static analysis: Leveraged AST parsers (like Babel for JavaScript, PostCSS for CSS, and HTML parsers) to scan code for feature usage.
• Baseline data: Integrated with the Baseline API and MDN browser compatibility data to check which features are considered Baseline.
• Backend: Built with Node.js to handle code scanning, data aggregation, and version control integration (for trends over time).
• Frontend: Developed the dashboard in React with charts (using Chart.js/D3) and interactive tables for deep dives into feature usage.
• CI Integration: Optional CLI and GitHub Action support for automated checks and reporting in pull requests.

Challenges i ran into

• Mapping code patterns to specific web features and normalizing naming conventions was tricky, especially for overlapping or polyfilled APIs.
• Keeping up with changes to the Baseline specification and browser support required automation around data import.
• Balancing scan performance with accuracy—especially on large codebases—meant optimizing AST traversal and caching results.
• Designing a UI that stays informative without overwhelming users with too much detail.

Accomplishments that we're proud of

• End-to-end pipeline from source code to actionable, visual insights.
• Accurate mapping of code usage to Baseline features, even in complex projects.
• Time-series tracking so teams can celebrate progress and catch regressions early.
• A user-friendly dashboard that makes compatibility health both visible and actionable for everyone, not just engineers.

What we learned

• Compatibility debt is widespread—even modern codebases use non-Baseline features more than expected!
• Teams value concrete, visual metrics and actionable recommendations over abstract compatibility warnings.
• Integration with CI/CD and developer workflows is crucial for adoption.
• The Baseline dataset is a moving target—automation and up-to-date data are key.

What's next for Baseline Analytics Dashboard

• Deeper IDE integration: Real-time Baseline feedback while coding.
• Customizable Baseline targets: Allow teams to set their own compatibility bars for browsers or project requirements.
• Team and project reporting: Aggregate compliance across multiple repositories.
• Open API: Let other tools plug in and leverage the Baseline Analytics data.
• Community-driven feature mapping: Improve detection for frameworks and libraries.
• More actionable migration tools: Automated code mods and upgrade helpers.

We’re excited to help the web community ship better, more compatible user experiences!

Built With

• html