This content originally appeared on DEV Community and was authored by DEV Community
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! 😄
How to use Vigex 💡
Using Vigex is super simple, just choose the fields you want to add and have fun
Built With 🛠
- HTML
- SCSS
- JavaScript
- ESLint: For Linting
- EditorConfig: For maintenance of consistent code style
- Netlify: For Hosting
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!
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:
- Connect to a Git provider and authorize Netlify
- Import a Git repository and choose the branch you want to deploy with the build folder
- Deploy
Viola, that's so simple! 🤯
- Try Vigex: https://vigex.netlify.app
- Checkout on GitHub: https://github.com/kumartul/Vigex
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 🤝
Please contribute using GitHub Flow. Create a branch, add commits, and open a pull request.
Please read CONTRIBUTING for details on our CODE_OF_CONDUCT, and the process for submitting pull requests to us.
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 🌎
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-03-01T14:23:49+00:00) Introducing Vigex – PRO Regex Builder 🔥. Retrieved from https://www.scien.cx/2022/03/01/introducing-vigex-pro-regex-builder-%f0%9f%94%a5/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.