My MVP Workflow, How I Create Web Applications: From Conception To Creation

Last updated: September 14, 2016

Everyone knows coming up with an idea is often the easiest part of an application. I come up with a lot of ideas on a regular basis, too many some would say. What is the best way to take an idea and actually build something usable, a working MVP (minimum viable product).

I recently released a couple of quick ideas that took very little time to create, Pokego.run and Built With Aurelia. In the case of Pokego.run, I knew I needed to add in Google Maps, support authentication and ability to add markers to a map. For Built With Aurelia I knew I just needed to display submissions and allow registered users to submit projects.

In most scenarios, this is how I approach building an MVP application as quickly as possible as of September, 2016.

This won’t be a step-by-step detailed process, how I approach fleshing out an idea is actually quite basic.

A notepad

I realise it’s 2016 and you can just open up a notepad on your computer, but I find pen and paper is the best way to sketch out the basics of an idea. It doesn’t need to be a drawing, just bulleted dot points will do.

I find if I am on the computer, it is far too easy to open up Hacker News or do something else instead of jotting down the basics of my million dollar idea. With a notepad the only thing you can do is write or draw, so you’re more inclined to actually do it.

Before you start developing your idea, you need to have a rough idea of what you need. Is the app going to allow login via Facebook? What platforms/devices/operating systems will you support? What will all of the sections that make up the app be?

Writing things down on paper is less distracting and I personally find it easier. And no, you don’t need an expensive and wanky Moleskin notebook, a cheap 79c notebook from an office supply store is enough or even a blank A4 sheet of paper.

Depending on what I am wanting to build, I might do some poorly drawn sketches as well just to get a rough idea how it might look. Most of my design work is done as I go along. I also take “inspiration” from existing sites and applications I like the look of.

Bootstrap

Bootstrap is a big time saver. The grid alone in itself can save you a lot of time getting your application ready for desktop and mobile. It comes with various Javascript components for things like dropdown menus and modals, stuff that is annoying to implement piece-by-piece.

In many cases I will use Bootstrap, especially if I have an application that contains forms or items in a grid. Foundation by Zurb is also a good option, I just find Bootstrap is easier and faster to get running in my apps.

Aurelia

I used to use jQuery, then it was Angular, followed by ReactJS and now I have settled on Aurelia for the foreseeable future (1.5 years and counting). A robust client-side Javascript framework that is convention over configuration based: perfect for quickly creating an app.

For most ideas I actually use the Aurelia CLI to quickly bootstrap a working application with all of the annoying stuff like build tooling, transpilation and the other time consuming aspects of modern Javascript development.

The thing I love about Aurelia is you get the basics you need; routing, eventing, templating, binding support, modules for working with network requests and a clean way of writing applications without needing to learn Aurelia specific concepts or conventions.

If I am working on something that is going to have a HUGE codebase, I’ll leverage the Aurelia Webpack skeleton instead which gives me a little more power and works better for large applications.

Firebase

I hate setting up databases, configuring servers, finding/configuring/installing a server-side framework to create an API. This isn’t accounting for other things like basic CRUD and the dreaded complexity of configuring oAuth authentication.

Firebase is a Google owned, cloud hosted key/value store with a few other features modern applications need like; hosting, analytics, data storage, authentication and databases. It literally negates the need to worry about setting up a server or configuring a database.

The limits for Firebase are quite generous as well, so there are no upfront costs to use it. As your idea scales, stick with Firebase or setup a server. The point here is Firebase gives you everything you need to create an MVP quickly. Because it’s a key/value store, you don’t need to create database tables and fields upfront.

Github Pages

You probably think that you need to pay for a server to create an idea: wrong. Surprisingly, not a lot of people know that Github offers free project hosting from within Github itself and it even supports custom domain names. It’s called Github Pages and literally all you need to do, to enable it is create a new branch in your repo called gh-pages and a site is created at: http://username.github.io/reponame/ where username is your Github username and reponame is the name of the repo in Github.

You can’t run things like PHP scripts or anything that is not static, but for a client-side single page application, you don’t need such scripts anyway in most cases.

Fun fact: both apps Pokego.run and Built With Aurelia that I mentioned earlier are running on Firebase and they’re hosted on Github Pages.

Get people using it

You’ve got something that works. It might not look pretty, but let’s be honest, not every single web application out there is well designed anyway. You need to get some people testing it, ask friends and family to try it out, even if they’re not your target market. Then ask people to share it on Facebook, LinkedIn, Twitter and anywhere else.

Submitting it to a relevant subreddit on Reddit can also do wonders. In the case of building an Aurelia application you can submit it to both /r/aureliajs and /r/sideproject

This can be the hardest part of the process. I created a site a few years back for converting Gifs to image sprites called Gif2Sprite. It actually gets a bit of traffic from Google searches, but when it launched, it laid dormant for a while and I was its only user.

 

Dwayne

 

One thought on “My MVP Workflow, How I Create Web Applications: From Conception To Creation

  1. I do a lot of reading on an iPad and was trying to figure out why the “links” card on builtwithaurelia was the only one which seemed to work. Now I’ve looked at it on a computer I can see that details appear on hover. Is that really so dependent on the latest OS/browser that even iOS8 is excluded?

    A caveat here: I’m primarily an audio guy and many years of experience have taught me that you don’t update your OS unless software and hardware vendors say you can. So I’m naturally inclined not to, especially when many of the new features are eye-candy and not at all indispensable.

    But thanks for the site and the regular posts.

Leave a Reply

Your email address will not be published. Required fields are marked *