When building an MVP, you should be aware of the end goal behind it. According to Eric Ries, the author of the book “The Lean Startup”: “The goal of the MVP is to begin the learning process.” An MVP should be no more than the first step in validating your idea. Its foremost use is to start the Build-Measure-Learn feedback loop.
So in this post, I’ll go over the time-killers people often face when building an MVP and how you can avoid them and start your learning process much faster. I’ll use JAMStack as an example, but the points apply regardless of the stack you’re using.
Authentication
If you can avoid adding authentication to your MVP, you should do it. But if you can’t, you should outsource as much of it as possible.
In my experience, authentication is one of the most time-consuming and trickiest parts to implement if you’re building it from scratch. Many things can go wrong, and if you don’t implement it correctly, you’re exposing your application to dozens of different types of attacks.
So why not let someone else do the heavy lifting for you? First of all, instead of providing a traditional username/password authentication, I suggest simply adding SSO. Using Social media providers like Google or Facebook for your authentication can potentially save you days of development.
But even implementing SSO yourself takes time. Some providers act as middlemen and take care of all the main pain points of authentication for you. The main benefits of using them:
- Such providers often have a self-hosted form that supports SSO and username/password authentication. They implement the algorithms for securely authenticating and validating the identity of the users. All you need to do is read the final result of the operation.
- They generate a security token that you can use to communicate safely between your client and the server.
- They manage user sessions and their expirations.
- They store logs of user activity and sensitive data.
My usual go-to provider is Auth0 since they have a free tier for up to 7000 users and have a wide variety of SDKs for different languages. With that said, their pricing might get steep if you pass the 7K users mark, something to keep in mind.
Back end
At a high level, one of the main purposes of a server is to provide a secure exchange between the client and the database. And that means most of the API endpoints are there to serve data to the client.
If you use GraphQL, you no longer need to construct custom API endpoints to fetch and receive data. You can give your client the flexibility to query your database directly. And you are guaranteed to save time this way.
There are different options when it comes to setting up your GraphQL engine. You can host it yourself or use a cloud provider. And there are various engine vendors out there as well, like Prisma and Postgraphile.
Recently I’ve been using Hasura for my projects, and it saved me days, if not weeks, of work. You can spin up Hasura on your server using their docker template, but to save time when building an MVP, I use Hasura Cloud. Hasura Cloud lets you create a working GraphQL API in a couple of minutes.
UI Components
Some people like to build their UI components from scratch. It’s understandable since there are some drawbacks when it comes to using component libraries. Mainly, it’s hard to customize them to meet your specific designs.
However, I would not spend too much time on the design when building the MVP. Remember, the sole purpose of the MVP is to start the Build-Measure-Learn feedback. So consider saving yourself time and using the UI library.
If you’re using React, Chakra-UI is a good option. I use it often because of its flexibility and the built-in support for the styled-system, which helps with rapid prototyping. If you’d like to learn more about Chakra-UI, check out my post here.
If there’s a need for more advanced components, like a search input with dropdown or a nested folder tree, I often use the Atlaskit by Atlassian. The great thing about this component library is that you don’t need to install the whole library to use it. Each component has a separate npm package that you can install individually.
AWS services
If you have a somewhat complex cloud infrastructure, I suggest using Amplify. Amplify is a set of command tools that you can use for spinning up various AWS services. Here’s how AWS describes it: “AWS Amplify is a set of tools and services that can be used together or on their own, to help front-end web and mobile developers build scalable full-stack applications, powered by AWS.”
In one of the projects I was involved in, we made heavy use of lambda functions, DynamoDB instances, and S3 buckets. Using Amplify helped us quickly test, deploy and take down those services as needed.
Image/Video hosting
Building efficient processes for uploading, storing, and downloading files is difficult and time-consuming. Thankfully, there are services to help you out with those tasks.
For example, you could use Cloudinary. Cloudinary helps you with uploading, processing, and downloading your images and videos.
Some of the main advantages of using Cloudinary as opposed to a regular S3 are:
- Optimizing and processing your data. You can store various sizes of images for different places in your app, like full-screen displays and thumbnails.
- A high-performance CDN distribution out of the box.
- Useful SDKs and UI widgets that you can just plug into your app.
Cloudinary provides a free tier so, it’s worth a shot to consider it for your next project.
Deploying
When it comes to deploying your client applications, you have some pretty good options. The one that I like to use is Vercel. The great thing about Vercel is that you can connect it to a specific GitHub repo or even a branch. Vercel will automatically track your pushes and will redeploy the new versions.
However, Vercel is not the only service that connects to Github. Another good option worth exploring is Netflify.
Bonus: Templates
If you have a stack and a set of libraries that you like to use often in your projects, it worth setting up a pre-configured template.
Github users can create a template repository that they can use to bootstrap a new project. Setting up a template this way saved me an hour or so that I used to spend each time I start a new project.
As you can see, there are plenty of ways you can save time when building an MVP, as long as you’re mindful about it. New great tools are coming out every day, and it pays off to be on the lookout for them. Hopefully, this post gave you some new ideas on how you can build and ship your products faster.
If you’d like to get more web development, React and TypeScript tips consider
following me on Twitter,
where I share things as I learn them.
Happy coding!
