How to Build and Ship an MVP

In 24 Hours

Donald Whyte / Mansimran Singh

Prepared by

What Needs to Get Done?

Decide all of features

Design the app

Decide tech/platforms

Setup database

Write front-end

Write back-end

Deploy back-end

Release to the app store

Write Front-End/Back-end

Writing the front-end views

User account management

Managing user payment info

Form validation

Store relevant data in DB

Write back-end business logic

Integrate various APIs

Ensure the app looks good on all devices

Test combination of features work correctly

### Why Does this Happen? * Poor estimation of work * Feature creep * "More is better" fallacy * Fear to ship

## MVP #### Minimum Viable Product

### A Definition > Smallest thing you can build that gets the product out to customers

## Goal **Maximise** learning about the users and problem domain **Minimise** resources spent

Our Definition

Smallest product that can be shipped to users and immediately provide value

Absolute minimum to show your vision But enough to ship to users Single core feature you want to validate Nothing else

## Let's Build Something!

### The Problem Teams are: * distributed across multiple locations * multi-disciplined * managed by different people * busy

We need an effective way to see the progress of the entire competition.

At a glance.

### One Step Further Growth in decentralised, distributed teams Self-managed teams with shallow hierarchy Multi-disciplinary teams that use specialised tracking software

Enterprise pay huge amounts for progress tracking. Target the smaller, more distributed companies as well!

## Glance Aggregation of progress metrics. ![glance_vision](images/glance_vision.svg)

### The MVP #### Follow the Rule of One * **One** user type * **One** use case * **One** industry * **One** core feature * **One** very specific problem

Scope of this MVP

Distributed team management

Short-term projects

Who manage their tasks using Trello

StartupBus Team Tracking

![glance_for_now](images/glance_for_now.svg)

But how are we going to build this in 24 hours?

> I will always choose a lazy person to do a difficult job... because, he will find an easy way to do it. _Bill Gates_

## Building Glance 0.1

![glance_in_blocks](images/glance_in_blocks.svg)

### Distributing the Work Parallelise as much as possible. Separate developers on each block type. If one developer, prioritise the front-end.

## Front End

1. Design user journey and draw mock-ups 2. Use existing templates when it makes sense 3. Generate boilerplate UI code 4. Use mock data so you don't have to rely on back-end

## Back-End and APIs

1. Replace mock data on front-end with real data 2. Build back-end using existing APIs where possible 3. Base back-end on boilerplate generators or existing projects

### API Repository — Programmable Web Directory containing over 15,000 APIs. ![Programmable Web](images/programmable_web.png)

### Hackathon Starter Kit [https://github.com/sahat/hackathon-starter](https://github.com/sahat/hackathon-starter) ![Hackathon Starter Kit](images/hackathon_starter_kit.png)

**Protip:** Stick to the languages/libraries/APIs you know!

## Platforms and Deployment

![the_cloud](images/the_cloud.jpg) Deploy our back-end service to cloud instances.

### Platform as a Service (PaaS) Don't deploy machines, deploy apps. To iterate quickly, deplyoments should be as easy as: ``` git push production master ```

### Commonly Used Platforms ![aws](images/aws.svg) ![heroku](images/heroku.png) ![google_app_engine](images/google_app_engine.png) ![ms_azure](images/ms_azure.svg) ![firebase](images/firebase.png)

### Heroku 1. Install Heroku toolbelt - `brew install heroku` 2. Authenticate your Heroku account - `heroku login` 2. Create Heroku app - `heroku create <appName>` 3. Add app's repo to git - `heroku git:remote -a <appName>` 4. Deploy your master repo using - `git push heroku master`

Heroku auto-detects type of service you deploy. New service is deployed **immediately**.

## How it All Fits Together

![glance_architecture](images/glance_architecture.svg)

## Takeaways

If you have an idea for an app, build it. It won't take as long you think to build it.

Scope your MVP. Follow the Rule of One.

![glance_in_blocks_small](images/glance_in_blocks.svg) Breakdown your MVP into block types **Be lazy** — always seek to re-use existing blocks

### Front-End * Design user journey and paper prototypes first * Use templates and theme generators for the live site/app * Start with mocked data so you're not blocked on the back-end If you can't work in parallel, work on the front-end first.

### Back-End and APIs * If an API already exists for a task — use it! * If you've thought of it, chances are someone has built an API - Google and Programmable Web are your friends * You want to write as little code as possible * Store as little data as possible

### Platforms * Don't bother managing your own infra * Use existing PaaS services * instant deployment is a must

### [**Find the slides and code here**](https://github.com/DonaldWhyte/isomorphic-react-workshop)

## Further Materials [**How I Build MVPs Within 3 Days**](https://medium.com/@vadimdemedes/how-i-build-mvps-within-3-days-5d0b9ea86d9c) [**How I Build my Minimum Viable Products**](https://levels.io/how-i-build-my-minimum-viable-products/) [**Signs You Aren't Really Building an MVP**](http://www.panozzaj.com/blog/2012/01/11/signs-you-arent-really-building-a-minimum-viable-product/)

Get in Touch!

@donald_whyte
github.com/DonaldWhyte

@msingh_5
github.com/mansimransingh

## Appendix

### Social APIs Quick and easy account management Get users sharing your app with others ![facebook](images/facebook.svg) ![twitter](images/twitter.svg) ![instagram](images/instagram.svg) ![google_plus](images/google_plus.svg) ![reddit](images/reddit.svg)

### Comms APIs Communicate with users using existing platforms ![twilio](images/twilio.svg) ![twitter](images/twitter.svg) ![slack](images/slack.svg) ![sendgrid](images/sendgrid.svg) ![mailjet](images/mailjet.svg)

### Payment APIs Convert users to paying customers easily Don't need to be PCI complaint ![paypal](images/paypal.svg) ![stripe](images/stripe.svg) ![amazon](images/amazon.svg) ![braintree](images/braintree.svg)

### Natural Language Processing APIs and Bots Parse and understand human textual input Great for automated bots ![aylien](images/aylien.png) ![alchemy](images/alchemy.svg) ![google_cloud_platform](images/google_cloud_platform.svg) ![microsoft](images/microsoft.svg)

### Image Recognition APIs Processing user photos and video ![clarifai](images/clarifai.png) ![cloudsight](images/cloudsight.svg) ![google_cloud_platform](images/google_cloud_platform.svg) ![microsoft](images/microsoft.svg) ![ibm_watson](images/watson.png)

StartupBus

September 2nd — 7th

![StartupBus UK 2016 Route](images/startupbus_uk_2016_route.png)

![StartupBus Europe 2016](images/startupbus_europe_2016.jpg)

### Perks * 5-day road trip across Europe * technical and business mentorship * networking events at tech hubs (e.g. Paris) * ticket to [**Pirate Summit**](http://piratesummit.com/) - 2 day tech startup in Cologne

### Apply [**http://europe.startupbus.com/apply**](http://europe.startupbus.com/apply)