Like any technological effort, I start with the simplest user story.
As a developer, I want a blog, So that I can share my technological learnings
After engineering my user story, I had to research and outsource a lot of my design and experience practices to identify the best and most efficient way to go about this.
As a next step, I defined my stack. These are the technologies and strategies I explored and plan to implement to achieve my mission.
Since I love my Linode dashboard and support staff, I decided to make this apart of my stack. I wanted to deploy to a production instance in a Linux environment, managed by Linode.
As a developer, I want a Linode Linux instance, So I can deploy my blog to a production instance.
I want to contain my application and its’ dependancies in a virtual container with Vagrant, so that I can reproduce and develop in a traceable fashion. This process of virtualization helps with testing and product stability. I can provision my machine with all the necessary dependancies, so that either I can access and reproduce my environment, or someone else can spin up a development environment in a short time.
As a developer, I want a Vagrant VirtualBox So I can use my Vagrantfile to provision my machine
After building my application, I want it tested on a continuous basis. I want to build my Vagrant and application every time I make and push a change to my GitHub. For this task, I chose CircleCI. This tool was so easy to implement. With the change addition of one file to my git repository, and a hook implemented through the CircleCI GUI, I got my integration builds started in no time.
As a developer, I want to build my application, So that I can run integration tests with every change
Site builders like Squarespace are a type of hosted closed-source CMS. They focus on making it fast to build a website; however, they don’t allow self-hosting or enable you to export your website and customize it.
This is where GatsbyJS comes in. Gatsby lets you build blazing fast sites with your data, whatever the source. Liberate your sites from legacy CMSs and fly into the future.
As a developer, I want a React blog, So that I can use new technology to build a SPA
As a tester, this is quite possibly the most important step for me to identify. I’ve only contributed to Jest and Mocha-style BDD tests thus far, and this would be my first trial-by-fire implementation of the framework. It’s great at mocking and testing components in an asynchronous fashion.
As a developer, I want to import JestJS in to my application, So that I can quickly test my components
As you can see, a bit of research went in to defining a stack that meets the needs of my project. The following design decision was made in a bit of a rush. I chose the design and UI based on the following requirements.
- needs to be extremely readable
- needs to be strippable. I should easily be able to port the code into my framework
- needs to be minimal
- needs to be responsive
- should ideally be designed mobile first
After some research, I stumbled on to this
Clean Blog design by Bootstrap.
As a developer, I wanted to use a minimal, responsive CSS framework, So that I can implement it into my GatsbyJS blog
I hope this post gave you some insight into the design and implementation process for this blog. It took about a week to get out the door and running. It was a fun way to learn React, albeit GatsbyJS is a bit extracted from the coding-style of React.