Webcone: Baseline Everywhere for Modern Developers

Inspiration

Every web developer has struggled with one recurring question:

“Can I use this feature safely across browsers?”

We’ve had tools like CanIUse, MDN, and Stack Overflow threads — but nothing unified that integrates directly into your actual workflow.

While XAMPP and WAMP empowered an earlier generation of PHP developers, modern developers working with Next.js, React, and Vite lack a friendly, GUI-driven, smart local server.

That’s what inspired Webcone — a Modern Web Server + Baseline Everywhere Toolkit that automatically checks browser interoperability, serves your projects, and empowers you to ship Baseline-safe code confidently.

What it does

Webcone is your modern, intelligent dev server control panel — and a full Baseline integration platform.

It allows you to:

🖥️ Spin up modern web projects (React, Next.js, Vite) via a desktop GUI (like XAMPP but future-ready).

🧩 Check Baseline compliance (Google’s interoperability standard) automatically.

⚙️ Export detailed reports in .txt, .md, .pdf, .docx, .csv, .json.

🔍 Use Baseline middleware to inject polyfills and generate /baseline-report endpoints.

💻 Use a CLI tool (baseline-check) to audit your codebase.

🔐 Integrate with GitHub Actions to prevent unsupported features from merging.

🪶 See live Baseline status inside Cursor/Windsurf IDE tooltips — with a “Download Report” button.

📊 View everything in a Next.js Dashboard, complete with charts and compliance scores.

It’s your all-in-one developer command center for safe, modern web development.

How I built it

Electron + React + TailwindCSS (XAMPP-style control panel) | | Dev Server | ⚡ Node.js (Express middleware) for Baseline scanning + project management | | Dashboard | 🪶 Next.js + Tailwind + Recharts | | CLI Tool | 💻 Node.js + Commander.js | | CI/CD | ⚙️ GitHub Actions integration | | IDE Plugin | 🧩 VS Code API (compatible with Cursor + Windsurf) | | Data | 🌐 @web-features npm package + WebStatus.dev API | | Export Formats | 🗂️ reportlab, docx, csv, json libraries for file generation | | Hosting | ☁️ Vercel (Dashboard) + Railway (Server) |

Challenges I ran into ntegrating Baseline Data:

Figuring out how to reliably query and cache @web-features data offline while still allowing live updates from webstatus.dev.

IDE Plugin Complexity: Cursor/Windsurf extensions require careful API mapping — especially to add clickable tooltips and dynamic report generation.

Export Systems: Supporting seven output formats (.txt, .md, .pdf, .doc, .docx, .csv, .json) across modules required unifying the export layer.

Cross-browser validation: Ensuring reports reflect true cross-browser status (Chrome, Edge, Firefox, Safari, Brave).

Packaging: Making the Electron app portable across Windows, macOS, and Linux while keeping it lightweight.

Accomplishments that I'm proud of

Built a functional, modern “XAMPP alternative” for React and Next.js developers.

Integrated Google’s Baseline initiative across CLI, IDE, CI/CD, and server.

Designed a unified developer experience: GUI → CLI → Dashboard → IDE plugin.

Achieved automatic export + compliance report generation in multiple formats.

Created a tool that genuinely helps developers focus on innovation — not browser quirks.

What I learned

Deep understanding of the Baseline initiative and its interoperability model (Limited → Newly → Widely).

How to integrate web APIs and npm Baseline data into multi-surface tools (server, IDE, CI).

Managing multi-package monorepos with pnpm and modern build pipelines.

Designing DX-first tools that balance performance, simplicity, and aesthetics.

Strategies for scaling open developer tools with modular architecture.

What's next for Webcone

🧠 AI Assistant Integration: contextual suggestions for non-compliant features (e.g., “Use this fallback CSS instead”).

🧩 VS Code Marketplace Release: ship the IDE plugin publicly.

☁️ Baseline Cloud API: central analytics + versioned compliance reports.

🪶 Browser Extensions: real-time Baseline hints while inspecting sites.

🤝 Open Source Community Launch: invite contributors to extend the middleware ecosystem.

Built With

• apis
• data
• electron-tailwindcss
• javascript
• next.js
• node.js
• npm
• package
• react
• recharts
• typescript
• web-features
• webstatus.dev