Baseline Feature Scout

Scout the Web's Future. Instantly.

Inspiration The Baseline initiative, which identifies web platform features with broad interoperability, inspired us to create Baseline Feature Scout. We wanted to empower developers to confidently adopt modern web APIs by providing tools to discover, validate, and learn about Baseline-supported features. The idea stemmed from the challenge of navigating fragmented browser compatibility data, especially for emerging features like CSS subgrid or view transitions. Our goal was to build an intuitive, developer-friendly app that combines AI-driven insights, code scanning, and interactive learning, making it easier to integrate stable, future-proof web technologies into projects.

What it does Baseline Feature Scout is a web app that accelerates the adoption of Baseline-supported web features through four core components:

AI Chat: A voice-enabled chatbot (powered by Transformers.js and Fuse.js) answers queries about web features (e.g., "Is subgrid supported?"), displaying Feature Cards with compute-baseline BCD data and Recharts visualizations in modals. Project Scanner: Parses HTML/CSS/JS files (using htmlparser2, css-tree, @babel/parser) to detect non-Baseline features (e.g., grid-template-columns: subgrid), generates heatmaps, suggests auto-fixes, and exports results as CSV (Papa.unparse) for CI integration. Learning Playground: An interactive Monaco editor with real-time validation (compute-baseline), markers, hovers, Recharts mini-pie charts for compatibility, shareable snippets (base64 URL), and iframe previews for hands-on learning. Trending Dashboard: Displays Baseline features sorted by adoption, with Tailwind gradients and Framer Motion animations for polish.

The app is a PWA (vite-plugin-pwa) with offline support, achieves a 100% Lighthouse score (WCAG AA, performance, SEO), and uses ARIA for accessibility.

How we built it We built Baseline Feature Scout using a modern web stack:

Frontend: React 18 for component-based UI, Zustand for state management, React Router for navigation, Tailwind CSS (PostCSS) for styling with cosmic gradients, and Framer Motion for animations (e.g., resizer drag, loader orbits). Code Analysis: htmlparser2 for HTML, css-tree for CSS AST, @babel/parser for JavaScript, and compute-baseline for Baseline status checks (e.g., $\text{BCD key: } \texttt{css.properties.grid-template-columns.subgrid}$). Editor: @monaco-editor/react for the Learning Playground, with custom validation markers and hovers using compute-baseline.getStatus. Visualizations: Recharts for mini-pie charts and compatibility tooltips, constrained with zoom for clarity. PWA: vite-plugin-pwa for offline support, with a manifest referencing pwa-192x192.png. Build/Deploy: Vite for fast builds, Netlify for deployment, with alias @ to src/ and TypeScript strict typing. APIs: Transformers.js for AI Chat (Gemini API via VITE_GEMINI_API_KEY), Fuse.js for fuzzy search, idb-keyval for local storage, and lodash for utilities.

The app was iteratively developed, tested locally (npm run build && npm run preview), and deployed on Netlify with _redirects for SPA routing.

Challenges we ran into We faced several challenges:

TypeScript Errors: css-tree’s strict types caused Netlify build failures (e.g., TS2367, TS2339 for Declaration vs. Property). We fixed this with type guards (if (node.type === 'Declaration')) and safe loc access. Monaco Editor Usability: The editor was initially read-only due to missing readOnly: false and focus issues. We added editor.focus() and removed over-debouncing. Netlify Deployment: Errors included Tailwind CDN usage, missing VITE_GEMINI_API_KEY, PWA icon 404, and index.css resolution failure. We switched to Tailwind PostCSS, renamed env vars, added pwa-192x192.png, and ensured import './index.css' in index.tsx. Performance/Accessibility: Achieving a 100% Lighthouse score required optimizing ResizeObserver loops (hybrid manual/requestAnimationFrame), adding ARIA labels, and ensuring keyboard navigation.

Each challenge was resolved with targeted fixes, ensuring a robust app.

Accomplishments that we're proud of

Seamless Features: Delivered a cohesive app with AI Chat, Scanner, and Learning Playground, all leveraging compute-baseline for accurate Baseline data. Polished UX: Achieved a 100% Lighthouse score with Tailwind gradients, Framer Motion animations, and Recharts visualizations, making the app visually appealing and accessible. Offline PWA: Successfully implemented offline support with vite-plugin-pwa, installable via browser prompt. Real-Time Validation: The Learning Playground’s Monaco editor provides instant feedback (e.g., markers for subgrid as limited), enhancing developer learning. Hackathon Deadline: Overcame multiple deployment errors in <18 hours, ensuring a fully functional Netlify deployment.

What we learned

AST Parsing: Gained expertise in css-tree and @babel/parser for precise code analysis, handling complex type systems in TypeScript. Vite/Netlify: Mastered Vite alias resolution (@ to src/), PostCSS integration, and Netlify environment variables (VITE_ prefix). Monaco Editor: Learned to optimize editor performance with manual layouts and focus management. Baseline Integration: Deepened understanding of compute-baseline and BCD for validating web features (e.g., $\text{BCD key: } \texttt{css.properties.word-break.auto-phrase}$). Time Management: Iterated quickly under tight deadlines, prioritizing critical fixes to meet hackathon requirements.

What's next for Baseline Feature Scout

Enhanced AI: Integrate deeper BCD queries and multi-turn conversations in AI Chat. Scanner Upgrades: Support more file types (e.g., SCSS, TypeScript) and advanced auto-fixes. Learning Expansion: Add tutorials for new Baseline features and gamified challenges. Export Formats: Include JSON and Markdown exports alongside CSV. Community Features: Enable snippet sharing via public URLs and a community feedback hub.