The Making of a MVP

3 August 2018 by Jess Brown

I've recently been wanting to create a mini series of videos on building MVP's. Most of my career I've been helping people take ideas and turn them into something real without a huge budget.

I've also really been into VueJs and have been wanting to explore and learn more about Webpack (via rails' webpacker) and rails and how to create a smooth workflow using these 3 tools together.

So, when I recently ran across this tweet by these two cool guys I know with, I thought, there's a good opportunity to put all these things together and so voila!

1. I have a sweet markdown template in IA writer with variables I turn into a pdf. Lurve it.

2. Maybe 15% of the time.

3. No
— mds (@mds) June 30, 2018

Want to skip to the end and see the final product?

Intro

Here's a quick intro on getting started:

Step 1 - Setup

I'm starting with a starter app I use that has some features alreay installed (authentication, oauth, authorization, etc)

Step 2 - Creating Contracts

In this step I create the backend data models and database tables, controllers and view templates as a starting point of creating contracts. This is pretty basic railsy stuff, however, one interesting point might be that I choose to use scaffolds (automaticly generated models, controllers, views) which is considered a bit amatuerish by many, but if you're building a javascript frontend anyway, you really only need a basic API to interact with. Also, it's nice that scaffolds come baked in with json views.

Step 3 - Setting up Vue

In this step, I show you how I use a custom rails generator to setup my VueJs single file component for managing the contracts. I also get into handling the GET request to fetch the contract and the PUT request to save the contract.

Step 4 - Adding Markdown

In this step, I show you how to convert our contract's markdown into html all in real time using showdown. This is also a really neat example of how to use webpack to add js libraries.

Step 5 - Adding Custom Fields

In this video, we make use of PostgreSQL's JSON data type and tie that into the Vue frontend to dynamically create multiple custom fields for our contract.

Step 5 - Populating Custom Fields - Part 1

In this video, we make use of PostgreSQL's JSON data type and tie that into the Vue frontend to dynamically create multiple custom fields for our contract. I split the videos into two parts because it got a little long as we get into the grit of parsing our custom fields and replacing with the custom fields' value.

It part 1, we extract the markdown rendering functionality into it's own component since we're introducing more logic and also anticipate reusing this functionality in other parts of the app.

Step 5 - Populating Custom Fields - Part 2

In part two, we get real detailed and add the computed property to filter the contract and replace the custom fields with values.

Step 6 - Duplicating & Deleting Contracts

In this video, I add some basic management features to our contracts.

Step 7 - Adding Alertify

In this video, I add a js library called alertifyjs to help with giving notifications when we save the contract. What's interesting about this video is learning how to use webpacker to add the library.