perzequiel/fe-code-test

Coctails menu in ember.js

Code Challenge

Responses at the bottom of the readme (perzequiel)

Instructions:

Please clone the repository, complete the exercise, and submit a PR for us to review! If you have any questions, you can reach out directly here or leave comments on your pull request which we will respond to. Remember, all instructions for running the application (including installing relevant libraries, etc.) should be included in the README. Thank you and looking forward to seeing your great work!

Overview:

Implement a simple mobile cocktails catalogue (master / detail). The catalogue consists of a table view list of cocktails with their name, toppings and photo. Once the user taps on a specific row it will push a new screen with that drink’s details: Name, Photo, Ingredients and Preparation.

Features:

1. Cocktails list:

For each row of the list it will display the Cocktail name and photo (See wireframe 1). The API endpoint that should be consumed for this purpose is:

http://www.thecocktaildb.com/api/json/v1/1/filter.php?g=Cocktail_glass

This returns a JSON list of cocktails, and the information needed in order to populate each row of the list.

{
 	strDrink,           → Cocktail name
     	strDrinkThumb,  → Photo URL
      	idDrink       → Cocktail ID
}

Wireframe 1:

2. Cocktail detail:

Once the user taps on a row from the list mentioned in the previous feature it will push a new screen with the selected cocktail’s details, where it will show it’s name, photo, ingredients and instructions (See wireframe 2)

The endpoint to be used for this is the following:

http://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${idDrink} → Cocktail ID I.g.: http://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=16108

The endpoint returns a JSON with the cocktails info, the needed properties are:

{
	strInstructions,  → instructions
	strDrink,         → cocktail name
	strDrinkThumb,    → photo URL
	strIngredient1,   → ingredient 1
	...
	strIngredientN    → ingredient N
}

Wireframe 2

3. Bonus Points: (Optional)

Implement a filter by name functionality on the first screen that automatically filters the results while typing, only showing the rows that satisfy the criteria entered by the user.

Questions:

A) Describe the strategy used to consume the API endpoints and the data management.

B) Explain which library was used for the routing and why. Would you use the same for a consumer facing app targeting thousands of users? Why?

C) Have you used any strategy to optimize the performance of the list generated for the first feature?

D) Would you like to add any further comments or observations?

RESPONSE - README: (perzequiel)

Steps to install

1. clone the repository

2. go to local folder by command and input the following: npm install ember serve

3. go to http://localhost:4200

Answering the questions

A) The strategy was make transformations in the adapter so that ember has no problems in processing the JSON, overloading the findAll and findRecord methods.

B) In this case I used ember routering, but if I had to use React, I would use redux for example.

C) Two models were used and one is the composition of the other, so when the app call to FindAll the main data of the list are loaded and the promises of the composition model are waiting to load the ingredients, so that the list is loaded and visualized first.

D) Transformations were also made in the composition model for the ingredients and measurements, storing that in an array for better handling and rendering in the template.