Coding Assignment - LeoVegas

[nicoculotta]

Task 1:

Code review

My first impression when I've seen the code for the first time.

• App.js: This file has some logic that It would be nice to separate in custom hooks or another files.

• Constants.js: remove the “/“ between movie and queryparam “api_key”. It’s causing an error on ENDPOINT_DISCOVER and ENDPOINT_SEARCH.

• We should use try catch blocks when fetching data from the server or api, to handle possible errors.

• Movie.jsx:15: I prefer to named actions function with “handleClick” instead “myClickHandler”. Inside this function need a refactoring. Don’t use “var” to declare a variable, use let or const. But in these case “e” is created when “e” is always pass throw as a parameter.

  This will work better:


e.stopPropagation();   

e.target.parentElement.parentElement.classList.remove('opened')





Beyond these changes I think the whole component could be refactored. The structure and styles are not correct and have some bugs ex: when displaying in mobile the card is broken.

• Header.jsx: Improve the search input. A debounce would be a good improvement to avoid many requests.

• The project could be better if we use Typescript to have a better developer experience, having types safe and avoid mistakes.

Task 2:

Improvements & refactor:

• Grid to display movie results
• Fullscreen modal to show movie trailer
• Infinite scroll to more results
• Prettier and ESlint added to maintain a correct format and style, also prevent code errors.
• Create an .env file for sensitive information like api key
• Fix visual presentation of Movie card component when it shows on mobile.
• Custom hooks to separate the logic and the presentation components: useMovies, useSearchMovies, useDebounce and useInfiniteScroll.
• Add debounce in search input to prevent many api calls
• Create an .env file for sensitive information like api key