https://github.com/codeinwp/front-end-internship-test

ThemeIsle front-end internship test.
https://github.com/codeinwp/front-end-internship-test

Last synced: 11 days ago
JSON representation

ThemeIsle front-end internship test.

• Host: GitHub
• URL: https://github.com/codeinwp/front-end-internship-test
• Owner: Codeinwp
• Created: 2020-11-25T15:34:54.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2022-07-13T12:46:43.000Z (over 3 years ago)
• Last Synced: 2025-03-02T08:39:23.110Z (about 1 year ago)
• Size: 4 MB
• Stars: 0
• Watchers: 5
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## 2022 ThemeIsle front-end internship test 

![ThemeIsle front-end internship](https://img.shields.io/badge/ThemeIsle-Front--end%20Internship-red?style=flat-square&link=https://themeisle.com)

![Use React](https://img.shields.io/badge/React-181717?style=flat-square&logo=react)

![Use JS](https://img.shields.io/badge/JavaScript-181717?style=flat-square&logo=javascript)

![Use CSS](https://img.shields.io/badge/CSS/SCSS-181717?style=flat-square&logo=css3)

![Use GitHub](https://img.shields.io/badge/GitHub-181717?style=flat-square&logo=github)

### Instructions:

- You will build a simple React application that will fetch data from an [API](https://my-json-server.typicode.com/Codeinwp/front-end-internship-api/posts) 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;

---

### Design:

- As a starting reference, the container width for this application will be `1200px` wide.

- The font family used across the whole design is [Lato](https://fonts.google.com/specimen/Lato?query=lato) and you can request it from Google Fonts;

- The [first image](https://github.com/Codeinwp/front-end-internship-test/blob/main/img/posts.jpg?raw=true) 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;

![posts](https://github.com/Codeinwp/front-end-internship-test/blob/main/img/posts.jpg?raw=true)

- The [second image](https://github.com/Codeinwp/front-end-internship-test/blob/main/img/posts-modal.jpg?raw=true) shows the modal opened;

![posts with modal](https://github.com/Codeinwp/front-end-internship-test/blob/main/img/posts-modal.jpg?raw=true)

---

### Resources:

- [The API endpoint](https://my-json-server.typicode.com/Codeinwp/front-end-internship-api/posts)

---

### Submitting:

- 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!