Baseline Checker

Inspiration

When working on code projects, developers often struggle with maintaining consistent formatting, readability, and quality standards. While linters and formatters exist, they can be overwhelming or too rigid. We wanted to create a tool that’s both developer-friendly and insightful, giving users clear, actionable feedback on their code without drowning them in warnings.

Live Site: Baseline-Checker

What it does

Baseline Checker lets you paste HTML, CSS, or JavaScript into a responsive web interface and instantly get:

• Code Analysis – readability, maintainability, and potential improvements.
• Font Size Controls – adjust analysis readability with small, medium, or large views.
• Feature Toggles – enable auto-analysis or advanced insights.
• History & Bookmarks – track past analyses or save interesting results.
• Export Options – download results for reports or collaboration.

It’s designed to be accessible on any device, from desktops to mobile screens.

How we built it

• Frontend: React + TypeScript with Tailwind CSS for styling and responsive design.
• UI Components: Icons and reusable controls for toggles, history, bookmarks, etc.
• Logic: State management for handling user interactions, history, and saved bookmarks.
• Responsive Design: Optimized for mobile-first interaction with flexible layouts and full-screen modals.

Challenges we ran into

• Making the controls bar adaptive across different screen sizes while keeping it clean and usable.
• Designing modals (History & Bookmarks) that look good on large screens but also work full-screen on mobile.
• Balancing simplicity vs. advanced features without overwhelming first-time users.
• Ensuring smooth state transitions when switching between history, bookmarks, and live code analysis.

Accomplishments that we're proud of

• Built a beautifully responsive tool that works seamlessly across devices.
• Designed an intuitive analysis workflow: paste → analyze → save/share.
• Implemented sticky, accessible controls that adapt to user preferences.
• Created a foundation that can be extended with more analysis features in the future.

What we learned

• How to design for responsiveness first using Tailwind’s utility classes.
• The importance of progressive enhancement: starting with simple analysis and adding advanced options without breaking UX.
• How to structure state management for history/bookmarks in a scalable way.
• That developers appreciate tools that explain problems clearly, not just flag errors.

What's next for Baseline Checker

• Adding support for more languages (Python, Java, etc.).
• Integrating with GitHub/GitLab for real-time code checks.
• Introducing collaboration features (share analysis with teammates).
• Providing AI-powered suggestions for fixing detected issues.
• Building a progress tracker so developers can measure improvements over time.