Friday exercise: The API Hub part 2

In SP-2, we built a bunch of Javalin powered APIs. The time has come, where we soon will have to develop frontend applications that can be served by these APIs. We will do that in SP-3.

We assume that you want to use your own API, but you don’t have to. You might also want to use another team’s API. The goal of this Friday exercise is to have a web page that can display all APIs available. The deal is that you need to create a simple React application that will display and document your SP-2 API. Then the teachers will create a join webpage that will display all APIs available. A.k.a. the API Hub.

General Requirements

You should create and deploy (1 per team) a React application that can display:

1. The vison of the API. What is it about?
2. The endpoints of the API. In a table like this.
3. A link to the deployed API.
4. A link to the repository of the API. In case your student colleagues wants to see the code.
5. Any ideas for the frontend application that will use the API. It could be some mockups or a description of the application. Whatever you can come up with. It doesn’t have to be a lot, but take as a brainstorm.

Technical Requirements

The React application should be built with these technologies:

1. React Router. You should have at least three routes. A main page, a vision page, and an endpoints page. But feel free to add more.
2. Use Styled Components for styling.
3. Make the website responsive. Use media queries and flexbox/grid to make it look good on all devices.
4. Add a nice image to the main page. It could be a logo or something that represents the API. The image resolution should be 300x300 pixels. And the image format is png

Hand-in

• Deadline is Sunday at 20:00.

• Hand-in: On Moodle. You should hand in a link to the deployed React application. As soon as your deploy your website, you can hand it in. You can always update the website later on. That’s the beauty of CI/CD.

Review

Monday, we will have our regular review sessions. We will review the React applications and the APIs together and also discuss your SP-3 plans.

FAQ

Q: Should we do the assignment in our SP-2 teams?

A: Yes, that would be good. Only one team member needs to hand-in the solution.

• You can also do it individually. In that case, you should hand-in links to each your solution. There is a Moodle hand-in for each team, so you will need to hand in in the same place. It’s a text field, so you can just add the links to the different solutions.

Q: Do we have to use our own API for the SP-3?

A: No, you can either make a new API or use another team’s API. But you should at least have a plan for the API you want to use.

Q: What if we can’t deploy the webpage?

A: Then hand-in a link to the repository instead. But begin by trying to deploy the webpage as soon as you have your first version ready. Then you will have time to catch up.

Q: Can we work in other team constellations in SP-3?

A: Yes, you can. Sign up your team on Moodle here: SP-3: The Frontend Hub.