diff --git a/README.md b/README.md index 7c812cd..dc9f1bb 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,40 @@ # Dreadful Cherry Tomatoes -Dreadful Cherry Tomatoes is a new platform to find movies. The main objective is to help users to find information about their favourite movies. +This is a coding challenge facilitated by Rviewer, an innovative Spanish recruitment firm. -To do so, the company has to create a new web app that allow users to do some fancy things. +## What is it? -## What do you have to do? +Dreadful Cherry Tomatoes is a new platform to find movies. The main objective is to help users to find information about their favourite movies. -Dreadful Cherry Tomatoes needs to implement an awesome webpage where the users could view information about almost every new movie. +## What do I have to do? -The Design team has sent us the new interface which has to be implemented. To keep it simple, there is only one page: the movies page. +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 - +### Considerations * Through [this Figma link (account required)](https://www.figma.com/file/OaRd9F0R43FQWTZQo6JO2Y/GW-867-Dreadful-Cherry-Tomatoes-challenge) or through [this ZIP](https://static.rviewer.io/challenges/assets/dreadful-cherry-tomatoes/assets.zip), you can download all the assets to start! * To obtain the data of the Movies, you have to request [this file](https://static.rviewer.io/challenges/datasets/dreadful-cherry-tomatoes/data.json) * Use SCSS or SASS to manage your stylesheets * Pay attention to hover effects (Movies cards) -## Technical Requirements +### Technical Requirements * Create reusable components * Create a **clean, maintainable and well-designed** code * Test your code until you are comfortable with that -## 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](https://blog.stackademic.com/how-to-extract-state-logic-in-react-using-a-custom-hook-815f862b9e78) \ No newline at end of file +## 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](https://blog.stackademic.com/how-to-extract-state-logic-in-react-using-a-custom-hook-815f862b9e78)