Welcome to coolregex.fyi, a powerful tool for working with regular expressions, built using Next.js. This project was bootstrapped with create-next-app.
📖 Read the full case study on my website nicholasadamou.com/projects/coolregex.
To get a local copy up and running, follow these steps.
Make sure you have Node.js and npm (or yarn, pnpm, bun) installed on your machine.
-
Clone the repository:
git clone https://github.com/nicholasadamou/coolregex.git cd coolregex -
Install dependencies:
npm install # or yarn install # or pnpm install # or bun install
Start the development server with the following command:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 in your browser to view the application.
You can start editing the page by modifying app/page.tsx. The page will auto-update as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
- Regex Testing: Easily test and debug regular expressions.
- Real-time Updates: See changes in real-time as you edit your regex.
- Custom Fonts: Optimized loading of Google Fonts for better performance.
- Syntax Highlighting: Colorful highlighting of regex components for better readability.
- Command Bar: Quick search and navigation through regex patterns.
graph TD
A[app/page.tsx] --> B[CommandBar]
A --> C[RegexCard]
C --> D[RegexHighlighter]
C --> E[TestSection]
C --> F[CardHeader]
B --> G[CommandDialog/UI]
flowchart LR
A[User Input] --> B[CommandBar]
B -- search term --> C[app/page.tsx]
C -- filtered regex --> D[RegexCard]
D -- regex pattern --> E[RegexHighlighter]
D -- regex pattern --> F[TestSection]
F -- test results --> D
sequenceDiagram
participant User
participant CommandBar
participant Page as app/page.tsx
participant RegexCard
participant RegexHighlighter
User->>CommandBar: Search for regex (⌘K)
CommandBar->>Page: Update search term
Page->>RegexCard: Filter and render cards
RegexCard->>RegexHighlighter: Render highlighted regex
User->>RegexCard: Click test button
RegexCard->>RegexCard: Toggle test section
User->>RegexCard: Enter test string
RegexCard->>RegexCard: Validate against regex
RegexCard->>User: Show match result
The RegexHighlighter component provides syntax highlighting for regular expressions, making them easier to read and understand. It parses the regex string and applies different styles to different parts of the regex (character classes, quantifiers, groups, etc.).
The CommandBar component provides a searchable interface for finding specific regex patterns. It can be activated with keyboard shortcuts (⌘K) and filters the available regex patterns based on user input.
The RegexCard component displays a regex pattern with its title, description, and provides functionality to test the regex against a user-provided string. It also allows copying the regex to the clipboard.
To learn more about Next.js, check out the following resources:
- Next.js Documentation - Learn about Next.js features and API.
- Learn Next.js - An interactive Next.js tutorial.
You can also visit the Next.js GitHub repository for more information and to contribute feedback or code.
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
Distributed under the MIT License. See LICENSE for more information.