React test front

To have optimal conditions, it's recommended to use visual studio code with the live share extension already installed

Fetch apis :

You will need to use these api for this exercise : https://jsonplaceholder.typicode.com/

---

Before starting

• Fork the repos
• Clone the repos on your desktop
• Install all the dependencies
• Build it / run dev command to be sure everything is ok before starting the test.

Step 1

Follow this design

• Use react-bootstrap button for the head button
• Use react-bootstrap grid to create a grid with 3 col
• Use react-bootstrap ListGroup to create a placeholder

---

Step 2

• On click on the button, load the users api and the albums api
• Once the data loaded, change the button state
• Use react-bootstrap ListGroup to create a component for displaying the users data
  • For each user, list their albums
  • add "see" button

---

Step 3

• On click on an album button, load the first photo using photos api
  • Create Photo interface
• Use react-bootstrap Modal
• In the modal
  • display the picture,
  • the photo title
  • album title

Bonus step

• Write tests !

Once you've done

Send us the link of your forked repos

Good luck !

---

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.