curtis-thomas / free-api-list-with-react

Open Source API List and Testing Tools

Free API List with React

Welcome to the Free API List with React project! This open source project aims to provide a comprehensive list of free APIs along with tools to test and explore them. The project is built using React, and it allows users to discover and learn about various APIs available for different purposes.

Features

API Listing

Explore a diverse selection of APIs spanning various types and applications, providing a comprehensive array of valuable services for your projects.

• Enjoy a user-friendly interface designed for effortless comprehension and usability, making it simple to navigate and explore the available APIs.
• Benefit from a categorized listing that streamlines the process of discovering the ideal API for your specific needs.
• APIs are classified based on application difficulty levels, ranging from beginner-friendly complexities to challenging applications, suitable even for experienced developers.

Easy access to APIs Documentation

Aiming to simplify the process of finding the documentation for a desired API, FREE API List provides the documentation right at the beginning of each API page, right above its description.

• Access the documentation with a single link that will direct you to the official API page.
• Obtain detailed information about each API more easily, including endpoints, request parameters, and response formats.

API Testing

Experience a streamlined testing interface that enables the execution of fundamental functionalities for each API.

• Effortless invocation of GET, POST, PUT, and DELETE functions.
• View responses in the JSON format provided by the API itself.
• Accessible Base URLs and Endpoints simplify and expedite the functionality testing process.

Live Demo

Explore the live demo of the Free API List with React project: Free API List

Contributing

Contributions are welcome and greatly appreciated! If you would like to contribute to the project by adding new APIs, improving documentatio or enchancing the testing tools, please follow the guidelines in the Contributing document.

License

This project is licensed under the MIT License.

Contact

If you have any questions, suggestions, or feedback, please feel free to reach out to the project maintainer.

---

Thank you for your interest in the Free API List with React project. We hope you find it useful and contribute to its growth and improvement!

free-api-list-with-react's Issues

Update Documentation in BoxApiInfo Component

Issue Title: Update Documentation in BoxApiInfo Component

Issue Description:
Ensure that the BoxApiInfo component's usage is well-documented, and add comments to improve code readability.

Tasks:

Review the component's documentation and comments.
Update and improve documentation where necessary.
Add comments to clarify the purpose of different parts of the code.
Acceptance Criteria:

The component's documentation is updated and accurate.
Code comments enhance code readability and understanding.

Good First Issue - Sanitize potential CryptoCurrency API's

Navigate to:

src/api/cryptocurrency/1Cryptocurrency.txt

Work through the links and read the API documentation.

Checklist for a pass:

• Free
• Does not require API key
• Does not require sign up

Fail:
-Any inappropriate content

Delete any which do not fit into the category.

Note at the top of the file the date you checked.

optional: add your GitHub profile as a signature

Have fun :)

Improve Accessibility of Header Component

Issue Title: Improve Accessibility of Header Component

Issue Description:
Ensure that the Header component is accessible to users with disabilities and can be interacted with using a keyboard and screen reader.

Tasks:

Add appropriate ARIA attributes and labels to the components within Header.
Test the component's accessibility with keyboard navigation and screen reader tools.
Acceptance Criteria:

The component is accessible to users with disabilities.
Keyboard navigation and screen reader usage work as expected with the component.

chore: Relocate Api testing tools to new dedicated folder

A new folder for all API testing tools has been created:

src/tools

all of the API testing tools need to be moved into this folder and the relevant import updated.

The tools are currently located in:

src/core/main

Please comment on this issue before beginning so I can assign it.

Thanks :)

Good First Issue - Add Gutendex API Page

Phase 1: File Creation

1.1 - Locate the following:

src/api/books/1Books.txt

locate the Gutendex link.

1.1 - Follow the hyperlink to read through the documentation and get an idea of the API usage.

1.2 - Create a file in the:

src/api/books folder named BooksGutendex.js

1.3 - Add the following code to the file (this is just a placeholder:

const BooksGutendex = () => {
  return (
    <Box>
    </Box>
  );
};

export default BooksGutendex;

---

Phase 2: Routing

2.1 - Locate the following:

src/App.js

2.2 - Identify the correct place to insert (Try and group with others in its category:

<Route path="/books/BooksGutendex" element={<BooksGutendex />} />

!!NOTE!!

Make sure to type the component and select from the dropdown <BooksGutendex/> and then select from the dropdown so the file import is automatically populated

!!NOTE!!

2.3 - Locate the following:

src/api/books/Books1Dash.js

2.4 - Add the following component below the closing /> of the last Btn Routing:

 <BtnRouting
          btnName="Gutendex"
          navigateTo="BooksGutendex"
          backgroundColor="#0077ba"
          textColor="white"
        />

---

Phase 3: Content

3.1 - Locate the following (file you made):

src/api/books/BooksGutendex.js

3.2 - Add the following code:

import { Box } from "@mui/material";
import BoxApiInfo from "../../core/main/BoxApiInfo";
import Endpoints from "../../core/main/Endpoints";
import BoxTest from "../../core/main/BoxTestCrud";
import NavBar from "../../core/main/navigation/NavBar";

const BooksGutendex = () => {
  return (
    <Box>
      <NavBar link="/###" route2="/###" />
      <Box>
        <BoxTest />
        <BoxApiInfo baseEndpoint="" />
        <Endpoints header="GET" endpoint="/" />
        <Endpoints
          header="GET"
          endpoint="/"
          description="/"
        />
      </Box>
    </Box>
  );
};

export default BooksGutendex;

3.3 - Add the base endpoint (found on the API site documentation)

3.4 - Add the endpoints (add extra components if there are more than 1)

3.5 - Test the functionality

4: Delete the link you used from the Txt file (To keep track of what is left to add)

Have Fun :)

Good First Issue - Add Met Museum API

Phase 1: File Creation

1.1 - Locate the following:

src/api/artDesign/1ArtDesign.txt

locate the Met Museum link.

1.1 - Follow the hyperlink to read through the documentation and get an idea of the API usage.

1.2 - Create a file in the:

src/api/artDesign
folder named

ArtDesignMetMuseum.js

1.3 - Add the following code to the file (this is just a placeholder:

const ArtDesignMetMuseum = () => {
  return (
    <Box>
    </Box>
  );
};

export default ArtDesignMetMuseum;

---

Phase 2: Routing

2.1 - Locate the following:

src/App.js

Find the route with path="/ArtDesignDash/ArtDesignEmojiHub"

2.2 - Input on the line below:

<Route path="/ArtDesignDash/ArtDesignMetMuseum" element={} />

!!NOTE!!

Make sure to type the component and select from the dropdown <### /> and then select from the dropdown so the file import is automatically populated

!!NOTE!!

2.3 - Locate the following:

src/api/artDesign/artDesign1Dash.js

2.4 - Add the following component below the closing /> of the last Btn Routing:

---

Phase 3: Content

3.1 - Locate the following (file you made):

src/api/artDesign/ArtDesignMetMuseum.js

3.2 - Add the following code:

import { Box } from "@mui/material";
import BoxApiInfo from "../../core/main/BoxApiInfo";
import Endpoints from "../../core/main/Endpoints";
import BoxTest from "../../core/main/BoxTestCrud";
import NavBar from "../../core/main/navigation/NavBar";

const ArtDesignMetMuseum = () => {
  return (
    <Box>
      <NavBar link="/###" route2="/###" />
      <Box>
        <BoxTest />
        <BoxApiInfo baseEndpoint="" />
        <Endpoints header="GET" endpoint="/" />
        <Endpoints
          header="GET"
          endpoint="/"
          description="/"
        />
      </Box>
    </Box>
  );
};

export default ArtDesignMetMuseum;

3.3 - Add the base endpoint (found on the API site documentation)

3.4 - Add the endpoints (add extra components if there are more than 1)

3.5 - Test the functionality

4: Delete the link you used from the Txt file (To keep track of what is left to add)

Have Fun :)

add: Documentation <GettingStarted /> Content

Populate the following component:

src/documentation/GettingStartedContent.js

This section should include:

Outline the steps needed to set up the project.

Explain how to run the project locally.

Provide a few simple examples demonstrating how to use the project.

Address common issues or errors that users might encounter during the setup process.

Encourage users to contribute to the project.

have fun :)

[Suggestiion] Add IP2Location.io API Under api/geocoding

We would like to propose the IP2Location.io API from https://www.ip2location.io for listing under api/geocoding.

Thank you.

Good First Issue - Update Header Content

Description

Update the header content to be more precise.

Also, clarify the button coloring system:

-Solid blue background indicated there are working API examples in that category
-white background means this category has not yet been populated

apply style guide - Navbar

Description
style navbar according to style guide (wip)

Expected Behavior
cosmetic changes; function unchanged

Contribution Opportunity
style navbar via css file? could open issue tree of moving inline styles to modular css files

Add detailed comments in BoxTestCrud.js explaining the code

Description
Add detailed comments in BoxTestCrud.js explaining the code

Expected Behavior
The BoxTestCrud.js will show detailed comments for anyone working on the code, to be able to understand the code.

Current Behavior
NA

Steps to Reproduce (if applicable)
NA

Screenshots (if applicable)
NA

remove: fullArray txt - Good First Issue

fullArray.txt is no longer in use and needs to be removed.

Using this link as a reference:

Github Guide

Locate the file:

src/fullArray.txt

Right-click, Delete.

have fun :)!

Good First Issue - Update Footer Styling

Description
Using the header as a reference, style the footer to look the same.

Add any placeholder content you see fit.

Good First Issue - Add Walltime API Page

Phase 1: File Creation

1.1 - Locate the following:

src/api/blockchain/1Blockchain.txt

locate the Walltime link.

1.1 - Follow the hyperlink to read through the documentation and get an idea of the API usage.

1.2 - Create a file in the:

src/api/blockchain folder named BlockchainWalltime.js

1.3 - Add the following code to the file (this is just a placeholder:

const BlockchainWalltime = () => {
return (


);
};

export default BlockchainWalltime;

---

Phase 2: Routing

2.1 - Locate the following:

src/App.js

2.2 - Identify the correct place to insert (Try and group with others in its category:

<Route path="/Blockchain/BlockchainWalltime" element={<BlockchainWalltime />} />
!!NOTE!!

Make sure to type the component and select from the dropdown <BlockchainWalltime /> and then select from the dropdown so the file import is automatically populated

!!NOTE!!

2.3 - Locate the following:

src/api/blockchain/Blockchain1Dash.js

2.4 - Add the following component below the closing /> of the last Btn Routing:

 <BtnRouting
          btnName="Walltime"
          navigateTo="BlockchainWalltime"
          backgroundColor="#0077ba"
          textColor="white"
        />

---

Phase 3: Content

3.1 - Locate the following (file you made):

src/api/blockchain/BlockchainWalltime.js

3.2 - Add the following code:

import { Box } from "@mui/material";
import BoxApiInfo from "../../core/main/BoxApiInfo";
import Endpoints from "../../core/main/Endpoints";
import BoxTest from "../../core/main/BoxTestCrud";
import NavBar from "../../core/main/navigation/NavBar";

const BlockchainWalltime = () => {
  return (
    <Box>
      <NavBar link="/###" route2="/###" />
      <Box>
        <BoxTest />
        <BoxApiInfo baseEndpoint="" />
        <Endpoints header="GET" endpoint="/" />
        <Endpoints
          header="GET"
          endpoint="/"
          description="/"
        />
      </Box>
    </Box>
  );
};

export default BlockchainWalltime;

3.3 - Add the base endpoint (found on the API site documentation)

3.4 - Add the endpoints (add extra components if there are more than 1)

3.5 - Test the functionality

4: Delete the link you used from the txt file (To keep track of what is left to add)

Have Fun :)

Good First Issue - Add Color Lovers API page

Phase 1: File Creation

1.1 - Locate the following:

src/api/artDesign/1ArtDesign.txt

locate the Color Lovers link.

1.1 - Follow the hyperlink to read through the documentation and get an idea of the API usage.

1.2 - Create a file in the:

src/api/artDesign
folder named

ArtDesignColorLovers.js

1.3 - Add the following code to the file (this is just a placeholder:

const ArtDesignColorLovers = () => {
  return (
    <Box>
    </Box>
  );
};

export default ArtDesignColorLovers;

---

Phase 2: Routing

2.1 - Locate the following:

src/App.js

Find the route with path="/ArtDesignDash/ArtDesignMetMuseum"

2.2 - Input on the line below:

<Route path="/ArtDesignDash/ArtDesignColorLovers" element={} />

!!NOTE!!

Make sure to type the component and select from the dropdown <### /> and then select from the dropdown so the file import is automatically populated

!!NOTE!!

2.3 - Locate the following:

src/api/artDesign/artDesign1Dash.js

2.4 - Add the following component below the closing /> of the last Btn Routing:

---

Phase 3: Content

3.1 - Locate the following (file you made):

src/api/artDesign/ArtDesignColorLovers.js

3.2 - Add the following code:

import { Box } from "@mui/material";
import BoxApiInfo from "../../core/main/BoxApiInfo";
import Endpoints from "../../core/main/Endpoints";
import BoxTestCrud from "../../tools/BoxTestCrud";
import NavBar from "../../core/main/navigation/NavBar";

const ArtDesignColorLovers = () => {
  return (
    <Box>
      <NavBar link="/###" route2="/###" />
      <Box>
        <BoxTest />
        <BoxApiInfo baseEndpoint="" />
        <Endpoints header="GET" endpoint="/" />
        <Endpoints
          header="GET"
          endpoint="/"
          description="/"
        />
      </Box>
    </Box>
  );
};

export default ArtDesignColorLovers;

3.3 - Add the base endpoint (found on the API site documentation)

3.4 - Add the endpoints (add extra components if there are more than 1)

3.5 - Test the functionality

4: Delete the link you used from the Txt file (To keep track of what is left to add)

Have Fun :)

Style: Remove hover effect from <AdvancedBoxTestCrud /> Btn - Good First Issue

Navigate to:

src/tools/AdvancedBoxTestCrud

The Fetch Button has hover effect styling added by default. Remove the styling to be similar in look to <BoxTestCrud />

Create Docs Page Skeleton

style: Improve layout and responsiveness of <Main /> - Good First Issue

Refer to the images below,

Update:

src/core/main/BtnRouting.js

and

src/core/main/Main.js

To resolve the following issues:

Button size inconsistent on mobile view

and bad layout on Desktop view:

The project uses React Js

https://react.dev/

and Material UI:

https://mui.com/

Let me know if you would like to be assigned this :)

Improve Routing Meathod to allow for future expansion.

Review and update the current routing method to allow for future growth.

add: Documentation Reference Guide Section Content (Design Specialist Required)

This is a big job suited for someone with solid design and color theory knowledge.

Create for the project, a full color and styling theme.

Then document it using the following:

src/documentation/reference guide/*

Due to the significance of this, please comment before beginning to avoid overlap, and then a person can be assigned.

The color theme should take inspiration from the technologies we are using for the project:

• GitHub
• React JS
• Material UI

Thanks for reading :)

Good First Issue - Sanitize Potential Anime API's

Navigate to:

src/api/anime/1AnimeApi.txt

Work through the links and read the API documentation.

Checklist for a pass:

• Free
• Does not require API key
• Does not require sign up

Fail:
-Any inappropriate content

Delete any which do not fit into the category.

Note at the top of the file the date you checked.

optional: add your GitHub profile as a signature

Have fun :)

Update Page Title to 'Free API List'

Issue Title: Update Page Title to 'Free API List'

Issue Description:
The current page title for our project is 'Free API List with React,' and we want to make it more concise and descriptive by changing it to 'Free API List.'

Tasks:

Modify the title tag in the HTML code to read as follows: <title>Free API List</title>.
Acceptance Criteria:

The page title in the HTML code has been updated to 'Free API List.'
Additional Information:
Please ensure that you make this change in the provided HTML code and test to confirm that the new title displays correctly in the browser. Make sure not to introduce any other changes or errors in the code while making this update.

Enhance Styling of Header Component

Issue Title: Enhance Styling of Header Component

Issue Description:
The styling of the Header component can be improved to enhance its visual appeal and user experience.

Tasks:

Review and update the Material-UI styles applied to the component.
Adjust margins, padding, or add styling enhancements for a more polished appearance.
Acceptance Criteria:

The component has improved Material-UI styling that enhances its visual appeal.
The component looks more appealing and well-structured.

Update Header Text to "Free API List"

Issue Title: Update Header Text to "Free API List"

Issue Description:
The text "FAR" in the header of the application should be updated to "Free API List" for clarity and to better represent the purpose of the application.

Tasks:

Locate the text "FAR" in the Header component.
Replace the text "FAR" with "Free API List."
Acceptance Criteria:

The text in the header is updated to "Free API List."
The updated text is correctly displayed in the application header.

Implement Default Props in BtnRouting Component

Issue Title: Implement Default Props in BtnRouting Component

Issue Description:
Set default values for the backgroundColor, textColor, and amount props in the BtnRouting component to provide a better default user experience, considering Material-UI styles.

Tasks:

Define default values for the backgroundColor, textColor, and amount props.
Update the component to use these default values when the props are not provided, considering Material-UI styling.
Acceptance Criteria:

Default values are defined for all relevant props.
The component works correctly with default props, including Material-UI styles.

add: favicon to the project - Good First Issue

This task is great for someone with an eye for design.

Create a favicon for the project to use, the design should be inspired by our stack:
-Github
-React
-MaterialUI
-API's

Then delete the current favicon:

build/favicon.ico

and upload the replacement using the same file name:

favicon.ico

And place it in the same folder.

Have fun :)

Write Unit Tests for BoxApiInfo Component

Issue Title: Write Unit Tests for BoxApiInfo Component

Issue Description:
Create unit tests for the BoxApiInfo component to ensure its functionality is correct and robust.

Tasks:

Set up a testing environment using a testing framework like Jest.
Write unit tests to cover various aspects of the BoxApiInfo component's behavior.
Acceptance Criteria:

Unit tests for the component are written and pass successfully.
Test coverage adequately checks the component's functionality.

Customize the Dark Theme

Issue Title: Customize the Dark Theme

Issue Description:
Enhance the customization options for the dark theme to make it more flexible and user-friendly.

Tasks:

Review the existing dark theme configuration.
Identify areas where customization options can be added, such as additional color choices or typography variations.
Implement these customization options in the theme.
Acceptance Criteria:

Users can easily customize the dark theme by adjusting colors or typography.
The customization options are well-documented for users.

Improve Accessibility of BoxApiInfo Component

Issue Title: Improve Accessibility of BoxApiInfo Component

Issue Description:
Ensure that the BoxApiInfo component is accessible to users with disabilities and can be interacted with using a keyboard and screen reader.

Tasks:

Add appropriate ARIA attributes and labels to the components within BoxApiInfo.
Test the component's accessibility with keyboard navigation and screen reader tools.
Acceptance Criteria:

The component is accessible to users with disabilities.
Keyboard navigation and screen reader usage work as expected with the component.

Refactor BtnRouting Component for Improved Code Structure

Issue Title: Refactor BtnRouting Component for Improved Code Structure

Issue Description:
Consider refactoring the BtnRouting component for better code organization, readability, and maintainability while taking into account the use of Material-UI.

Tasks:

Review the component's code and identify areas for improvement.
Refactor the component if necessary, breaking it into smaller, more manageable functions or components while adhering to Material-UI styling guidelines.
Acceptance Criteria:

The component's code is better organized and more readable.
The refactor improves code maintainability, considering Material-UI styling.

Enhance Accessibility and Add Keyboard Navigation Support in Hero Component

The Hero component is a key part of our project's user interface, offering an entry point to the different areas of our API directory. To ensure that our site is accessible to all users, including those with disabilities, we need to improve the accessibility of this component. Additionally, adding keyboard navigation support will make our website more user-friendly, especially for users who rely on keyboard-only navigation.

Tasks:

Ensure all interactive elements in the Hero component are accessible using the keyboard (Tab key navigation).
Add proper ARIA labels to the GitHub star button and the Docs button for screen reader users.
Implement focus styles for the buttons when they are navigated to using the keyboard.
Optional: Conduct a basic accessibility audit of the component using a tool like Lighthouse or axe Accessibility Checker.
Skills Required:

Familiarity with React and JavaScript
Basic understanding of web accessibility standards (WCAG)
Experience with or willingness to learn about ARIA (Accessible Rich Internet Applications) labels
Good First Issue: Yes

Mentorship:
We will provide guidance on how to approach accessibility issues and are available for questions anytime. Beginners are welcome as this is a great opportunity to learn about web accessibility.

Additional Resources:

Web Content Accessibility Guidelines (WCAG)
Introduction to ARIA
React Official Documentation on Accessibility
Feel free to ask questions and seek assistance in the issue comments if you are unsure about anything or need help getting started. We're here to support your contribution journey!

Implement Localization Support in BtnRouting Component

Issue Title: Implement Localization Support in BtnRouting Component

Issue Description:
Enable the BtnRouting component to support translations into different languages for text content like btnName while considering React.js and Material-UI.

Tasks:

Implement localization support in the component, ensuring compatibility with React.js and Material-UI.
Provide guidance on how contributors can add translations for different languages within the context of React.js and Material-UI.
Acceptance Criteria:

The component allows text content to be translated into different languages, considering React.js and Material-UI.
Documentation or instructions for adding translations are available, with consideration for React.js and Material-UI integration.

Good First Issue - Sanitize potential Calendar API's

Navigate to:

src/api/calendar/1Calendar.txt

Work through the links and read the API documentation.

Checklist for a pass:

• Free
• Does not require API key
• Does not require sign up

Fail:
-Any inappropriate content

Delete any which do not fit into the category.

Note at the top of the file the date you checked.

optional: add your GitHub profile as a signature

Have fun :)

Write Unit Tests for BtnRouting Component

Issue Title: Write Unit Tests for BtnRouting Component

Issue Description:
Create unit tests for the BtnRouting component to ensure its functionality is correct and robust, considering its integration with React.js and Material-UI.

Tasks:

Set up a testing environment using a testing framework like Jest.
Write unit tests to cover various aspects of the BtnRouting component's behavior, taking into account React.js and Material-UI components.
Acceptance Criteria:

Unit tests for the component are written and pass successfully.
Test coverage adequately checks the component's functionality, including interactions with React.js and Material-UI components.

Good First Issue - Create <Documentation /> component

Create a folder and file in src:

documentation/Documentation.js

and create the skeleton for a documentation page.

This will later be accessed through a link that will be added to the header or footer.

Update Documentation and Comments in BtnRouting Component

Issue Title: Update Documentation and Comments in BtnRouting Component

Issue Description:
Ensure that the BtnRouting component's usage is well-documented and add comments to improve code readability, considering React.js and Material-UI.

Tasks:

Review the component's documentation and comments.
Update and improve documentation where necessary, taking into account React.js and Material-UI best practices.
Add comments to clarify the purpose of different parts of the code, considering React.js and Material-UI.
Acceptance Criteria:

The component's documentation is updated and accurate, considering React.js and Material-UI.
Code comments enhance code readability and understanding, taking into account React.js and Material-UI best practices.

Good First Issue - Create a <Tools /> Component

Description

Create a component that will be used as a page to index all of the API testing tools for easy reference and usage.

Create Advanced CRUD Api Test Box Component

Description

Using the current CRUD test box component. Create an advanced version that can offer more customization to the requests.

Improve Img Api Test Box

Description

Update the current:

BoxTestImg.js

to be more robust and handle a wider range of image results.

Enhance Accessibility of BtnRouting Component

Issue Title: Enhance Accessibility of BtnRouting Component

Issue Description:
Ensure that the BtnRouting button component is accessible to users with disabilities and can be interacted with using a keyboard and screen reader, while considering Material-UI components.

Tasks:

Add appropriate ARIA attributes and labels to the Material-UI button component.
Test the button's accessibility with keyboard navigation and screen reader tools, taking into account Material-UI's accessibility guidelines.
Acceptance Criteria:

The button is accessible to users with disabilities.
Keyboard navigation and screen reader usage work as expected with Material-UI components.

Good First Issue - Improve NavBar Styling

Description

Keep the functionality of the Nav Bar exactly the same.

But improve the styling to match the overall feel, a professional easy-to-use tool.

Update Documentation in Header Component

Issue Title: Update Documentation in Header Component

Issue Description:
Ensure that the Header component's usage is well-documented, and add comments to improve code readability.

Tasks:

Review the component's documentation and comments.
Update and improve documentation where necessary.
Add comments to clarify the purpose of different parts of the code.
Acceptance Criteria:

The component's documentation is updated and accurate.
Code comments enhance code readability and understanding.

Good First Issue - Improve README.md project Img

Update the current ReadMeImg.png to show off the project better.

Enhance Styling of BtnRouting Button

Issue Title: Enhance Styling of BtnRouting Button

Issue Description:
The styling of the BtnRouting button component can be improved to enhance its visual appeal and user experience, especially considering the use of Material-UI.

Tasks:

Review and update the Material-UI styles applied to the button.
Adjust padding, font size, or add hover effects for a more polished appearance using Material-UI styles.
Acceptance Criteria:

The button has improved Material-UI styling that enhances its visual appeal.
The button looks more appealing on hover.

Enhance Styling of BoxApiInfo Component

Issue Title: Enhance Styling of BoxApiInfo Component

Issue Description:
The styling of the BoxApiInfo component can be improved to enhance its visual appeal and user experience.

Tasks:

Review and update the Material-UI styles applied to the component.
Adjust margins, padding, or add styling enhancements for a more polished appearance.
Acceptance Criteria:

The component has improved Material-UI styling that enhances its visual appeal.
The component looks more appealing and well-structured.

Style: Remove hover effect from <BoxTestImg /> Btn - Good First Issue

Navigate to:

src/tools/BoxTestImg.js

The Fetch Button has hover effect styling added by default. Remove the styling to be similar in look to <BoxTestCrud />

add: Documentation <Overview /> content

Refer to README to populate the following component:

src/documentation/Overview.js

Include the following:

Project Description

List the main features

Briefly outline the steps required to install

State the license

have fun :)

add: unit test to API testing tool

Using a method of your preference, add an appropriate test and documentation for:

src/tools/BoxTestCrud.js

Please comment if you are interested so I can assign :)

Add Favicon Icon

Issue Title: Add Favicon Icon

Issue Description:
We currently don't have a favicon icon for our project, and it would be great to have one to improve the user experience and brand recognition. Favicon icons are those tiny icons that appear in browser tabs and bookmarks, making it easier for users to identify our project.

Tasks:

Create a favicon icon (usually a 16x16 or 32x32 pixel image).
Add the favicon image to the project's root directory (e.g., as favicon.ico).
Update the HTML templates to include the favicon in the section of all pages. You can use the tag to specify the favicon's location.

Acceptance Criteria:

The favicon icon is visually appealing and represents our project well.
The favicon is added to the project's root directory.
The HTML templates have been updated to include the favicon using the tag.

Additional Information:
If you have any design ideas or specific requirements for the favicon, please provide them here. Otherwise, our contributors can use their creativity to design a suitable favicon for the project.

Good First Issue - Create and populate theme.js file

Description

Create and populate theme.js file for the project to reference.

This should be made with material UI in mind.