The checkpoint is quite consequent, it's no big deal if you don't do everything before the deadline. Do your best, and most importantly HAVE FUN 😃
Before starting anything, your first mission is to clone this project, then create a branch with your lastname and firstname like so : lastname_firstname
You are starting the checkpoint from scratch ! So you need to install everything. You can either use :
In this step, you will create a web-app using React, that displays games from one of our API !
Please please, don't forget to make atomic commits with explicit messages 🙏
You can find the API documentation there :
If this one doesn't work, or is too slow, we also prepared some mirrors :
- You can wipe all the boilerplate jsx code in
App.jsx - Then, create a
<Header />component that displays a cool welcome message. - Pass a
nameprop to this component, to display your website name (react game if you don't have any idea)
commit
- Your next mission is to display the full list of games.
- Start by creating two new components
<GameList />and<Game />. - In the
<GameList />component, you will need to get the list from the API, and map it in your jsx. For each game you get from the API, display a<Game />component. - Your
<Game />component will need some props to display the game informations. There are plenty of informations you can use (name, rating, images, ...). Display them in the format of your choice !
commit
- Now that you are displaying all games, your next mission is to add a filter on this list.
- Add a
buttonto the<GameList />component, when you click on it, it will display only the games whose rating is above4.5. When clicking again on this button, the list should display all the games again.
again, don't forget to commit 😉
You are going to use react-router and react-router-dom
- Refactor your code to implement a router, with two routes :
"/"will display your<GameList />"/games/:id"will display the next component you are going to create
- Create a
<GameDetails />component, and use it in your/games/:idroute. - Then, you can add a navigation link (or button) to your
<Game />component that will redirect to the details page of this game. - The
<GameDetails />component will need to fetch data from the API and display detailed information about the current game (what you choose to display is up to you !)
you know what to do, right ? 😉
- To answer the quiz go to this application.
You really deserved a beer ! 🍻 (or your favourite drink)
If you have remaining time, here are some bonuses. As they are bonuses, they are totally optional, and you shouldn't do them if you haven't finished the previous steps.
<Game /> contains a <button> which allows you to remove a game from the list (doesn't need to remove it in the API).
There is a really cool library called react-query. You can try to refactor your API calls using this 😉
Integrate the CSS framework of your choice in your React App. If you don't know which one to choose, we can recommand Tailwind.
You can start by looking at the documentation about how to install it.
Be careful ! create-react-app, you will need to install CRACO, but every steps are explained here.