How I Created My All-Star React Stack — Supercharge.dev
When it comes to building frontend applications, we as developers, are simply spoilt for choice. From Angular to React to Vue to Svelte, there are just thousands of libraries and frameworks to choose from. I have been a loyal React developer for a long time now. Even then, every time I built a React app, I had to do face the same confusion on what libraries I should be using for the app.
My typical thoughts as I develop yet again another React app:
“Is it going to be Bootstrap or Bulma?”
“Urgh, I need to setup ESLint again!”
“I need to setup the same Header, Footer, Layout components AGAIN!”
I really needed to change this and in the process of change I built Supercharge.dev! Let me tell you all about it!
Building My Own All-Star React Stack
Over time, with experience from the various projects I did, I finally came up with my own All-Star React Stack! If you have not already read it, be sure to check it out here: https://betterprogramming.pub/my-all-star-react-stack-3c9b853d4c41. It has over 8.1k views as of writing this and gathered great comments from fellow developers.
After speaking to devs in the community, I decided to build an all-in-one React Starter Pack that combines all of the below features:
- Next.js
- Bulma
- Every page needed for a typical MVP: Home, About, Contact Us, FAQ, Docs, Dashboard etc.
- Every component you need: Testimonials, Features etc.
- Docker Config
- ESLint + Prettier
- Google Analytics
- Firebase Authentication
- Firestore as Database
- Formspree for Quick Contact Forms
- Reack Hook Form for Advanced/Dynamic Forms
And many others, all supported with the latest Next.js 10 and React 17.
It took me close to a month of development to get it right and stable. I started off working on the modules in a very generic fashion such that anyone can simplify configure everything from the copy on the pages to the API keys used to make it their own.
The best part is that everything is configurable in minutes — all through modifying the config files!
From brand name, to your features, to testimonials, you simply update it in the config and the UI updates in tandem!
The result is Supercharge.dev!
Pricing Supercharge
One of the key reasons for creating Supercharge was to ensure that it support developers and helps them develop fast. To stay in line with the goal, I decided to price Supercharge at an extremely affordable USD25!
With competing products which allows for customised starter packs starting anywhere from USD50 to USD99 and above (with some even priced at USD300!!), I felt it was only right to help developers with an affordable option.
The best part of Supercharge is that it is not the usual annoying subscription based package where you keep paying to use it. It’s a one-time payment for unlimited upgrades to future releases.
Providing Support
Creating a product doesn’t just involve coding and putting it up for sale! When Supercharge launched, it attracted a number of queries and requests through the email support channel.
To be honest, I did not expect to receive such queries so early on the launch. Some of the feature requests were really unique, whereas some just had a few generic queries on integrating CSS and other libraries.
The great part of customer support is that I managed to understand Supercharge from the user’s point of view, to exactly feel and empathise with their problems and how Supercharge is helping to solve them.
With the understanding, I iterated fast, provided feedback and support, not just as a creator of Supercharge, but also as a fellow developer.
Testimonials
I decided to collate some feedback from the early users of Supercharge and I am glad to see the strong recommendations and support they have provided.
Many of the users found that Supercharge helps them to save a great deal of time! And most of the existing bundled features helped them to kickstart their app in no time at all — some within even 10 mins!
What’s Next?
Supercharge.dev was created to simplify the lives of developers and to help them focus on the goals of their development instead of worrying about structuring and setting up apps again and again.
So what’s next for Supercharge?
In the coming days and weeks, I will be upgrading Supercharge with more features — such as email verification flow. Other possible feature maps include a TailwindCSS version and a Bootstrap version for the frontend UI.
Do you want certain features you would love to see in Supercharge? Drop me an email at supercharge.dev@gmail.com or a comment below!
Getting Supercharged!
Are you a React developer who wants to skip all the boilerplate setup and have an end-to-end Minimum Viable Product (MVP) ready in minutes?
Then Supercharge is for you — check out Supercharge.dev and download now. To get a limited time offer of 20% discount, be sure to use promo code DEV2021!
