Add a Free API Page To the Site

[Curtis-Thomas]

NOTE: This is an ongoing issue that multiple people can act upon.

Prerequisite:

Fork repo, instructions can be found here
https://www.youtube.com/watch?v=8lGpZkjnkt4

Step 1 - Choose the API to add.

The API Requirements:

1 - Free to use
2 - No Key is required

You can check out the current backlog through src\api\category\*.txt

Or you can find another API to add.

Step 2 - Test.

Before making a page for the API, use the testing tools to be sure the call works, currently the standard testing box that is used is CRUD Testing, using the GET request.

Paste the base URL, and endpoint and then fetch to check the response:

https://freeapilist.com/Tools

Step 3 - Page file creation

Locate the correct category for the API you wish to upload.

For example, a book API would be located under src\api\books.

To create a file, right-click the folder, then new file:

The naming convention is Category Api Name .js

Step 4 - Page content creation

The API pages are laid out with the following:

Navigation bar
API Info
Testing Box
Api base endpoint
API endpoints

You can use a page that has already been made as a template such as src\api\books\BooksPoetryDb.js.

Name the page component the same as the js file, and export default as the same name.

The Layout should also be the same as other pages:

Step 5 - Routing

Now the page has been created, the routing needs to be made so it can be found through the navigation.
The following places need to have the routing added:

App.js
Category Dashboard

1. Locate src\App.js
2. Add import statement for the page you added, for example, PoetryDB in the category books would be import BooksPoetryDB from "./api/books/BooksPoetryDb";

3. Go to line 138 to find the routeConfig (this is where all of the routing info is held)
4. Locate the category you are working on
5. Add a component as a path, use the same naming convention as the other paths /*Category*Dash/*PageName*:

Step 6 - Add page to category dash

1. Locate category dash, for books the path is src\api\books\Books1Dash.js, if the dash has a grid already set then copy and paste an already made CardRouting and replace the information with the API you are adding:

/

If the grid is not setup, use src\api\books\Books1Dash.js as a template and add the grid code:
<Grid container spacing={2} sx={{ p: 3 }}> {/* Card for ABiblia Digital */} <Grid item xs={12} sm={6} md={4} lg={3}> <CardRouting cardName="" navigateTo="" tags="" description="" difficulty="" /> </Grid> </Grid>
Also, make sure to import the components at the top of the page:

import { Box, Grid, useTheme } from "@mui/material"; import NavBar from "../../navigation/NavBar"; import CardRouting from "../../components/CardRouting";

Step 7 - Test.

Open a new terminal :

Run the command npm start

Use the URL http://localhost:3000/ on your browser. Check your page is showing on the category screen

Test an API call:

If everything is working then use the VSCode terminal to run the code npm run build:

The build should compile successfully which means everything went well:

Or return a warning that needs to be fixed:

for this example, we can see the file name, line, and the description.
To fix we simply need to remove the unused import:

Before Fix:

After fix (Typography import removed):

Then save and rerun npm run build and repeat the debugging process until the compile is successful.

Step 8 - Pull request

Now everything works, it's time to perform a pull request to the repository, requesting to add your code to the project.

Through the terminal use the command git add.:

And then add a git commit message using git commit -m "add: *CategoryPagename:

Next refer to the GitHub pull request video again to push to the origin:
https://youtu.be/8lGpZkjnkt4?si=mtBYOkQ52O4lnd3G&t=51

[swayamvasavada]

I would like to work on this issue, But Unfortunately the given file location src\api\category*.txt is not found.

[Curtis-Thomas]

@swayamvasavada Hi, and welcome!

Sorry, that was meant to indicate each category folder has its dedicated Txt file with the relevant links inside