Code Challenge

Using this EmberJS repo, build a simple app for selecting a city and displaying a map.

If this is your first time working with EmberJS, it's recommended you read the excellent Ember Guides. This will walk you through setting up Ember CLI, and the different concepts in Ember (such as components, models, routes, etc).

Submitting the Challenge

Fork this repo, and build your own solution. Feel free to commit as you go and, when you're finished, open up a PR from your fork.

Feature Spec

• the app loads an index page which allows the user to select 1 of 3 cities - Melbourne, Sydney, or Gold Coast
• the city selection is encapsulated in a <city-picker> component, which renders 1 button per city
• selecting a city will transition to a /cities/:cityId route
• the city route will display a label, like Melbourne - Victoria, and a map thumbnail image
• the logic for each city is encapsulated in a model

The app is preloaded with 3 city records - Melbourne, Sydney and Gold Coast. See the model() method in app/routes/application.

Your implementation should pass the test suite, which can be run using ember test --server.

Design Spec

Style the page according to the Material Design system, so that:

• all typography uses the Roboto font
• the city picker buttons are Material raised buttons with a primary colour of #34C981
• the city label and image are displayed on a Material card
• the city card is horizontally and vertically aligned in the centre of the viewport
• the city thumbnail image is never wider than the browser viewport

Beyond those requirements, you are free to style the rest of the page as you wish.

Working with Ember

This README outlines the details of collaborating on this Ember application. A short introduction of this app could easily go here.

Prerequisites

You will need the following things properly installed on your computer.

• Git
• Node.js (with NPM)
• Bower
• Ember CLI
• PhantomJS

Installation

• git clone <repository-url> this repository
• cd pick-a-city
• npm install
• bower install

Running / Development

• ember serve
• Visit your app at http://localhost:4200.

Code Generators

Make use of the many generators for code, try ember help generate for more details

Running Tests

• ember test
• ember test --server

Building

• ember build (development)
• ember build --environment production (production)

Deploying

Specify what it takes to deploy your app.

Further Reading / Useful Links

• ember.js
• ember-cli
• Development Browser Extensions
  • ember inspector for chrome
  • ember inspector for firefox