Inspiration
I was tired of juggling MDN, caniuse, and blog posts just to answer one simple question: "Can I use this feature yet?" The constant context-switching was killing our flow state.
What it does
It's a clean, visual directory of web features that instantly shows you what's universally supported (Baseline) and what's not. No more decoding complex browser support tables.
How we built it
I used vanilla JavaScript to consume the web-features npm package and dynamically generate the interface. Simple HTML/CSS for the frontend, and deployed on Netlify for zero-fuss hosting.
Challenges we ran into
Wrangling the JSON data structure was trickier than expected! Also, making the filter system perform smoothly with the entire dataset required some optimization headaches.
Accomplishments that we're proud of
I built something I'd actually use myself and hope that other developers will use! The moment I could type a feature name and get an instant green/red answer felt magical.
What we learned
How powerful Baseline data can be when it's presented in a developer-friendly way. Also, that you can build a pretty slick UI without any frameworks.
What's next for Interactive Baseline Explorer
API access for CI/CD pipelines, project-based tracking, and maybe a VS Code extension. Basically, taking this from a reference tool to an integrated part of the dev workflow.
Log in or sign up for Devpost to join the conversation.