AKumar

Introducing Vigex - PRO Regex Builder 🔥

Introducing Vigex - PRO Regex Builder 🔥

No more frustration while writing regular expressions

Atul Kumar's photo
Atul Kumar
Feb 24, 2022·

4 min read

Table of contents

Hello World 👋

Hello friends, I am Atul Kumar. I hope you all are safe and doing well. I am a 15-year-old full-stack web developer who is constantly pushing my limits.

Finally, I'm here to introduce you to the one and only Vigex 🚀. Vigex is targeted to all the developers who find it difficult and time-consuming to write regular expressions. It's a no-code tool 😎 to generate regular expressions. Vigex is my submission for Netlify x Hashnode Hackathon and I am very excited ✨, so let's begin without any further delay.

Motivation 💭

I, personally as a programmer, find it frustrating to write regular expressions so I thought of a tool that developers can use to generate regular expressions without writing a single line of code which motivated me to build this extraordinary no-code tool and Netlify x Hashnode Hackathon gave me the required push. ⚙

Introducing Vigex 🚀

Vigex is the one and only no-code regex builder in the entire WEB 🤯. It has many extraordinary features like character classes, groups, assertions, etc. There is no learning curve. It's damn' simple. Try out Vigex! 😄

GitHub Repository Live Demo

How to use Vigex 💡

Using Vigex is super simple, just choose the fields you want to add and have fun

Built With 🛠

Building Process 🏗

I had this idea in my mind when the Netlify x Hashnode Hackathon was announced, so I started to learn about regular expressions in detail and started developing this DevTool.

Now, let's talk about my planning, strategies, and bad times 👇

  • Planning

Benjamin Franklin says, "If You Fail to Plan, You Are Planning to Fail" so a perfectly structured roadmap is very important to build a successful project. For this, I created a template on Notion and made Todos on Todoist.

  • UI/UX

I wanted to try something new so instead of using TailwindCSS, I used SCSS. The app is completely responsive and it has dark mode support too...

  • Building

So, here comes the main part. It simply started by using ! to generate the boiler plate automatically, LOL!

!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Then, I built the basic framework and designed an icon for my app

I really love TailwindCSS but I wanted to try something new, so I chose SCSS

Then, I created a .editorconfig file and initialized ESLint to enforce consistent code style

Then, wrote some complex algorithms to control the functioning of the app but the algorithm that generates the regular expression is quite complex and I am glad that I wrote that algorithm perfectly

Then, I spent two days in testing and fixing bugs!!!

At last, I did some SEO and deployed Vigex on Netlify

The build process is quite long, so you can check the entire build process of Vigex on GitHub.

  • Deploying

So, here comes the final part - Deploying. I never thought that it would be so easy to deploy apps with Netlify. Netlify is great. You can host your apps/websites in 3 easy steps:

  1. Connect to a Git provider and authorize Netlify
  2. Import a Git repository and choose the branch you want to deploy with the build folder
  3. Deploy

Viola, that's so simple! 🤯

Future of Vigex 🔮

Writing the algorithm to generate the regular expression for Vigex was the toughest part but still I am happy that I built this app so that developers can use this and make their life easier

Future Plans of Vigex

  • Nesting feature
  • Dark Mode Support
  • Support for other programming languages
  • Functionality to save your regular expressions
  • Live collaboration with other developers
  • Better UI/UX

Contributing 🤝

License 🛡

This product is licensed under the MIT License - see the LICENSE file for details.

Wrapping Up 👍

Thanks a lot for checking out Vigex. I hope you liked my app. Always open to feedbacks. Share everywhere!

Let's Connect 🌎

NetlifyNetlifyHackathon