Skip to content

Repository files navigation


Table of Contents


Overview

"Your README is the first thing people see, give it some vibes."

RepoVibes is a web tool that analyzes any public GitHub repository and distills its health into a single, hand-drawn hexagon chart. Think of it as a vibe check for your code.

Paste a repo URL, and RepoVibes fetches public data from the GitHub API commit history, issue management, community contributions, releases, and more then scores the repo across six axes of project health. The result is a sketchy, crayon-and-paper style hexagon chart you can embed directly into your README.

No login. No setup. Just vibes.


Features

FeatureDescription
Hexagon Vibe ChartA unique six-axis radar chart rendered with animated draw-in effects -- each axis represents a different health metric.
Embeddable SVG BadgeGenerate a self-contained SVG badge that updates dynamically. Drop one line of Markdown into your README and you're done.
Real-Time AnalysisFetches live data from the GitHub API, no stale snapshots.
Score Breakdown BarsA compact bar-chart view of all six scores, color-coded by performance tier.

Design Tokens

/* The crayon palette */--paper:#f6efdd; /* Warm cream background */--paper-2:#fffaf0; /* Off-white card surface */--ink:#3a3128; /* Dark brown text */--crayon-red:#d8452f; /* Error / low scores */--crayon-blue:#3d9be5; /* Accent / links */--crayon-yellow:#f2b53a; /* Highlights */--crayon-green:#5a9e4f; /* Success / high scores */--crayon-orange:#e0932f; /* Warning / mid scores */

Gallery

Screenshots of the live application at repovibes.vercel.app

Landing Page

The homepage greets you with a sketchy input form, hand-drawn borders, and that unmistakable notebook-paper texture.

Landing page showing the RepoVibes header, input form, and empty state card

Vibe Report Card

After analyzing a repo, you get a cohesive Vibe Report -- sticky-note header, animated hexagon chart, and a color-coded score breakdown.

Report card for facebook/react showing the hexagon chart and score bars

README Embed Preview

See exactly how your embed will look inside a GitHub README before you copy the snippet.

Markdown embed snippet section with copy button


Getting Started

The first way is to just go to the webapp

The further guide is for local users and contributors

Prerequisites

Installation

# 1. Clone the repository
git clone https://github.com/Terminay/repovibes.git
cd repovibes
# 2. Install dependencies
npm install
# 3. Start the development server# This starts both the Express backend (port 3001)# and the Vite frontend (port 3000) concurrently.
npm run dev

Open in Browser

ServiceURL
Frontendhttp://localhost:3000
Backend APIhttp://localhost:3001

Usage

Analyzing a Repository

  1. Go to repovibes.vercel.app (or your local localhost:3000)
  2. Paste a GitHub repo URL or shorthand:
    • Full URL: https://github.com/facebook/react
    • Shorthand: facebook/react
  3. Click "Check the vibes!"
  4. Get your Vibe Report with the hexagon chart and score breakdown

Available Scripts

# starts both backend & frontend
npm run dev
# bundles the frontend
npm run build
# serves the built frontend
npm start

Embeddable Badge

Every repo analyzed gets a unique, auto-updating SVG embed. Just copy the Markdown snippet and paste it into your README.md:

![RepoVibes](https://repovibes.vercel.app/api/hexagon/OWNER/REPO.svg)

Live Examples

RepositoryEmbed CodePreview
facebook/react![RepoVibes](https://repovibes.vercel.app/api/hexagon/facebook/react.svg)facebook/react
vercel/next.js![RepoVibes](https://repovibes.vercel.app/api/hexagon/vercel/next.js.svg)vercel/next.js
microsoft/vscode![RepoVibes](https://repovibes.vercel.app/api/hexagon/microsoft/vscode.svg)microsoft/vscode

The Six Vibes

RepoVibes evaluates repositories on six honest little vibe-o-meters:

VibeWhat It Measures
ActivityHow recently and how often code gets pushed.
CommunityThe number of different people contributing to the project.
ResponsivenessHow well maintainers keep up with and close issues.
DocumentationThe presence and depth of README, license, description, and topics.
StabilityThe use of tagged releases and how fresh the latest one is.
PopularityStars and forks, adjusted for repo age to measure growth.

Score Colors

70-100 High vibe This repo is thriving!
40-69 Mid vibe Room for improvement.
0-39 Low vibe Could use some love.

Contributing

Got an idea? Found a bug? We'd love your help.

  1. Fork the repository
  2. Clone your fork: git clone https://github.com/Terminay/repovibes.git
  3. Create a branch: git checkout -b feature/amazing-thing
  4. Make your changes
  5. Commit: git commit -m "feat: add amazing thing"
  6. Push: git push origin feature/amazing-thing
  7. Open a Pull Request

Design Guidelines

If you're contributing UI changes:

  • Use the design tokens in src/index.css no hardcoded colors.
  • Borders should feel hand-drawn (rough.js or irregular border-radius).
  • Shadows are hard-offset, not blurred (3px 4px 0 rgba(58,49,40,0.18)).
  • Fonts: Caveat (headings), Kalam (body), Patrick Hand (labels).
  • Animations should be playful but respect prefers-reduced-motion.

License

This project is open source and available under the MIT License.


Made with crayons & caffeine

Scores are heuristic vibes, not official metrics.

Star on GitHub

About

check the vibes of any public github repo ⭐

Topics

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Contributors

Languages