Building Web Applications, a tale of Idea to Prototype to MVP
For a while I've been playing around with writing this post. I've built a lot of web apps on the internet for myself and for others. I've moved them from ideas on a bit of paper to a fully working product.
We all have ideas, some are even good ideas. But the trick is knowing how to take that idea from paper to a prototype to a minimum viable product or MVP.
A lot of people just want to go from idea to minimum viable product right away.
In that rush we've forgotten the fun and creative distraction that building a prototype can be. The joy of just playing with an idea.
Not everything has to ship
Not everything you work on will ship and that's OK! The process is more important. It's a set of skills that will allow you to build or make different products.
We all have a folder full of projects or things we were working on that we thought where great ideas at the time but never came to be. This is our skill set, this is how we know the answers to the questions people ask about auth or payments, seo or CSS. Similar to artists they learn by doing some of the paintings will be terrible and some will be fantastic because they practiced. Making things applications is the same.
Being a maker / indie hacker is a craft, it's about building your skillset and adding to it. Think of any profession bakers, carpenter, blade smiths, doctors, pilots, etc ( the list is endless) all of these professions require hours of practice, training and learning to become successful. Building web apps on the internet is the same. The more we build the better we become at it.
Building Prototypes
In the end the goal is to build a solution to a problem. You start off with an idea on paper so the next step is to build a prototype. The real goal of the prototype should be to solve the problem or part of it.
The core of what your trying to achieve. This could be schedule a tweet to send at a time or upload an cat photo, unsubscribe from a mailing list, log a message into a database.
For me this always starts with pen / pencil and paper. I start by working out some UI designs so I can get an idea on what it will look like and pseudo code.
The UI designs are really just to give me an idea of how I want the page to look, layouts and working out my CSS Grid or flex box.
Pseudo code is a software engineering thing if you haven't come across it before its a great way to work out stuff. Basically you start laying out your code you can do this on paper or in the editor.
You would have a function for example Get Blog Posts and then layout the code steps in a bullet point style
Get Blog Posts
- Get User ID
- Call Blog API
- Get Results
- Parse results
- Render HTML
That's just a simple example and there are a lot of different ways to do it, you can get more complex if you want but it's a great way to work out API's or functions and code and get an understanding of what your going to code.
For more information on Pseudo code check out these
The thing about the prototype is that it's not for anyone else but you, it might need a bit of work to setup and get it running and that's ok but it solves the problem you are looking at.
It lets you see what you have done. It gives you something to show off and ask for feedback. It lets you start looking for people or niches that might need your product.
But really important, it exists, it's not an idea any more. Then we move to the next step.
Building the Minimum Viable Product - MVP
To make your prototype into a MVP comes next, this is when we make it into something you can show the world and start to get beta users for.
Adding in some landing pages to get traffic and signup page, so users can sign up and log in to use your web application.
Payments, I really do support the idea that an MVP should be connected to your payment gateway and you should start or be in a position to start charging.
But the MVP stage doesn't have any building of the product because that's already done, you did that when you built the prototype.
In this stage you just have to make it presentable and understandable. So you might clean up the UI, start thinking about the user experience and the flow of how someone who finds your landing page will sign up and get using your product.
I'm currently in the middle of working on a couple of prototypes at the same time, I don't do them on the same day, I rotate at the moment. As I'm writing this post during the covid19 pandemic I need something to set my focus on. These prototypes might turn into MVP's I hope they do but if they don't I'm ok with it. We'll see what happens.
I wrote about those here in my update post if you haven't checked it out.