Inspiration: This Hackathon inspired me to solve a problem I constantly had as a web developer. The web-features database knows what's widely supported, but that data was disconnected from where I make decisions: my code editor. I saw an opportunity to close that gap. What if my editor could answer "is this safe?" the moment I'm writing the code.
What it does: WebWise is an AI-powered VS Code extension that provides real-time baseline compatibility checking with smart alternatives, eliminating constant trips to caniuse.com.
How I built it:
Backend: Node.js API that queries web-features and calls Google Gemini for AI suggestions.
Extension: TypeScript VS Code extension with diagnostic providers and code actions. It caches 381 non-baseline features at startup and uses pattern matching for real-time detection.
Deployment: Backend deployed to Render so users don't need to run a local server.
Challenges I ran into: Migrating from HTTP to HTTPS when deploying to Render required refactoring all network code. Manually mapping web-features IDs to CSS syntax was tedious. Render's free tier has 30-second cold starts, so I added fallback caching for when the backend is unavailable.
Accomplishments: Building a tool that actually solves a real workflow problem. This is something I would genuinely use in my own development work. I'm proud that I took a data source (web-features) and made it actionable by bringing it into the environment where decisions happen.
What I learned: Building a VS Code extension was completely new to me. I learned about the diagnostic system, code actions, and performance constraints.
What's next for WebWise: I would do VS Code Marketplace publication for real user adoption.
Built With
- gemini
- node.js
- typescript
- vscode
- web-features
Log in or sign up for Devpost to join the conversation.