Architecting your web app MVP using React
All of us who have built a web app from scratch or planning to build a web app from scratch have faced the overwhelming feeling of where to start and how to go about.
But we also know that it is important to show something really tangible to test out your idea. Simply asking people whether they will buy something like this is clearly not enough. And anyway, Stephen King says ideas are the cheapest resource in the world. Having something “real” would help you understand the business better.
Table of Contents
- Before Development
- Scaling it down
- Design Hunting
- Libraries Galore
- Summary
I am a big fan of Eric Ries’ Lean Startup approach to building products. And I will try to write a Minimum Viable Guide to a Minimum Viable Product using React as your frontend.
This article is for people who decided to use React for their Product and want to have the minimum tools to get everything running.
Before Development
Everyone thinks their ideas are unique and I won’t deny that some would be unique. But whether it is to run a car or to fly a plane, the shape of the wheel may not change. There may be material differences but essentially look and feel the same.
The same analogy would apply to building products. Even though your idea is unique, there is a lot of existing documentation and libraries on how to do the basics well. For web applications, there are already existing Bootstrap React templates available with 100+ components to choose from.
I will mention libraries and resources that I have used in the course of this article. But it is good to start with the mindset of using the open-source culture to your advantage.
Scaling it Down
We all want our products to soar high, have the best and most intricate features that none of the others have in their products. However, intricacies have no place in an MVP. An MVP needs to be as simple as possible with only the core of what needs to be tested.
“Do things that don’t scale” — Paul Graham
Coming back to the car analogy, you only require a strong frame, an engine, and competent wheels to test whether your concept car would work. In the same way, a web app would need authentication, a basic user interface and a connection to APIs that fuels the information.
Don’t forget the brakes!
Make sure that you don’t miss any essential feature in your product that is important to test your idea.
Design Hunting
This is where we wish to spend most of our time. Making interfaces intuitive yet unique is the ultimate goal. However, when you have an entirely unique idea of a web app, it doesn’t hurt to use similar layouts as the hundreds and thousands of web apps available.
Choosing your design should work towards keeping the time for competence in using your app as short as possible. This is where template marketplaces are a huge asset.
WrapBootstrap’s Angle Bootstrap Admin template is one of my favorites. It has a variety of dashboard designs all based on Bootstrap. So editing them is relatively easy.
Themeforest also has quite a few Admin React templates that can be directly used to create your own layouts.
Libraries Galore
React and Javascript libraries pretty much cover everything needed for your first version. If you need anything custom that means you’re reaching too far and you need to tweak your MVP to write as less code as possible.
The React theme above would already suffice most of your components with subtle tweaks here and there.
The following libraries would help you build some of the basic structural requirements that every web app requires.
React UI Components
The previous section does take care of getting you all the necessary UI components needed for your web app. However, sometimes you can think of some components which cannot be directly derived from the template. This is where a bunch of free UI libraries come in. From Charts, Bootstrap components to Material UI components, it is easy to find your favorite. However, I would stick to the template as it saves time. You could always go back to improve on it.
For me, I used two UI related components apart from the template. IntroJS to add introductory steps and instructions to my design. Second, React Flippy which added a nice card flipping animation to my existing components without any additional work.
React Redux
This state management solution dramatically reduces the amount of information passed back and forth between components. The basic tutorial provided on the React-Redux helps you understand the gist of the problem it tries to solve.
React Hooks has simplified the use of stateful logic in components but with most React templates having the original class structure, we can avoid Hooks for now. It may drastically make the code cleaner and reduce future development times. But we are here not to prove our concept and not write the cleanest code.
React GA
This library connects your app to Google Analytics. It needs very little integration and with just a couple of lines you can start watching your page views. Recording events and tracking goals on your app are also just single line integrations of your clicks or API responses.
React Raven (Sentry)
Error reporting is a huge part of your beta or MVP development. For me, Sentry was the easiest integration to track every kind of error in my production build. It was again very easy to integrate with a couple of lines of code.
The web interface is very intuitive and makes it easy to identify the right line that the error occurred. You could also send those Sentry errors to your Slack channels seamlessly. It helps proactively fix bugs and ship faster.
There are tonnes of resources for building and breaking and scaling products. But it also makes sense to look at products that are just being launched in that MVP stage or maybe a level higher. ProductHunt could give you the best motivation and inspiration required to build your product.
Trying out new products listed on ProductHunt and looking through the comments on the kind of feedback people get on their products could massively help you refine your product. However, beware of including things you know are non-essential.
All the best! Start breaking.
