This is required for SSoC.

Currently, the generated markdown syntax for the Peerlist badge doesn't contain a link. Let's add an option to attach the link to the Peerlist profile to it.

Quick start

• Try it out here: peerlist-readme-badge.netlify.app
• Follow the below syntax to add the link to the Peerlist profile

[![Peerlist](https://peerlist-readme-badge.herokuapp.com/api/vinitshahdeo?style=flat-square)](https://peerlist.io/vinitshahdeo)

Local development

The react app is available inside the client/ directory in the feature/web-app. Try it out here: peerlist-readme-badge.netlify.app

Follow the commands below to build locally 👇

git checkout feature/web-app
cd client
npm install
npm run start

Things to include in the new design:

1. Update the font family
2. Follow the Peerlist-based theme
3. Add fork and Star button
4. Add Run in Postman button
5. Social sharing link (preferably Twitter)

The tag provides metadata about the HTML document. Metadata will not be displayed on the page but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload the page), search engines (keywords), or other web services.

Many meta tags are missing. Please refer this and add the missing relevant meta tags.

Local Development

The react app is available inside the client/ directory in the feature/web-app. Try it out here: peerlist-readme-badge.netlify.app

Follow the commands below to build locally 👇

git checkout feature/web-app
npm install
npm run start

Below is the screenshot of the currently deployed React app for generating Peerlist README badges. Feel free to suggest new designs by improving CSS. Any improvement in UI/UX qualifies for the merging to the base branch.

Local Development

The react app is available inside the client/ directory in the feature/web-app. Try it out here: peerlist-readme-badge.netlify.app

Follow the commands below to build locally 👇

git checkout feature/web-app
npm install
npm run start

The currently deployed React app uses the default title for the website: peerlist-readme-badge.netlify.app/.

Please replace it with the Peerlist README Badge Generator.

Check out the source code: public/index.html

- <title>React App</title>
+ <title>Peerlist README Badge Generator</title>

React app is available inside the client/ directory in the feature/web-app.

Build locally 👇

git checkout feature/web-app
npm install
npm run start

The idea is to create a web app similar to Badges Generator or Shields.io to generate Peerlist README badges.

Contributing guide

Please branch off from feature/web-app and raise a PR to feature/web-app. Currently, this branch contains a client directory that contains a basic React boilerplate which can be developed further as a React app to generate Peerlist badges dynamically.

API documentation

Refer here 🔗

![Peerlist](https://peerlist-readme-badge.herokuapp.com/api/vinitshahdeo)

In case, you have other frameworks in mind, please check out a branch feature/web-app- from develop and create your app within the client directory.

The badges should be updated when we change the badge style using the dropdown but it's not updating as expected. It's only updated when we click on the GENERATE CTA - it should be auto-updated on switching the style from the dropdown.

Please refer to the attached video or try it out here: peerlist-readme-badge.netlify.app.

Local development

The react app is available inside the client/ directory in the feature/web-app. Try it out here: peerlist-readme-badge.netlify.app

Follow the commands below to build locally 👇

git checkout feature/web-app
cd client/peerlist-readme-badge
npm install
npm run start

The currently deployed React app uses the default React's favicon: peerlist-readme-badge.netlify.app/.

Please replace it with the official Peerlist logo.

React app is available inside client/ directory in the feature/web-app.

Build locally 👇

git checkout feature/web-app
npm install
npm run start

Currently, this module supports the following designs which are inspired by Shields.io service. Feel free to introduce new designs for the Peerlist README Badges.

Type	Badge
flat This is the default style.
flat-square
plastic
social
for-the-badge

The Peerlist README Generator is currently basic in design and functionality. To enhance the user experience and provide a more polished and informative platform, we propose revamping the website.

Revamping the Peerlist Readme Generator website will enhance its usability and provide a more engaging experience for users. This can encourage more developers to adopt Peerlist badges in their projects, contributing to the broader adoption of this useful tool.

NOTE: Please share your design mocks in this thread before raising the PR.