Skip to content

Latest commit

 

History

History
403 lines (292 loc) · 27.5 KB

README.md

File metadata and controls

403 lines (292 loc) · 27.5 KB

Only Api endpoint you need for GitHub widgets

Demo

The problem Widgets solves

Our API endpoint provides a simple and easy way to display various types of data from GitHub in a visual and interactive manner. With our API endpoint, users can easily create beautiful widgets that display data such as repository information, user activity, and much more.

One of the main benefits of our API endpoint is that it allows users to quickly and easily gain insights into their GitHub data. For example, a developer could use our widgets to track the progress of their repositories, see how many people are contributing to their projects, or view statistics about their commits and pull requests. This can be especially useful for open-source projects, as it provides a way for contributors and maintainers to quickly see the activity on a project at a glance.

Our API endpoint also makes it easy for users to customize the appearance of the widgets. By using SVG and JavaScript, we were able to create visualizations that are highly customizable and can be easily styled to match the look and feel of the user's website or application.

Additionally, our API endpoint is built with performance and scalability in mind. By using Next.js, we were able to create a server-rendered application that can handle a large number of requests and provide a fast and responsive user experience.

Overall, our API endpoint provides a simple and powerful way to display GitHub data in a visual and interactive manner, making it a great tool for developers, open-source projects and anyone who wants to gain insights into their GitHub data.

Challenges we ran into

  • SVG OVER HTML

Demo

First challenge we encountered was determining the best format to send the data in the API response. We initially considered using JSON, but found that it wasn't the best option for displaying the visualizations. After some experimentation, we found that using SVG (Scalable Vector Graphics) provided the most flexibility and allowed us to create high-quality visualizations that could be easily rendered on different devices and screen sizes. Additionally, SVG is a widely supported format, making it easy to display the visualizations in a variety of contexts. To implement this, we used some SVG Design Tools to create the SVG elements and then used JavaScript to bind the data and update the visualizations in real time as the data changed. This allowed us to create interactive and dynamic visualizations that provided a great user experience.

  • The Framework Game

Demo

Another challenge we encountered while building the API endpoint was choosing the best framework for handling the API requests. Initially, we considered using a Python framework such as Flask or Django, as they are popular and well-established options for building web applications. However, we soon realized that using a JavaScript framework would be more suitable for our project as it would allow us to easily handle network requests and interact with the front-end of the application.

After evaluating several options, we decided to use Next.js, a framework for building server-rendered React applications. Next.js made it easy to handle the API requests and allowed us to easily integrate the widgets into the front-end of the application. Additionally, Next.js has built-in support for server-side rendering, which allowed us to improve the performance of the application and provide a better user experience.

Furthermore, Next.js has built-in features like automatic code splitting and optimized production builds which made it easy for us to manage the project and make it production ready.

Overall, using Next.js was a great choice for our project as it allowed us to easily handle the API requests and create a high-performance and user-friendly application.

  • Customizable Styles

Demo

One of the main features of our API endpoint is that it allows users to easily customize the appearance of the widgets. To implement this, we used CSS variables to allow users to easily change the colors and styles of the widgets. This allowed us to create highly customizable widgets that could be easily styled to match the look and feel of the user's website or application. Another challenge we faced was making sure that the widgets were responsive and looked good on different screen sizes. We solved this by using CSS media queries to adjust the layout of the widgets based on the screen size.

Overall, we faced some challenges but by utilizing different libraries, techniques and testing the project multiple time we were able to overcome them and completed the project successfully.

Technologies we used

Demo

  • Next.js
  • CSS
  • SVG
  • GitHub API
  • Vercel
  • Nextra
  • Replit

Welcome to the BUY ME A COFFEE API Endpoint!

What is this API endpoint for?

Banner API Endpoint provides a simple card for your buymeacoffee 🍵.

UseCase

You can use this API endpoint to create a card for your github profile or any other website.

How to use this API endpoint?

To get started, simply make a GET request to the following URL:

https://wiidgets.vercel.app/api/buymeacoffee?

Query Parameters

The following query parameters are available for use in the API endpoint:

  • slug (string) : The handle for your buymeacoffee Profile.

Example

Here's an example of how you might use the API to create a widget with the slug "abbhishek":

https://wiidgets.vercel.app/api/buymeacoffee?slug=abbhishek

Responses

The API endpoint returns a SVG file as response which can be directly used on website or application.

Happy Coding!

Disclaimer

We are not affiliated with buymeacoffee in any way. Use this API on your own risk.

Welcome to the Banner API Endpoint!

What is this API endpoint for?

Banner API Endpoint provides a 1500 X 500 banner with title , bio and twitter handle.

UseCase

You can use this API endpoint to create a banner for your github profile or any other website.

How to use this API endpoint?

To get started, simply make a GET request to the following URL:

https://wiidgets.vercel.app/api/banner?

Query Parameters

The following query parameters are available for use in the API endpoint:

  • title (string) : The title of the widget. This can be any string up to 100 characters in length.
  • bio (string) : The bio of the widget. This can be any string up to 200 characters in length.
  • twitter (string) : The Twitter handle of the user. This should be a string without the '@' symbol.

Example

Here's an example of how you might use the API to create a widget with the title "Contact Us", bio "Api Endpoint For Github Widgets" and twitter handle "widgets":

https://wiidgets.vercel.app/api/banner?title=Contact%20Us&bio=Api%20Endpoint%20For%20Github%20Widgets&twitter=widgets

Responses

The API endpoint returns a SVG file as response which can be directly used on website or application.

Note

Please make sure that you are passing all the parameter otherwise it will fail to create a svg. If you want to use your own css styling please use svg class and do not change the structure of svg as it may break the widget.

Happy Coding!

Disclaimer

We are not affiliated with Github in any way. Use this API on your own risk.

Welcome to the Github REPO CARD API Endpoint!

What is this API endpoint for?

This API endpoint is used to create a card for your github repository. You can use this API endpoint to create a card for your github profile or any other website.

UseCase

You can use this API endpoint to create a card for your github profile or any other website.

How to use this API endpoint?

To get started, simply make a GET request to the following URL:

https://wiidgets.vercel.app/api/github/repocard?owner=Abbhiishek&repo=Widgets&theme=transparent?

Query Parameters

The following query parameters are available for use in the API endpoint:

  • owner (string) : The owner of the Repo
  • repo (string) : The Repo Name
  • theme (string) || Optional : Themes

Example

Here's an example of how you might use the API to create a widget with the slug "abbhishek":

https://wiidgets.vercel.app/api/github/repocard?owner=Abbhiishek&repo=Widgets&theme=transparent

Responses

The API endpoint returns a SVG file as response which can be directly used on website or application.

Happy Coding!

Disclaimer

We are not affiliated with Github in any way. Use this API on your own risk.

Themes Availables for Github API Endpoint

With inbuilt themes, you can customize the look of the card without doing any manual customization.

Use ?theme=THEME_NAME parameter like so :-

![WebDev's GitHub stats](https://wiidgets.vercel.app/api/github/repocard?owner=dscjisu&repo=WebDev&theme=transparent)

{/* ## Stats

These themes work both for the Stats Card and Repo Card.

default default transparent transparent dark dark
radical radical merko merko gruvbox gruvbox
gruvbox_light gruvbox_light tokyonight tokyonight onedark onedark
cobalt cobalt synthwave synthwave highcontrast highcontrast
dracula dracula prussian prussian monokai monokai
vue vue vue-dark vue-dark shades-of-purple shades-of-purple
nightowl nightowl buefy buefy blue-green blue-green
algolia algolia great-gatsby great-gatsby darcula darcula
bear bear solarized-dark solarized-dark solarized-light solarized-light
chartreuse-dark chartreuse-dark nord nord gotham gotham
material-palenight material-palenight graywhite graywhite vision-friendly-dark vision-friendly-dark
ayu-mirage ayu-mirage midnight-purple midnight-purple calm calm
flag-india flag-india omni omni react react
jolly jolly maroongold maroongold yeblu yeblu
blueberry blueberry slateorange slateorange kacho_ga kacho_ga
outrun outrun ocean_dark ocean_dark city_lights city_lights
github_dark github_dark discord_old_blurple discord_old_blurple aura_dark aura_dark
panda panda noctis_minimus noctis_minimus cobalt2 cobalt2
swift swift aura aura apprentice apprentice
moltack moltack codeSTACKr codeSTACKr rose_pine rose_pine
[Add your theme][add-theme]

Repo Card

These themes work both for the Stats Card and Repo Card.

default_repocard default_repocard transparent transparent dark dark
radical radical merko merko gruvbox gruvbox
gruvbox_light gruvbox_light tokyonight tokyonight onedark onedark
cobalt cobalt synthwave synthwave highcontrast highcontrast
dracula dracula prussian prussian monokai monokai
vue vue vue-dark vue-dark shades-of-purple shades-of-purple
nightowl nightowl buefy buefy blue-green blue-green
algolia algolia great-gatsby great-gatsby darcula darcula
bear bear solarized-dark solarized-dark solarized-light solarized-light
chartreuse-dark chartreuse-dark nord nord gotham gotham
material-palenight material-palenight graywhite graywhite vision-friendly-dark vision-friendly-dark
ayu-mirage ayu-mirage midnight-purple midnight-purple calm calm
flag-india flag-india omni omni react react
jolly jolly maroongold maroongold yeblu yeblu
blueberry blueberry slateorange slateorange kacho_ga kacho_ga
outrun outrun ocean_dark ocean_dark city_lights city_lights
github_dark github_dark discord_old_blurple discord_old_blurple aura_dark aura_dark
panda panda noctis_minimus noctis_minimus cobalt2 cobalt2
swift swift aura aura apprentice apprentice
moltack moltack codeSTACKr codeSTACKr rose_pine rose_pine