GitBadges is a web application that allows users to generate various badges and cards commonly used in README files and GitHub repositories. With GitBadges, you can easily create SVG badges for your projects, generate readme stats cards, GitHub profile cards, and repository cards.
GitBadges
GitBadges is a web application that allows users to generate various badges and cards commonly used in README files and GitHub repositories. With GitBadges, you can easily create SVG badges for your projects, generate readme stats cards, GitHub profile cards, and repository cards.
Features
Badge Generation:
Create custom badges for your projects.
Choose from a variety of badge styles and colors.
Readme Stats Cards:
Generate cards with statistics about your GitHub profile.
Display metrics like total stars, total commits, top languages, and more.
GitHub Profile Cards:
Create stylish cards showcasing your GitHub profile information.
Include your profile picture, follower count, repository count, and more.
Repository Cards:
Generate cards displaying information about your repositories.
Show repository details like stars, forks, and latest commit.
Technologies Used
Frontend:
Next.js – React framework for frontend.
React – JavaScript library for building UI.
Tailwind CSS – Utility-first CSS framework.
…
If you’d like to have a single package.json and merge the client (Next.js) and server (Express.js) into a single project for simplicity, you can do so. Here’s a minimal merged file structure for your “gitbadges” project:
│
├── components/ # Shared components (React components)
│
├── pages/ # Next.js pages for frontend
│ ├── index.js # Home page
│ ├── badges.js # Page for badge generation
│ ├── readme.js # Page for readme stats cards
│ ├── github.js # Page for GitHub profile cards
│ ├── repo.js # Page for repository cards
│
├── controllers/ # Controllers for backend API
├── routes/ # Express.js routes for backend API
├── services/ # Business logic for generating SVG cards
│
├── server.js # Entry point for backend (Express.js)
├── package.json # Project metadata, dependencies, and scripts
├── .gitignore # Specify files/folders to ignore in Git
└── README.md # Project README with instructions
File Structure Details:
components/: This folder contains shared React components that can be used across different pages.
pages/: Next.js pages for the frontend.
index.js: Home page.
badges.js: Page for badge generation.
readme.js: Page for readme stats cards.
github.js: Page for GitHub profile cards.
repo.js: Page for repository cards.
controllers/: Controllers for handling API requests in the backend.
routes/: Express.js routes to define API endpoints.
services/: Business logic for generating SVG cards.
server.js: Entry point for the backend application (Express.js).
This file will contain the setup for your Express app, middleware, and API routes.
package.json: This file now includes dependencies and scripts for both frontend (Next.js) and backend (Express.js).
You can have scripts like npm run dev to concurrently start both the frontend and backend.
.gitignore: Specifies files and directories that should not be tracked by Git.
README.md: Project README file with instructions, overview, and any other relevant information.
Notes:
This structure merges the client (Next.js frontend) and server (Express.js backend) into a single project.
You can create separate folders (components/, pages/) for frontend-related code, and (controllers/, routes/, services/) for backend-related code.
server.js is the entry point for the Express.js backend, where you’ll set up your Express app and define API routes.
You’ll need to configure Next.js to use an API proxy to communicate with the Express.js backend. This can be done in client/pages/api/ directory if needed.
Remember to run npm install in the root directory to install both frontend and backend dependencies.
This structure should simplify the project setup and management, as everything is within a single project.
With this structure, you can develop both frontend and backend components together, making it easier to manage the project as a whole.
