Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

#Jason Lydon: Quick Code Exercise using Gulp, Jade, Stylus, REACT, JSON, Twitter and Instagram.

##Directions ==== FULL STACK Exercise ====
We would like for you to create a basic 3-5 page website to introduce a subject of personal interest, product, game, or business of your own design. This can be a real personal project or completely made-up. Use any and all the tools and libraries you wish – just be prepared to talk about it. The key here is show us your knowledge and give us something to talk about – both technically and interest-wise!


  1. A .zip or public repo containing the files and directories required to run your site on a local server.
    • If you're reading this, you found the repo

Basic site requirements:

  • 3 to 5 pages using templates
    • DONE
  • Content should be separated from the presentation – Use a CMS, JSON file, or data store of your own creation, etc to show how content can be managed separately from code.
    • Content is pulled via JSON, Instagram API or Twitter API
  • Make it responsive for desktop, tablets, and mobile device viewing.
    • DONE, but I wouldn't say I pushed the limits.
  • Use at least one Javascript library
    • REACT, Gulp, Stylus and core js
  • Pick your favorite JS-based view layer or MVC and rock it: Angular, React+Redux/Flux/Roll-your-own, Backbone, etc.
    • Used Jade Templates for some pages and REACT for a page, just to show some diversity.
  • Bring in some fun flourish with Javascript, CSS or mode of your choosing. (Think … Processing.js, Epoch.js, D3, Polymaps, etc)
    • Animated SVG as logo
  • Use at least 1 third party service (Think … Twitter API, Google Data, FaceBook OpenGraph, WolframAlpha, etc) on the front- or back-end
    • Instagram API with string replace and Twitter API with REACT used in client

##Run this locally Setup

  1. Do you have nodejs and npm installed?
    • Running $ node --version and $ npm --version in the terminal should return a version like "v4.0.0", if not, then run the installed from the link above
  • Do you have GulpJS installed globally? This isn't required, but sometimes not having the Gulp CLI installed globally can cause issues
    • Running $ gulp --version in the terminal should return a version like "[09:08:39] CLI version 3.8.11". If you don't have it installed, follow the link above and the install directions

Run it

  1. In the terminal, run $ cd [PATH TO DIRECTORY]/_src. You are now in the build folder.
  2. The dependant Node Modules are not included in this repo, you need to run $ npm install to add them. If you run into premission issues, then run it as the Super User via $ sudo npm install. If you have the _src directory open in Viewer, you should see a node_modules folder added and populated. The npm install command read the package.json file and fetches the necessary dependencies.
  3. The Task Manager being used is GulpJS. You can run the following tasks via the terminal
    1. $ gulp will run the default task which calls the markup, styles and js tasks
    • $ gulp watch starts the watch task, which watchs for changes in files and runs the corresponding task. You can end the watch task by typing control + c
    • $ gulp markup converts the jade templates and data into the static html files in the root of the project. I tried using Pug since that is the new version of Jade, but it wasn't loading data correctly
    • $ gulp styles converts the Stylus files into CSS files, then the prefixes are cleaned up via AutoPrefixer and the media queries are combined via combineMQ (/public/styles/main.css). A version is exported and then the CSS is compressed via CSSNano and renamed (/public/styles/main.min.css).
    • $ gulp js concatonates all the javascript files and spits out a version (/public/js/main.js), then runs it through Uglify and renames the file (/public/js/main.min.js)


Just a demo proof of conception.



No releases published


No packages published