A customizable, real-time profile view counter for your GitHub profiles and repositories. Add stylish badges to track and display visitor counts on your README files.
- Real-time Tracking: Count profile and repository views as they happen
- Fully Customizable: Change colors, labels, and badge styles
- Multiple Badge Styles: Choose from flat, plastic, or for-the-badge styles
- MongoDB Integration: Reliable storage with MongoDB Atlas
- Serverless Architecture: Powered by Vercel for maximum performance
Create your own badge at https://ghtb-counter.vercel.app
- Badge Generation: When someone views your GitHub profile/repo with the badge embedded, a request is sent to our API
- View Counting: The API processes the request, authenticates it, and increments your view counter in MongoDB
- SVG Rendering: A customized SVG badge is generated and returned, displaying your current view count
- Caching: Connection pooling and MongoDB caching prevent serverless cold starts
The system uses MongoDB to store view counts and metadata, with Vercel serverless functions handling the API endpoints.
- Node.js (v14 or newer)
- Vercel CLI
- MongoDB Atlas account
The application requires the following environment variables:
| Variable | Description |
|---|---|
MONGODB_URI |
MongoDB connection string |
API_KEY |
Secret key for accessing analytics endpoints |
- Clone the repository
git clone https://github.com/MohdYahyaMahmodi/GitHub-Tracker
cd GitHub-Tracker- Install dependencies
npm install-
Set up MongoDB Atlas
- Create a free MongoDB Atlas account
- Create a new cluster
- Create a database named
profile-counter - Create a user with read/write access to the database
- Get your connection string from Atlas dashboard
-
Deploy to Vercel
vercel --prod --env MONGODB_URI="mongodb+srv://username:password@your-cluster.mongodb.net/profile-counter?retryWrites=true&w=majority" --env API_KEY="your-secret-api-key"Replace the connection string and API key with your actual values.
- Verify deployment
Visit your Vercel deployment URL to confirm everything is working.
GET /api/counter
Generates and returns an SVG badge while incrementing the view counter.
Query Parameters:
| Parameter | Type | Description |
|---|---|---|
username |
string | Required. GitHub username or repository |
label |
string | Label text (default: "Profile Views") |
color |
string | Count background color (hex without #) |
labelColor |
string | Label text color (hex without #) |
labelBgColor |
string | Label background color (hex without #) |
countColor |
string | Count text color (hex without #) |
style |
string | Badge style: flat, plastic, or for-the-badge |
noCount |
boolean | If true, view is not counted (for preview) |
Example:
/api/counter?username=MohdYahyaMahmodi&label=Profile%20Views&color=6366f1&style=flat
GET /api/stats
Returns current view count and last updated time for a username.
Query Parameters:
| Parameter | Type | Description |
|---|---|---|
username |
string | Required. GitHub username or repository |
Response:
{
"username": "MohdYahyaMahmodi",
"count": 1234,
"lastUpdated": "2025-02-15T12:34:56.789Z"
}GET /api/analytics
Returns detailed analytics for a username (requires API key).
Headers:
X-API-Key: Your API key
Query Parameters:
| Parameter | Type | Description |
|---|---|---|
username |
string | Required. GitHub username or repository |
days |
number | Number of days of data to return (default: 30) |
Response:
{
"username": "MohdYahyaMahmodi",
"totalCount": 1234,
"lastUpdated": "2025-02-15T12:34:56.789Z",
"dailyViews": [
{"_id": "2025-02-01", "count": 42},
{"_id": "2025-02-02", "count": 37}
],
"topReferrers": [
{"_id": "github.com", "count": 853},
{"_id": "google.com", "count": 215}
]
}POST /api/bulk-update
Performs multiple view count updates (for testing purposes).
Request Body:
{
"username": "MohdYahyaMahmodi",
"updateCount": 10,
"delay": 300
}You can customize your badge in several ways:
| Style | Example |
|---|---|
flat |
 |
plastic |
 |
for-the-badge |
 |
You can specify colors using hex codes (without #) or named colors:
- blue
- green
- red
- yellow
- orange
- purple
- black
- gray
Add this to your GitHub README.md:
<img src="https://ghtb-counter.vercel.app/api/counter?username=yourusername&label=Profile%20Views&color=6366f1&style=flat" alt="Profile Views" />Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
GitHub-Tracker/
├── api/
│ ├── counter.js # Main counter endpoint
│ ├── stats.js # Stats retrieval endpoint
│ ├── analytics.js # Detailed analytics endpoint
│ └── bulk-update.js # Bulk update endpoint for testing
├── public/
│ ├── index.html # Main web interface
│ ├── styles.css # Styling for web interface
│ ├── script.js # Frontend JavaScript
│ └── favicon.ico # Site favicon
├── package.json # Project dependencies
├── vercel.json # Vercel configuration
└── README.md # Project documentation
MongoDB Connection Errors
- Verify your IP address is whitelisted in MongoDB Atlas
- Confirm connection string format is correct
- Ensure database user has appropriate permissions
Badge Not Updating
- GitHub caches images. Add a query parameter like
?t=123to force refresh - Check console for any API errors
- Verify username is correctly specified
Deployment Issues
- Ensure all environment variables are properly set
- Check Vercel deployment logs for errors
- Verify Node.js version compatibility
For more help, please open an issue on the GitHub repository.