Project Story: Regexy

Inspiration

As a developer, I often find myself writing or debugging regular expressions — whether validating input, parsing logs, or searching complex patterns. Online tools are useful but often cluttered, require internet access, or mix too many features into a bloated interface.

I wanted something faster and focused: a clean, offline-first tool that offers a real cheat sheet of regex patterns, explains them, and lets you test them instantly. The One-Shot Competition on Bolt.new challenged me to build the entire app in one prompt, which was the perfect creative constraint.

What it does

Regexy is a lightweight regex reference and live testing tool built entirely with Next.js and Tailwind CSS. It includes:

• A searchable library of 50+ common regular expressions
• Explanations for each pattern, including when and how to use it
• Copy-ready regex snippets
• A live testing panel where users can input custom patterns and sample text
• Visual match highlighting and error handling
• Responsive UI and dark mode by default

All features work fully offline, with zero external dependencies or AI logic.

How we built it

The app was built in a single prompt using Bolt.new's one-shot feature. I carefully scoped the prompt to include:

• A structured regex card format (title, description, pattern, tags)
• Reusable React components for cards, search, theme toggle, and tester
• Grid layout with Tailwind’s responsive classes
• Native JavaScript RegExp support for live matching and error detection

Each pattern card includes an expandable section with detailed explanations. The tester uses new RegExp() for live compilation and safely handles syntax errors. Search filters cards by title and tags in real-time.

Challenges we ran into

• Designing a layout that fits both reference and interactive testing
• Making sure long regex strings fit well within cards and mobile view
• Handling invalid patterns gracefully in real time
• Keeping all components stateless and responsive within a single-prompt limit

Accomplishments that we're proud of

• A fully working regex playground and cheat sheet built in one go
• Clean and responsive UI using only Tailwind and React hooks
• Real-world usefulness: it’s already usable as a daily dev tool
• Fully offline — works in any browser, no setup required

What we learned

• Prompt-first development forces precision in both design and scope
• Good developer tools don’t need to be complicated to be helpful
• Even a small UI tool can drastically improve day-to-day productivity
• Regex is less intimidating when patterns are explained visually

What's next for Regexy

• Add a visual regex parser for breaking down expressions into tokens
• Add bookmarks or custom pattern saving (using localStorage)
• Allow toggling flags (g, i, m, etc.) in the cheat sheet
• Offer export options for matched results
• Add keyboard shortcuts for navigation and copying

Built With

• react
• taiwind
• typescript