AngularJS Blog

Angular Blog

Angular Blog

We are looking for a developer with a solid understanding of JavaScript and supporting libraries (ex. AngularJS, jQuery, Underscore).

Please build a simple website based on the image and json provided. The point of this mini-project is to get an idea of how you approach html/css/js. Go ahead and slice the images from the png. The content is in the included sessions.json file. Use any client-side js library you prefer to parse and display the data.

Basic requirements include:

  • use the included sessions.json file to build out the page
  • each track should have its own tab
  • the session (post) titles make up the tabs on the left

Approach

I chose to use the technologies specifically listed in the job posting: Javascript, AngularJS, SASS, Git, and Node.js.

AngularJS is an older framework, so I turned back the clock a bit to set that up. I started from the base project angular/angular-seed. I added gulp.js to facilitate a quicker development workflow. The job posting mentioned that experience with responsive sites was essential, so I used Foundation to quickly achieve that.

Architecture

The application is split up into a main posts component and several child components. The parent, posts.component.js serves as router, controller, and store. It fetches the data with help from fetch-posts.service.js. It parses, transforms, and persists it to the store using pure functions. Then it provides an API-like interface for child components to retrieve that data. The child components are basically dumb views that render the stream of data in markup.

All actions a user might take when navigating the application pass through the store that provides methods to process and track everything:

  • tabs: the full list of available tabs compiled from sessions.json
  • currentTab: the current user-selected tab
  • all: the full unfiltered list of posts plucked from sessions.json
  • posts: the filtered list of posts corresponding to the current tab
  • currentPost: the current user-selected post

The end result is a non-trivial, reactive, single page application, all built from scratch in less than 12 hours.