/ projects

Dinner Dash - Days 6 - 8

With the Landing page mock-ups done it was time to create the HTML layout and deploy the landing page to a staging environment.

The page

Instead of using any CSS frameworks like Bootstrap or Foundation I thought it would be better to build the landing page from scratch. This way I could ensure that the CSS code was minimal and not full of unnecessary code that would bloat the page out and cause it load slower. I've made use of flexbox throughout as this allowed me to align elements on the page without having to make use of nasty CSS hacks.

Currently, the page is non-responsive, it should only require a few small tweaks to make it responsive which I can do at a later date, my chief focus was on actually putting something live.

To make the forms work I used MailChimp's form builder to generate the form and hook it up to a database, I then removed any styling and unnecessary components such as form labels which would be provided by design. Thankfully MailChimp offers what they call a 'naked' mode whereby all input styling is stripped from the form, and just the inputs and validation fields are given.

Deployment

As mentioned in a previous post I've used TravisCI and Heroku to handle deployment for the time being. Eventually, I'll migrate to using AWS's infrastructure and Docker, but again in the interest of getting something live quickly, I've gone with the path of least resistance.

To handle the deploy I've set my .travis.yml file as follows:

language: node_js
node_js:
- '6'
- '7'
- '8'
deploy:
  provider: heroku
  api_key:
    secure:  {secure_key}
  app:
    develop: dinner-dash-staging

This setup should then run any unit tests across three different Node.js versions and deploy to the Heroku app specified. It's also been set to deploy any changes merged to the develop branch to the staging environment when there is more functionality available I'll also set this to push master changes to a different app (possibly an AWS instance).

Finally, the app itself can be found here.

Frontloading

To save myself some hassle at a later point I began breaking down the first set of features down into user stories which are displayed on the repo's Waffle.io board which can be found here.

The first 11 stories cover the majority of the user flow for unauthenticated users and should allow me to build out a framework application which can then be enhanced using feature-flipping.

Header image is from Greg Rakozy

Chris Gray

Chris Gray

Formerly a QA/Test Engineer, I have decided to progress further down the path of development. You can find my ramblings here as well as any new projects I work on.

Read More