Inspiration

The inspiration for BaselineCheck stemmed from the evolving landscape of web standards and the challenges developers face in ensuring broad browser compatibility. With the introduction of "baseline" web features by web.dev, we recognized the need for a tool that not only identifies non-baseline features but also provides actionable guidance. As web developers ourselves, we've experienced the frustration of compatibility issues affecting user experience, especially on older devices or less common browsers. BaselineCheck was born to bridge this gap, empowering developers to build more inclusive and future-proof web applications.

What it does

BaselineCheck is an AI-powered web compatibility analysis platform that evaluates code snippets, uploaded files, or live websites against baseline web standards. Users can input their HTML, CSS, or JavaScript code, upload files, or provide URLs for analysis. The platform extracts modern web features (APIs, CSS properties, HTML elements), calculates a compliance score, assigns a badge level (Bronze, Silver, Gold), and generates AI-driven suggestions for non-baseline features. It supports both simple and advanced scanning methods, stores analysis history in a database, and provides a user-friendly interface for developers to ensure their projects meet baseline compatibility requirements.

How we built it

We built BaselineCheck using a modern full-stack architecture. The backend is powered by FastAPI (Python) for high-performance async APIs, with Motor for MongoDB integration and Pydantic for data validation. For advanced web scraping, we integrated Puppeteer to render and analyze dynamic content. The frontend is a React application built with Vite for fast development, styled with Tailwind CSS and enhanced with Radix UI components for accessibility. We leveraged OpenAI's API for intelligent suggestions on non-baseline features. The system uses regex-based feature extraction for static analysis and supports multiple input types with comprehensive error handling and CORS support for cross-origin requests.

Challenges we ran into

One major challenge was accurately detecting and categorizing web features across different contexts—HTML, CSS, and JavaScript—while avoiding false positives in regex patterns. Integrating Puppeteer for advanced URL analysis required careful handling of browser automation, including timeouts and resource management to prevent crashes. Another hurdle was implementing AI suggestions that are both technically accurate and practically useful, requiring fine-tuning of prompts and error handling for API failures. We also faced complexity in maintaining an up-to-date baseline features database and ensuring the frontend could handle large analysis results efficiently.

Accomplishments that we're proud of We're particularly proud of creating a comprehensive baseline features database covering CSS properties, JavaScript APIs, HTML elements, and Web APIs, with accurate categorization and support status. The AI integration provides genuinely helpful suggestions for fallbacks and polyfills, going beyond simple detection. Our dual scanning approach (simple with BeautifulSoup and advanced with Puppeteer) allows flexibility for different use cases. The clean, accessible UI built with modern React patterns and the robust FastAPI backend that handles async operations efficiently are also key achievements. Most importantly, BaselineCheck successfully helps developers identify compatibility issues before they impact users.

What we learned

Through building BaselineCheck, we deepened our understanding of web standards evolution and the importance of baseline compatibility in modern development. We learned the intricacies of browser automation with Puppeteer and the power of combining static analysis with AI for more intelligent tooling. The project reinforced the value of async programming in Python for scalable APIs and the benefits of component-based UI libraries like Radix UI for building accessible interfaces. We also gained insights into prompt engineering for AI models and the challenges of maintaining up-to-date web feature databases in a rapidly changing ecosystem.

What's next for BaselineCheck

Future plans include expanding the baseline features database with more granular versioning support and real-time updates from web standards organizations. We're exploring integration with popular development tools like VS Code extensions and CI/CD pipelines for automated compatibility checks. Adding support for more file types, batch analysis, and team collaboration features are on the roadmap. We also plan to implement user feedback mechanisms to improve AI suggestions and potentially add performance analysis alongside compatibility checking. Long-term, we envision BaselineCheck becoming a comprehensive web quality assurance platform that helps developers build better, more inclusive web experiences.

How Your Project is Different and Perfect This project stands out by combining static code analysis with AI-driven insights and advanced web scraping capabilities, making it uniquely comprehensive for ensuring baseline web feature compatibility. Unlike basic linters or compatibility checkers, it integrates OpenAI's suggestions for fallbacks and polyfills on non-baseline features, supports multiple input types (code snippets, files, URLs), and uses Puppeteer for deep website analysis. It's perfect because it empowers developers to build more accessible, performant web applications by proactively identifying and resolving compatibility issues, ultimately leading to better user experiences across all browsers and devices.

Built With

• async
• axios
• beautiful-soup
• fastapi
• hookform
• lucidreact
• motor
• openai
• puppeteer
• pydantic
• python
• radixui
• react18
• recharts
• tailwind
• uvicorn
• vite
• zod