-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
978f724
commit 7e7ff7f
Showing
1 changed file
with
20 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) | ||
## 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) |