exifly/apivault

Your gateway to a world of public APIs.

apivault's Issues

Card Badges Rendered Incorrectly on Mobile Devices

Describe the bug
Card Badges Rendered Incorrectly on Mobile Devices

To Reproduce

1. Go to mobile view
2. Search for 'apache superset'

Expected behavior
The tag should be inside the card

Screenshots

Desktop (please complete the following information):

• OS: Mac Os
• Browser Chrome

Menu list on mobile devices clicking weird animation

Describe the bug
when we are responsive mode(mobile view), by clicking dark or white mode button they change position of list.

Expected behavior
disable animation(only mobile view) and add background color when we click one of menu items.

Screenshots

animation.disable.in.mobile.view.mp4

Smartphone (please complete the following information):

• Device: All
• OS: All
• Browser All

The search icon in the searchbar is not centered

Describe the bug
The search icon in the searchbar is not centered

To Reproduce

1. Open the website using the mobile view

Screenshots

Smartphone :

• Device: [Iphone 12]
• OS: [Ios 16]
• Browser [safarii]

Add contributors link in the footer

Is your feature request related to a problem? Please describe.
Remove "Coded by gdjohn4s & flavioad" In the footer.

Describe the solution you'd like
The new text will be "Coded by those wonderful people "

Hamburger menu on mobile doesn't go all the way down

Describe the bug
As sbmo said on Reddit, there's a small bug on mobile, on the hamburger menu overlay thing: scrolling to the bottom doesn't go all the way down

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Smartphone:

• Device: All
• OS: all
• Browser All

BACKEND - Implement a "Trending categories" endpoint

Is your feature request related to a problem? Please describe.

As a user of the APIVAULT website, I would like to be able to see a list of the top 10 trending categories of APIs. This would help me to discover new APIs that are popular among other users and would be useful for my projects.

Describe the solution you'd like

I would like to see a new API endpoint added to the APIVAULT backend that returns a list of the top 10 trending categories. For now, this API can simply read a static file called "trending_categories.json" that contains the top 10 categories, but later we can implement a more complex system that tracks API usage and updates the trending categories dynamically.

The endpoint should be a GET request to a URL like "/api/category/trending". The response should be a JSON object with the following structure:

{
    "trending_categories": [
        {
            "category_name": "Blockchain",
            "api_count": 250
        },
        {
            "category_name": "Anime",
            "api_count": 200
        },
        ...
    ]
}

The category_name field should contain the name of the category, and the api_count field should contain the number of APIs in that category.

Additional context
Add any other context or screenshots about the feature request here.

Change theme to save to browser storage

Problem
Currently, when the user loads into the site and changes the theme, it will only stay saved for the session. If the user refreshes or leaves the site, it will not save their theme choice or choose based off their device. Also, when loading in, there is a transition done in CSS that I'm wondering if we should change as it might unnecessarily transitioning elements that don't need it

Solution
I would like to change the theme toggle to save their choice to browser storage or choose based on their system preference.

Screenshots
Theme not saving on refresh (Before theme change and refresh there are a few black flashes, that's just my screenrecorder),

Transition all being put on all elements, while not being detrimental, I feel it makes user experience feel a bit jarring when first loading into the site.

no links on mobile nav "Repository" and "Sponsor" items

Problem
Currently, there is no link for the "Repository" and "Sponsor" options in the mobile nav bar.

Solution
Add links to the "Repository" and "Sponsor" nav items in the mobile nav dropdown.

I've already made a PR because I feel it's a simple fix.

Screenshots
"Repository" and "Sponsor" options below in mobile navbar.

Adjust the website to the top

Before

After

Is your feature request related to a problem? Please describe.
Is not considered a problem.

Describe the solution you'd like
I think the website could benefit from moving content higher since it will create more space and look better in my opinion.

Additional context
This is my first time doing this so i apologize in advance if i did something wrong. Cheers

docker-compose up doesn't work on windows systems

Describe the bug

The bug occurs when running docker-compose on Windows systems. After running the command, various errors are generated as shown in the following screenshot.

To Reproduce

To reproduce the bug, follow these steps:

• Run the command docker-compose up

Expected behavior

The compose should launch the start.py file and start the backend.

Screenshots

How should be:

Desktop (please complete the following information):

• OS: [Windows 10/11]

Improve navbar UX

Is your feature request related to a problem? Please describe.
hsiwoenfhsopwon15 on reddit
The nav bar is a bad ux imo - it opens all the way to the edge of the screen.

Describe the solution you'd like
Solution : Have the nav bar 75% wide with a slight blur in the background to make the nav stand out more

Describe alternatives you've considered
Of course you can propose any solution you like

Implement a load

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Little transition on cards hover effect

Is your feature request related to a problem? Please describe.

No, it is a modification related to the hover effect on a card's exit. The difference may seem imperceptible, but I believe that this small difference can make the user experience better.

Describe the solution you'd like

Currently, when the user moves the mouse from one card to another or from a card to an element outside the cards, the hover effect disappears suddenly. With this modification, the hover effect would disappear through a transition. For this modification, we have tried various effects and think that this is the one to use:

• transition: background 0.2s ease;

Concept video

Updated the README.md

Hey! I really liked the idea and this project.
I am currently a beginner to web development and make non-code contributions on GitHub.

Changes made:

• Added a H1 to the top for more impact
• Added emojis to subheadings
• Added cool badges for frameworks
• Improved the contributing section
• Improved the support section
• Improved the LICENSE Section

Do let me know if the PR is accepted or if I have to make some changes

Regards!!!

Hover on sidebar element don't redirect on routes properly

Describe the bug

When hovering over an item in the sidebar, the associated link is only clickable if the mouse pointer passes over the text and not over the entire element itself.

To Reproduce:

Expected behavior:

The user should be able to click on any hover of the item on the sidebar and go to the desired address without necessarily having to hover over the text.

Desktop (please complete the following information):

• Browser [Tested on: Safari, Brave, Edge]

Modern logo request

Is your feature request related to a problem? Please describe.

The current logo for the website is outdated . It does not match the minimalistic design of the rest of the website and needs to be updated to provide a more modern look and feel.

Describe the solution you'd like

We would like a new, minimalistic logo that matches the design of the website. The logo should be simple and clean, yet visually appealing and easy to recognize. It should be easy to reproduce in different sizes and on different mediums, such as on social media platforms and printed materials.

Describe alternatives you've considered

We have considered keeping the existing logo and making minor adjustments, but we believe that a complete redesign is necessary to achieve the desired look and feel.

Cards on website not having the same height

Describe the bug
The cards on the website are not displaying at the same height, resulting in an uneven appearance of the layout.

To Reproduce
Steps to reproduce the behavior:

1. Click on the 'CALENDAR' category
2. The bug is visible in the first row

Expected behavior
The cards on the same row should display at the same height, creating an even appearance of the layout.

Screenshots

Desktop (please complete the following information):

• OS: [MacOS]
• Browser [edge]

Change card attributes color

Screenshot

Describe the feature
I would like to modify the color beacause, as sbmo said on reddit, the red tags on cards can be associated to errors or danger.
So i would change the color using one more neutral.

Show website version on footer

Is your feature request related to a problem? Please describe.
No, it's just a Feature

Describe the solution you'd like
We want to show the software version on the website footer.
It should be dynamic to the package.json version

Screenshot

[APIFT]

API Information

API Name: DigiDates.de
Description: Open Rest API for various date and time calculations
Category: Calendar
What Auth is used (ex: Api Key): none
HTTPS: true
CORS: true
Api Link: https://digidates.de/en/

Why we should Integrate your api on our listing?

Its free and hopefully useful

Thanks for the contribution ❤️

[APIFT]

API Information

API Name: sumo-api
Description: a free database of grand sumo statistics from 1958 to today
Category: sport
What Auth is used (ex: Api Key):
HTTPS: true
CORS: true
Api Link: https://www.sumo-api.com/api

Why we should Integrate your api on our listing?

It's literally the only grand sumo database with an API

Thanks for the contribution ❤️

Add animated gradient border effect to search bar

Is your feature request related to a problem? Please describe.

Currently, the search bar on our website lacks visual interest and could benefit from an additional design element to make it stand out more. Adding an animated gradient border effect to the search bar would not only make it more visually appealing, but it would also draw attention to the search bar and make it more likely for users to engage with it.

Describe the solution you'd like

I would like to request the addition of an animated gradient border effect to the search bar, following the guide provided at https://www.julienthibeaut.xyz/blog/create-animated-gradient-borders-with-css. This effect would involve adding a gradient border to the search bar that would animate and change colors over time, creating a dynamic and eye-catching effect.

Implement a "load more" button in the random APIs page

Is your feature request related to a problem? Please describe.

As a user of the website, I would like to be able to see more than just 9 random APIs on the homepage. It would be helpful to have a "load more" button at the bottom of the page that, when clicked, would add 9 new random APIs to the list.

Describe the solution you'd like

I would like to see a "load more" button at the bottom of the APIVAULT homepage. When clicked, this button would use the endpoint in randomApis.js to dynamically load 9 new random APIs and add them to the bottom of the existing list. The button would continue to load additional APIs as long as they are available.

Contributors route didn't appear in mobile view

Describe the bug
On mobile, the route to the contributor page is not displayed.

To Reproduce
Steps to reproduce the behavior:

1. Click on the Hamburger menu

Expected behavior
The link to the contributor page should appear correctly under the Menu along with the other options.

Screenshots

Smartphone:

• Device: iPhone 13 Mini
• Browser: Safari, Edge, Brave

Implement a "load more" button in the random APIs page

Is your feature request related to a problem? Please describe.

As a user of the website, I would like to be able to see more than just 9 random APIs on the homepage. It would be helpful to have a "load more" button at the bottom of the page that, when clicked, would add 9 new random APIs to the list.

Describe the solution you'd like

I would like to see a "load more" button at the bottom of the APIVAULT homepage. When clicked, this button would use the endpoint in randomApis.js to dynamically load 9 new random APIs and add them to the bottom of the existing list. The button would continue to load additional APIs as long as they are available.

To use the local server your .env file in the frontend folder should look like this:

VITE_APP_MODE=dev
VITE_API_VAULT_ENDPOINT=http://localhost:5001

The functon to call the api you need is getApiData inside randomApis.js.

If you need more information feel free to ping me on this issue

Display trending categories in home page

Is your feature request related to a problem? Please describe.

The homepage of our website currently does not have a section that showcases the trending categories. This can make it difficult for users to quickly discover new and popular APIs, and may result in them missing out on valuable resources.

Describe the solution you'd like

I would like to add a section on the homepage that displays the trending categories.

##Additional context
The endpoint to retrive the trending categories is '/api/categories/trending'

Add scale animation on hover on cards

Describe the solution you'd like

This feature is simply adding a transition effect for the hover state of cards on the website. Since the effect for global elements has been removed, the one for cards is also gone, but I think it would be visually pleasing, so it could be nice to add it back at least just for the cards.

Component causing horizontal scrolling on mobile version

Describe the bug

A component is adding too much right padding or margin in the mobile version, causing horizontal scrolling and a poor user experience.

To Reproduce

1. Open the website on a mobile device.
2. Scroll to the left

Expected behavior

The component should have appropriate padding and margin that fits within the screen width of the mobile device, and does not cause horizontal scrolling.

Screenshots

Smartphone

Device: [e.g. iPhone SE]

Additional context

The issue affects the mobile version of the website only. The component causing the issue needs to be identified and modified to have appropriate padding and margin for the mobile version.

Change a link on footer for software version string

Is your feature request related to a problem? Please describe.

No, it's just a modification related to the user experience.

Describe the solution you'd like

It would be more appropriate if the software version link points directly to the release changelog on the repository.

Screenshot

Clearing card api list when search input is not found.

Is your feature request related to a problem? Please describe.
Currently, whenever the search input is not found. we get no found title but the list is still there. so the people get confused whether the list is still there when search input is not found.

Describe the solution you'd like
When the search input is not found, we may remove cards. but if the search are correctly, the output list will be display.

Allowing 3-character searches in searchbar for better user experience

Is your feature request related to a problem? Please describe.
Currently, the search bar in the project has a minimum character limit of four, which means that any search query with fewer than four characters will not return any results. However, this can be problematic for users who are searching for specific terms or phrases that contain fewer than four characters.

For example, the term "NBA" is an important keyword that users may want to search for, especially in a project related to basketball. However, because "NBA" has only three characters, the search bar will not return any results for this query.

Describe the solution you'd like
By lowering the minimum character limit to three, users would be able to search for terms like "NBA" and other short keywords that are relevant to their searches. This would improve the usability and efficiency of the search feature and provide a better user experience overall.

Trending categories without border color

Is your feature request related to a problem? Please describe.

No, it's a modification related to the website interface to improve user experience.

Describe the solution you'd like

We would like to remove the border from the trending categories.

Screenshot

What do you think? Is it better like this or with colored borders?

Misalignment of "Trending category" section and APIs section on Desktop version.

Describe the bug

The "Trending" category section is not aligned with the APIs section, causing a misalignment issue.

To Reproduce

1. Open the website on any device.
2. Navigate to the homepage.
3. Observe the "Trending" category section and the APIs section.

Expected behavior

The "Trending" category section should be aligned with the API card section.

Screenshots

Desktop

OS: [MacOs]
Browser: [Chrome]

Additional context

This issue affects the desktop version of the website.

The "TRENDING" title should not be visible on mobile

Describe the bug

The title "TRENDING" is visible on the mobile version, and it should be hidden.

##To Reproduce

1. Open the website on a mobile device.
2. Navigate to the homepage.
3. Observe that the title "TRENDING" is visible.

Expected behavior

The title "TRENDING" should not be visible on the mobile version of the website.

Screenshots

Desktop

Smartphone

Device: [iPhone 12]
OS: [e.g. iOS 16.4]

Additional context

This issue affects the mobile version of the website only. The title "TRENDING" should be hidden on the mobile version to provide a consistent user experience across all devices.

[APIFT]

API Information

API Name: SpamPatrol
Description: Intent-based spam detection for web forms.
Category: Spam Detection, Anti-spam
What Auth is used (ex: Api Key): API Key (optional)
HTTPS: true
CORS: true
Api Link: https://spampatrol.io/docs

Why we should Integrate your api on our listing?

SpamPatrol's API can be used as part of any form processing code to reduce spam. Our
analysis works to reveal the intent of submitted messages and use that information to drive
the returned values that can then be used as part of spam/ham handling.

Thanks for the contribution ❤️

Change the color of the tags to a more 'netrual' one!

Is your feature request related to a problem? Please describe.
In web design, red is commonly associated with warning, danger, or error messages. Using red tags on a website can be counterproductive in some cases.

Describe the solution you'd like
Neutral colors black, grey, or white are better than red for tags on a website because they have better readability, create less visual noise, and are more versatile.

Keep in mind that the color of the tag should be set as a variable both for dark and light mode

Api count return a wrong number

Describe the bug

The API counter on the backend return wrong number.

Screenshot

As you can see here the API Fetched are 1426 but it should be 1429 due to the recently added APIs.

To Reproduce

Use a tool like postman to call the count endpoint
or use curl on terminal.
curl -X GET http://localhost:5001/api/count

Expected behavior

It should show the exact count of entries on entries.json file.

Generate sitemap.xml properly

Is your feature request related to a problem? Please describe.

Yes, this feature is related to the sitemap.xml that is not generated with the current vue.js configuration.

Describe the solution you'd like

The solution that I would like to propose is to use the sitemap-webpack-plugin plugin and configure the routes in the vite.config.js file.
By doing so, during the project build, it should also create the sitemap.xml file, which is necessary for properly indexing the site on search engines.

Reduce Top margin between navbar and hero

Describe the problem

The top margin between the navbar and the hero section on the website is too large, resulting in an unnecessary amount space at the top of the page. This creates an imbalance in the layout and detracts from the overall user experience.

Solution

We would like to reduce the top margin between the navbar and the hero section to create a more balanced and visually appealing layout. By decreasing the amount of space at the top of the page, we can draw more attention to the content and make it easier for users to engage with the site.

Make the text on the navbar lighter

Is your feature request related to a problem? Please describe.

No, it is a modification to improve the user experience and text readability on the navbar in Dark mode.

Describe the solution you'd like

After conducting various tests, I believe that the best color for the text on the navbar is:

• #e7e7e7

Unlike the original color, which is a bit darker, this color provides a more immediate reading of the various elements on the navbar.

Before

After

Describe alternatives you've considered

An alternative would be to make it even lighter, but it could be bothersome due to the contrast with the dark background.

Some favicon request returns 404 Not found

Describe the bug

Some requests to obtain the website's favicon from the API return a 404 error, which results in the default low-resolution favicon being displayed and triggers an error in the browser console.

To Reproduce

Simply open the console and navigate to the website.

Expected behavior

There should be no 404 errors in the favicon requests.

Screenshots

The api counter in the trending categories should be grey

Is your feature request related to a problem? Please describe.
I think that changing to color of the counter in the trending categories could increase the UX of the website.

Describe the solution you'd like
The color should be #8b8b8b

[APIFT]

API Information

API Name: Official Carbon Intensity API
Description: API about carbon produced by National Grid.
Category: Enviromental, Foverment
What Auth is used (ex: Api Key): None
HTTPS: true
CORS: false
Api Link: api.carbonintensity.org.uk docs

Why we should Integrate this api on our listing?

• It's free.
• It's about climate change.

Open cards and repository links in new tabs

Is your feature request related to a problem? Please describe.

When I click on a Card or the Repository link in the sidebar menu, the page opens in the same tab, taking me away from the current page. This is not a good user experience.

Describe the solution you'd like

I would like both the Cards and Repository links to open in a new tab, so that the user can easily return to the previous page.

Automatically generate API list markdown

Is your feature request related to a problem? Please describe.
The list of APIs in the markdown file is static and manually updating it could be problematic.

Describe the solution you'd like
We need to create a python script to automatically generate a markdown with API ordered by category.

[APIFT]

API Information

API Name: MaaS | Musk as a Service
Description: API to fetch random news articles which mention Elon Musk
Category: News
What Auth is used (ex: Api Key): None
HTTPS: true
CORS: false
Api Link: https://elonmu.sh/api

Why we should Integrate your api on our listing?

It's a free satirical api I made for fun. Open source too if anyone wants an intro to a real wold ExpressJS app https://github.com/nickatnight/elonmu.sh.

Thanks for the contribution ❤️

New API Card style to improve user experience

Preview 👀

Describe the solution you'd like ✏️

We have thought of refactoring the cards. In particular, the elements inside them and their structure will change. We believe that this new design is more modern and provides a pleasant user experience.

Additional context ➕

@FlavioAdamo and I will work on these changes as they will also be compliant with the upcoming features on the login and upvote system. However, we still wanted to share this idea with you because we consider all contributors as part of the project without exceptions. ⭐

If you have any ideas to propose, please feel free to do so on this Issue!
Thank you.

Report Button on API

Describe the solution you'd like

This feature will allow users to report an API for various reasons such as: API not working, offensive API, etc.

The concept is as follows:

Logic

We were thinking of using GitHub issue templates to open an issue with the reason reported from the website.
When a user clicks on the icon, it opens a GitHub issue in another browser window, selecting a specific template for the report.

Why this feature?

The main reason is to filter APIs in order to ensure that the resources displayed on APIVault are genuine and functional.

Increase font-size of description in Api Card

Is your feature request related to a problem? Please describe.

The font-size of the description text in the Api Card is currently a little too small, which makes it difficult to read on both desktop and mobile devices. This can be frustrating for users who need to quickly understand what the API does and how it can be used.

Describe the solution you'd like

I would like to request an increase in the font-size of the description text in the Api Card. However, I understand that we need to find a good compromise so that the text is not too big and still remains readable on both desktop and mobile devices.

Additional context

I've attached a screenshot of the current Api Card for reference. Thank you for considering this feature request.

"Request for a new navbar to improve UI and User Experience

Is your feature request related to a problem? Please describe.

The current navbar on our website has a bad UI and is not visually appealing to users. The layout is outdated and do not align with our logo.

Describe the solution you'd like

I would like to request a redesign of the navbar to improve the UI and make it visually appealing to users.