Baseline Guardian – Detailed Overview
Bold goal: make web development simpler and safer by giving teams clear, trustworthy answers about which features are ready to use in real browsers. Baseline Guardian scans your code, enforces smart lint rules, and overlays real-time browser support so developers can ship confidently without guesswork.
Overview
Baseline Guardian streamlines frontend workflows by combining static analysis with authoritative browser compatibility insights. It reads your project code, flags risky features, and tells you exactly where they are supported—right inside your CI and pull requests. The result is faster reviews, fewer production surprises, and a shared source of truth for feature readiness across the team.
What it does
- Scans your codebase for modern web APIs, CSS features, and platform capabilities.
- Applies configurable lint rules to prevent usage that doesn’t meet your team’s support policy.
- Surfaces precise browser support data, mapped to the Web Baseline dataset, so you know what’s safe.
- Outputs SARIF for CI systems and posts PR comments with clear, actionable insights.
- Highlights polyfill or fallback suggestions when needed, reducing manual research and guesswork.
How it’s built
- MERN stack foundation for speed and scalability: MongoDB, Express, React, Node.js.
- TypeScript end-to-end for strict types, safer refactors, and reliable SDKs.
- Dockerized services for consistent local dev and production deployments.
- Integration with the Web Baseline dataset to anchor support decisions in a stable, trusted source.
- Modular analyzers for HTML, CSS, and JS/TS, with an AST-driven inspection pipeline and plugin architecture for new detectors.
Key challenges
- Keeping support data accurate as the web platform evolves quickly across engines and versions.
- Designing robust sync pipelines to ingest updates from Baseline and related sources without breaking builds.
- Balancing strict lint rules with developer ergonomics: avoiding noisy false positives while catching real risks.
- Mapping feature usage in code to the exact spec and support records (aliases, prefixes, experimental flags).
- Ensuring performance on large repositories without slowing CI or local development.
What we’re proud of
- Clear, visual feature readiness: at-a-glance views showing which browsers support a feature and what’s missing.
- CI-first integration: SARIF output and PR comments that are readable, traceable, and easy to act on.
- Team policies as code: define your target browsers or Baseline level once; enforce it everywhere with consistent results.
- Developer-friendly feedback: line-level annotations, suggested fixes, and references to docs where helpful.
What we learned
- Real-time, trustworthy compatibility insights reduce uncertainty and speed up reviews.
- Teams make better decisions when support policies are explicit and automated—not tribal knowledge.
- Providing gentle guardrails (warnings with guidance) is more effective than hard blocks, especially early on.
- Visualizing support deltas across browser versions helps teams plan upgrades and de-risk releases.
What’s next
- Interactive demos for key features so developers can test behavior live alongside support data.
- User-targeted checks that adapt results to your actual audience (analytics-based browser targeting).
- Dashboards and trend analytics to track compatibility health over time and catch regressions early.
- Deeper framework awareness (React, Next.js, Vue, Svelte) to map higher-level patterns to underlying platform features.
- Optional autofix and code mods for common issues, plus curated fallback/pattern libraries.
- CLI and API enhancements for local workflows, pre-commit hooks, and editor integrations.
Why it matters
Baseline Guardian turns compatibility from a recurring fire drill into a predictable, automated step. By combining precise analysis with trusted support data, it helps teams ship modern features responsibly—fewer rollbacks, happier users, and faster delivery.
Log in or sign up for Devpost to join the conversation.