A streamlined, modern dashboard for quick repository overview with detailed insights. Built with React 19, Tailwind CSS, and Vite.
https://quickhubpulse.netlify.app/
Simply use the "Log with Github" button to authenticate.
View all your repositories in a responsive grid layout with key metrics:
Click any repository card to see comprehensive statistics and traffic trends:
- Responsive Grid Layout: Adapts from 1 column (mobile) to 3 columns (desktop)
- Quick Metrics: Each card displays views, clones, stars, forks, PRs, and issues at a glance
- Repository Images: OpenGraph images from GitHub with fallback to GitHub icon
- Language Badges: Color-coded programming language indicators
- Real-time Search: Filter repositories by name or description instantly
- Result Counter: Shows how many repositories match your search
Click any repository card to open a detailed modal with:
- Comprehensive Metrics: Views (unique/total), clones, stars, forks, pull requests, issues
- Traffic Chart: 14-day trend visualization showing views and clones
- Repository Info: Language, creation date, last update, owner
- GitHub Link: Direct link to view the repository on GitHub
- Staggered card entrance animations
- Hover effects with subtle lift
- Smooth modal transitions using Framer Motion
- Loading skeleton states
- Node.js 18+
- pnpm (recommended) or npm
- GitHub Personal Access Token (Optional - for local development)
- Go to GitHub Settings → Developer settings → Personal access tokens → Tokens (classic)
- Click "Generate new token (classic)"
- Give your token a descriptive name (e.g., "Stats Dashboard")
- Select scopes:
repo- Full control of private repositories (required for traffic data)- OR
public_repo- Access to public repositories only
- Copy the generated token (you won't be able to see it again!)
# Clone the repository
git clone https://github.com/TheRealFREDP3D/QuickHubPulse
cd QuickHubPulse
# Install dependencies
pnpm install
# Start development server
pnpm run devThe application will be available at http://localhost:3000 (or another port if 3000 is in use).
- Open the dashboard in your browser
- Paste your GitHub Personal Access Token in the input field
- Click "Key icon" to authenticate
- Browse your repositories in the grid
- Click any card to view detailed statistics and traffic trends
- Use the search bar to filter repositories by name or description
client/
public/ ← Static assets
src/
components/ ← Reusable UI components
pages/ ← Page components (TokenInput, Dashboard)
hooks/ ← Custom React hooks (useGitHubAPI)
contexts/ ← React contexts (ThemeContext)
lib/ ← Utility functions
utils/ ← Utility functions (OAuth, error handling)
services/ ← API services
docs/ ← Documentation
App.tsx ← Main app component
main.tsx ← React entry point
index.css ← Global styles and theme
const.ts ← Shared constants
errors.ts ← Error handling
server/
index.ts ← Express.js backend for stats persistence and OAuth
shared/
const.ts ← Shared constants between client and server
netlify/
functions/ ← Netlify serverless functions
image/ ← Screenshots and images
dist/ ← Build output (created automatically)
Handles GitHub token authentication with instructions for obtaining a personal access token.
Main page displaying the repository grid, search functionality, and modal detail view.
Individual repository card showing key metrics and repository information.
Modal component displaying comprehensive repository statistics and traffic charts.
Custom hook managing GitHub API calls, data fetching, and state management.
- React 19: UI framework
- Tailwind CSS 4: Styling
- Vite: Build tool and dev server
- Framer Motion: Animations
- Recharts: Charts and data visualization
- Lucide React: Icons
- shadcn/ui: UI components
- date-fns: Date formatting
- Express.js: Minimal server for local stats persistence and OAuth
- Node.js: Runtime environment
The dashboard uses the GitHub REST API to fetch:
- User repositories (
GET /user/repos) - Repository details (
GET /repos/{owner}/{repo}) - Traffic views (
GET /repos/{owner}/{repo}/traffic/views) - Traffic clones (
GET /repos/{owner}/{repo}/traffic/clones) - Pull requests (
GET /repos/{owner}/{repo}/pulls) - Issues (
GET /repos/{owner}/{repo}/issues)
All API calls are made directly from the browser to GitHub. Your token is stored locally and never sent to any server except GitHub.
The dashboard supports three authentication methods:
- Enter your GitHub Personal Access Token directly
- Full access to private repositories and traffic data
- Token is stored locally in browser storage only
- Enter any GitHub username to view public repositories
- No authentication required
- Limited to public repository information only
- Traffic data and private stats are not available
- Set your GitHub Personal Access Token in a
.envfile for automatic authentication - No need to manually enter token each time you start the app
- Token is loaded automatically from environment variables
- Ideal for local development convenience
To set up .env authentication:
-
Copy
.env.exampleto.env:cp .env.example .env
-
Edit the
.envfile and add your token:VITE_GITHUB_PERSONAL_TOKEN=your_personal_access_token_here
-
Restart the development server - the app will authenticate automatically
- Click "Login with GitHub" to authenticate via OAuth
- Requires backend configuration with GitHub OAuth App
- Currently in development - requires environment variables:
GITHUB_CLIENT_ID: Your GitHub OAuth App client IDGITHUB_REDIRECT_URI: OAuth callback URL (required for each environment)
Important: GITHUB_REDIRECT_URI is now required and must be set for each environment. It cannot use a default value to prevent misconfiguration between environments.
The application includes a lightweight Express.js backend for local statistics persistence:
- Save repository statistics locally with timestamps
- Retrieve historical statistics
- Get the most recent saved statistics
- File-based storage using JSON
POST /api/stats- Save new repository statisticsGET /api/stats- Get all historical statisticsGET /api/stats/latest- Get the most recent statistics
The backend is automatically started when running pnpm run dev. Statistics can be saved manually using the "Save Stats" button in the dashboard, which stores the current repository data locally for future reference.
Statistics are stored in data/repository-stats.json in the project root. Each entry includes:
- Timestamp when the statistics were saved
- Complete repository data including metrics and traffic information
The dashboard follows a Modern Minimalist design approach:
- Information Hierarchy: Most important metrics are immediately visible
- Rapid Scanning: Grid layout enables quick visual comparison
- Progressive Disclosure: Details appear in modal, keeping main view uncluttered
- Developer-First: Uses familiar GitHub colors and patterns
- Primary: GitHub Blue (#0969da)
- Accent: Green (#1a7f37) for positive metrics
- Neutral: Slate grays for secondary information
- Lazy loading of repository images
- Efficient state management with React hooks
- Memoized filtering for search functionality
- Optimized animations using Framer Motion
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
MIT
Contributions are welcome! Please feel free to submit a Pull Request.
Your token is invalid or expired. Generate a new token and try again.
Your token doesn't have the required scopes. Regenerate with repo or public_repo scope.
Traffic data is only available for repositories where you have push access. Public repositories you don't own won't show traffic data.
Repository social images may not be available for all repos. The dashboard will fall back to the GitHub icon.
For issues or questions, please open an issue on the GitHub repository.