Dreadful Cherry Tomatoes

This is a coding challenge facilitated by Rviewer, an innovative Spanish recruitment firm.

What is it?

Dreadful Cherry Tomatoes is a new platform to find movies. The main objective is to help users to find information about their favourite movies.

What do I have to do?

The Design team has sent me the new interface which has to be implemented. To keep it simple, there is only one page: the movies page.

The movies page is the landing page of the webpage and shows a list of movies. In this page the user will see a list of cards with the title, year, description and image from each movie, sorted by the most recent. 10 cards per page, sorted by most recent release year. And the user could filter movies by title.

Considerations

• Through this Figma link (account required) or through this ZIP, you can download all the assets to start!
• To obtain the data of the Movies, you have to request this file
• Use SCSS or SASS to manage your stylesheets
• Pay attention to hover effects (Movies cards)

Technical Requirements

• Create reusable components
• Create a clean, maintainable and well-designed code
• Test your code until you are comfortable with that

The result

Scored 4/5 in code quality, 4/5 in maintainability and 5/5 in testing in the code report from a Rviewer mentor.

Highlights

• Implemented Clean Architecture approach to produce clean, maintainable and well-designed code.
• Created well isolated types and components that can be reused with ease.
• Extracted multiple React Hooks into a custom Hook to improve performance and code maintainability.
• Provided module based tests to test React components and application logic, achieved 93% code coverage.
• Used module based CSS to manage stylesheets.

To read about how I refactored the code using React custom Hopk, go to

How to Extract State Logic in React Using a Custom Hook