- You will build a simple React application that will fetch data from an API and display it using the attached design;
- We need to see that you know your way around CSS and JS, so this must be built without using existing React component libraries or CSS frameworks. You can, however, use any scaffolding tool (like create-react-app), or other NPM packages that might be useful;
- The React part of the application must be built using Function Components and Hooks (not classes);
- You can write your stylesheet in either plain CSS, or SCSS - bonus points for using SCSS;
- You should make sure the interface is responsive and works fine on mobile screens;
- We know we don't provide measurable references, so we don't expect this to be pixel perfect, but making it as close to the reference images as possible constitutes a big bonus;
- In this repository you will find two attached images that will be used as a reference to create your application;
- You can get creative with transitions, loading state and interactions;
- As a starting reference, the container width for this application will be
1200px
wide. - The font family used across the whole design is Lato and you can request it from Google Fonts;
- The first image represents the main view of the app. Here you will display the data fetched from the API endpoint.
- The last card represents the card hover state;
- When clicking the
Learn More
button or the title, the modal from the second image should pop up;
- The second image shows the modal opened;
- Create your own repository and add your code there;
- When you are done, send us a link to the repository where you added your solution, so we can check it out;
- If you get stuck at some point, send what you did up to that point, and we will look at it;
Good luck!