The Iron Yard, Code School Week 10/12

Final Project

These last few weeks are dedicated to final projects. At the end of last week, we each pitched two or more ideas and were given the green light on the best one based on scope, implementation feasibility, and concept.

Week Digest

When generating ideas for my final project, I saw two potential routes, the first being a project that solves a problem/acts as a service and the second being entertainment/design focus. I had a flood of ideas, but ultimately decided to focus on the latter to exhibit both my design and development skills.

I also dedicated a little bit of time to getting my portfolio together and adding nice README's to my Github repos.

Coding a Design Dashboard

My concept is a design dashboard for anyone who needs curated design resources for a project. The dash would generate a unique color palette (based on my Color Palette project), a set of fonts that work well together, and an icon set.


I began by writing a few user stories and wire-framing out my concept.

User 1- Entrepreneur/Founder: As an entrepreneur, I want to be able to find/create a design profile for my business so that I can envision my website/app and communicate my aesthetic.

User 2- Designer: As a designer, I want to be able to find design assets to begin a project so that I can save time searching for assets individually.

User 3- User 3: Non-Designer: As someone who doesn’t know much about design, I want to put together a design template for my project so that I can create a nice-looking website/app.

*User 4- Business Owner: As business owner, I want to store design profiles for my company so that I can quickly outsource projects to a designer that is unfamiliar with our brand.

The ability to handle data persistence, as the case with User 4 is ideal, but not part of the MVP.


Here are the preliminary design files done in Sketch, representing the three main views as the app will flow:

1. Search and generate a palette based on an image

2. Toggle fonts, colors, and icons. Save project starter files as a download (or to Dropbox, ideally, also not part of the MVP).

3. Dynamic Preview

I conceptualized the preview to be on mobile, but this may change as I go.


I coded out the structure of the dashboard page of my app. I am writing the views in React.


I decided to use the Google fonts API, but ultimately needed to curate the font collections myself so I created a linked font table with fonts stored as object key-value pairs, i.e:

var FontTable = {"Roboto": {"subhead":"Open Sans", "content":"Courier" }


I have successfully rendered fonts and dynamically constructed the link to Google Web Fonts to be inserted in the HTML <head> by extracting values and building the string from the render method of the font container based on my font table above.

var mainFonts = Object.keys(FontTable) var font1 = mainFonts[1]
var font2 = FontTable[font1].subhead
var font3 = FontTable[font1].content
var head = document.head
, link = document.createElement('link') link.type = 'text/css'
link.rel = 'stylesheet'
link.href = `${font1}|${font2}|${font3}`


I want to use the Iconfinder API for the icon sets, but ran into a road-block with OAuth and generating user permissions for the API.


I leapt over to integrating routing and installed Backbone on my project. I was all set to tackle the three views, but got snagged on rendering objects from my font table.