Code test

README.md

@@ -1,98 +1,23 @@
 # Code Challenge
 
-## 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. 
-
-
-## Delivery Steps: 
-
-1. Create a branch from `master` named `base` and push all the third-party code needed (Libraries, Frameworks, etc.).
-2. Create a branch from `base` named `code-test` and push your own code (Remember to update the Readme file providing any instructions on how to run the project if needed).
-3. Create a Pull Request from `code-test` to `base` for us to review.
-
+To run the project
+```
+cd test
+yarn
+npm start
+```
 
-## Please answer the following questions once you finish codding:
 
 A) Describe the strategy used to consume the API endpoints and the data management.
+For the API endpoints i used axios library, and for the data management i used react context api and react internal component state, i didn't used redux because the example is small and i consider that the react context api solves all state management requirements on this case.
 
 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?
+for routing i used react router library, yes because the routing is on the client side (single page web app) and doesnt matter for the front end the amount of users.
 
 C) Have you used any strategy to optimize the performance of the list generated for the first feature?
+i think that the browser dom as difference of react native (mobile) supports alot of results without optimization but in the case that we need optimization on the list, i suggest to use virtualized list strategy.
 
 D) Would you like to add any further comments or observations?
-
-
-## 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, photo and ingredients (See wireframe 1). 
-In the case where there are more than 2 ingredients, add a label that reads "y X ingredientes más" where `X` is the amount of extra ingredients.
-
-The API endpoint that has the list of drinks with Name and Photo 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
-}
-```
-
-You'll need to decide the approach to get the ingredients data that is not present on this endpoint. You can comment that approach and the implications inside the code and what can be done to improve this.
-
-Wireframe 1:
-
-![screen shot 2018-02-02 at 12 53 57](https://user-images.githubusercontent.com/263229/35742087-40b1ce26-0818-11e8-91d7-5c2ea0d4a6aa.png)
-
-
-
-
-**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 (with the quantity on each case next to it) 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
-
-![screen shot 2018-02-02 at 12 53 37](https://user-images.githubusercontent.com/263229/35742155-63205b1c-0818-11e8-8b4b-608a46eaa718.png)
-
-
-
-
-**3. Bonus Points: (Optional)**
-
-A) 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.
-
-B) Include test coverage for the most relevant functionalities.
-
-Thank you and looking forward to seeing your great work!
-
+because lack of time i decided not complete the bonus points but if are necessary i can do it without any problem.
 
 

test/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*