spotify-exercise

A Frontend developer exercise

This exercise is made to test your abilities to solve a typical frontend issue.

Context

Basically, you'll need to connect our current backend to be able to do album searchs and show the current comments, allowing the user to put a comment on a album. The application should be fully responsive, as target from iphone 5 to desktop (1080p).

Technical Rules

This should be done following the Toddmotto Styleguide, and at least 80% of code coverage by unit test.

The technology used on the frontend side should be:

• Javascript ES6+.
• A+ Promise Syntax (the q library is allowed).
• Angular 1.5.X (Component Based Flavor)
• Gulp as Task Runner.
• Webpack, Babel and Babel-Polyfill to parse the ES6 Code.
• SASS as CSS Preprocessor.
• Mocha, Karma, Chai and Sinnon for Unit-Testing.

How to run (With Docker, Recommended)

1. Install Docker in your computer.
2. Run docker-compose up and open your browser pointing to http://localhost:3000
   • If you want to make it run in any other port, create a .env file with this data: APP_PORT=3000, Replace 3000 with the desired port

Backend documentation

When you run the application, you can open the documentation hitting the /docs endpoint, also, if you want to see more about the response of the search you will need to review the Spotify API.

Gulp tasks (frontend)

• gulp frontend:watch: Minify styles and generate build on every change, useful for development purposes.
• gulp frontend:build: Minify styles and generate a build, useful on Demo/Prod.

Gulp tasks (backend)

• gulp test: Run Mocha tests for the backend, create coverage inside coverage/backend folder.
• gulp doc: Create Backend APIDOC documentation inside /doc folder, it is available under /docs endpoint.
• gulp backend:build: Shorthand for gulp doc, use if the documentation was not generated.

Gulp Build

• gulp build: Shorthand that will run backend and frontend build tasks at the same time.

How to test

1. Install karma-cli with: npm install -g karma-cli.
2. Hit karma start on the project root.
3. You will see the console and browser running the test suite, also, the coverage will be generated under coverage/frontend folder

Designs

Ask @negan1911 or @nicogelpi to share you the permissions of the designs, Zeplin is required. There is a Preview of the Zeplin Design

Important Comments (Rev. 11/17/2016)

At the moment of the release of this repository, there is an issue with ui-router that doesn't allow you to use the component: 'componentName' property on the state definition, use the template: '<component-name></component-name>' syntax until this is resolved, you can track the resolution in the link above