In this challenge, you'll be working with APIs and user input to create a dynamic form. Your task is to clone the provided GitHub repository and implement a form that interacts with any API of your choice. Here’s a breakdown of steps to complete this challenge:
-
Clone the Repository: Start by cloning the GitHub repository from the
api-playgroundrepository. This repository already contains some helpful libraries for completing the challenge. -
Choose an API: Select an API; This could be anything from a weather API to a public data API—whatever sparks your interest! The only requirement is that the API must accept at least query or ID parameters or a request body.
-
Create a Form Page:
- Implement a form in a new page in
routes/that allows users to input the necessary parameters for the API request. - Upon submission, your form should send requests to the chosen API based on user input and display the results on that same page.
You can use the provided
Input,Button, andResponseViewercomponents if you'd like! It might make your life a tiny bit easier.
- Implement a form in a new page in
-
Add to the Router: Integrate your new form page into the existing router structure of the application (look at
routes/router.tsx). You should see a link to your page inHomeafter doing this. -
Make a Pull Request: Once you've implemented the above steps, push your changes to a new branch and create a pull request for review.
Tue Nov 7 2024 23:59:59 GMT-0600 (Central Standard Time)
⏱️ Submission Time
[+20 points]≤ 1 day
[+15 points]≤ 3 days
[+10 points]≤ 5 days
[-1 point]∙ (your leaderboard position - 1)
✨ Extra Points ✨
- Using
async/awaitfor API requests(+20 points) - Configuring an axios object with a
baseURLand using theconfigparameter in your request(+15 points) - Custom page design to enhance user experience
(+10 points)
Submit your pull request to the main branch of the api-playground repository. Make sure to include a descriptive title and comments explaining your implementation.
Good luck, and happy coding!