The Making of a MVP
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.— mds (@mds) June 30, 2018
2. Maybe 15% of the time.
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
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.
Step 8 - Adding a share token for sharing the contract
This video takes steps to add the ability to turn on sharing and when turned on, it generates a share token url (much like Google Drive or Dropbox).
Step 9 - Signng The Contract
It this video, we take the final steps to wrap up or MVP by adding the ability to share the URL and collect a signature.
See a quick video on the final product and then checkout the live version.
Or Hack on it: