Here is a project based on nextjs and material-ui to toy a bit with react.
- Do not hesitate to use react ecosystem to answer our needs. There is no limitation.
- Our application is using material-ui. Take advantage of the documentation to get working code from examples.
Your new boss comes at your desk today. He says there is a lot of devs in the team right now, and each one of them is assigned to a squad. But he cannot keep up with who is in which squad.
He wants you to make an app allowing him to see developers and filter them by squad. Then, once you're done, he may come back to ask you for something extra: the ability to move a dev to another squad.
We can begin by getting developers from our backend and display them. Remember there is no restriction on what we may use in the react ecosystem!
The next step is to add a filter component. This could be checkboxes or a multiselect for example.
Finally, we need to give a way to change the squad of a developer. This could be done on a new page or in a modal, for example.
Our backend is plugged to a database with the following schema:
Our backend exposes a swagger found here. Let's summarizes the routes exposed:
| Route | Verb | Description |
|---|---|---|
| 💥 /squads | 🔹 GET | Retrieves all squads |
| 💥 /squads/{id}/devs | 🔹 GET | Retrieves all devs belonging to a squad |
| 💥 /devs | 🔹 GET | Retrieves all devs |
| 💥 /devs/by-squad | 🔸 POST | Retrieves devs belonging to a list of squads passed in the request body |
| 💥 /devs/change-squad | 🔸 POST | Moves a developer to another squad |