Baseline Check

Instantly block unsafe web features in CI/CD using Baseline intelligence

Comment

🧠 Inspiration

Every deployment pipeline checks for lint errors and test failures — but not whether your features actually work across browsers. I wanted to fix that gap.
The idea behind Baseline Check came from a simple frustration: a build can “pass” all tests and still break in production because of unsupported web APIs.

⚙️ What it does

Baseline Check automatically scans your JavaScript, TypeScript, CSS, and HTML files for modern features and compares them to the official Baseline web compatibility data.
If a feature isn’t supported for your configured target year (e.g., 2023), it flags or blocks the deployment.

Developers can:

  • Run baseline-check locally or in CI/CD
  • Generate detailed compatibility reports
  • Use the interactive playground to test snippets online instantly

🛠️ How we built it

  • Core Engine (CLI): Built with Node.js and integrated the official web-features dataset for accurate checks
  • Web Playground: Developed using Next.js + TypeScript for live code analysis
  • CI/CD Integration: Added a GitHub Actions workflow to automatically run the CLI on push or pull requests
  • Package Publishing: Released to npm (baseline-check-cli-tool) and deployed the site via Netlify

🚧 Challenges we ran into

  • Mapping modern syntax (like optional chaining and CSS nesting) to Baseline data wasn’t straightforward
  • Maintaining a lightweight CLI while supporting multiple languages
  • Creating a smooth, real-time playground experience without overloading the browser
  • Ensuring seamless npm publishing and cross-platform compatibility

🏆 Accomplishments that we're proud of

  • Published my first public npm package
  • Built a fully functional live playground for real-time analysis
  • Designed a CI/CD-ready pipeline for automated Baseline compliance
  • Delivered an open-source tool that’s both educational and production-safe

📚 What we learned

  • How Baseline compatibility data can serve as a safety layer for modern web development
  • The trade-offs between static code analysis speed and accuracy
  • The full lifecycle of publishing and maintaining npm packages
  • Real-world CI/CD integration and automation

🚀 What's next for Baseline Check

  • VS Code extension for real-time Baseline feedback while coding
  • GitHub PR bot to automatically comment on unsafe features in pull requests
  • Expanded dataset support for mobile and legacy browsers
  • Team dashboard for tracking Baseline readiness across multiple projects

Built With

Share this project:

Updates