GitLens - GitHub Profile Visualizer

A modern, responsive GitHub profile visualization tool built with React

Features

Core Features

GitHub User Search - Search for any GitHub username to view their profile
Profile Dashboard - Comprehensive view of user information including avatar, bio, location, and social links
Repository Overview - Display up to 12 repositories sorted by stars with language indicators
Contribution Heatmap - GitHub-style 52-week contribution calendar showing activity patterns
Smart Insights - AI-powered analytics including most used language, top starred repo, and activity level

UI/UX Features

Responsive Design - Fully responsive layout that works on desktop, tablet, and mobile
Glassmorphism Navbar - Modern sticky navigation with backdrop blur effect
Dynamic Badges - Automatically badges repositories as "Most Starred" or "Most Active"
Loading States - Animated spinner with progress feedback during API calls
Error Handling - Graceful error messages for non-existent users or API failures
Number Formatting - Automatic formatting of large numbers (e.g., 1.2k for 1,200)

Technical Features

Client-Side Routing - Two routes: Home (/) and Profile (/profile/:username)
Parallel API Calls - Fetches user data, repositories, and events simultaneously using Promise.all
Memoized Calculations - Uses useMemo for optimized heatmap generation
No Backend Required - Pure frontend application consuming public GitHub API

Live Demo

View Live Demo

Screenshots

Home Page

Profile Dashboard

Contribution Heatmap

Note: Add actual screenshots to the screenshots/ directory

Tech Stack

Frontend

Technology	Version	Purpose
React	19.2.4	UI framework
React Router DOM	7.14.0	Client-side routing
Axios	1.14.0	HTTP client for API calls
React Icons	5.6.0	Icon library (Feather, Font Awesome)
TailwindCSS	4.2.2	Utility-first CSS framework

Build Tools

Technology	Version	Purpose
Vite	8.0.1	Build tool and dev server
@vitejs/plugin-react	6.0.1	React support for Vite
@tailwindcss/vite	4.2.2	TailwindCSS Vite plugin
ESLint	9.39.4	Code linting

API

GitHub REST API v3 - Public endpoints (no authentication required)
- User profile data
- Public repositories
- Public events

Getting Started

Prerequisites

Node.js - Version 18.0.0 or higher
npm - Version 9.0.0 or higher (or yarn/pnpm)

Installation

Clone the repository

git clone https://github.com/mabdullah356/GitLens.git
cd GitLens

Install dependencies
```
npm install
```
Start development server
```
npm run dev
```
Open your browser

Navigate to http://localhost:5173

Development

The development server starts with Hot Module Replacement (HMR), enabling instant feedback on code changes.

npm run dev

Available Scripts:

Command	Description
`npm run dev`	Start development server
`npm run build`	Create production build
`npm run preview`	Preview production build locally
`npm run lint`	Run ESLint

Production Build

Build the application
```
npm run build
```
Preview the build
```
npm run preview
```
Deploy the dist/ folder to your preferred hosting platform

Project Structure

GitLens/
├── public/
│   ├── favicon.svg          # Custom purple lightning bolt favicon
│   └── icons.svg            # SVG sprite sheet (unused currently)
│
├── src/
│   ├── assets/
│   │   └── hero.png         # Hero image (unused currently)
│   │
│   ├── components/
│   │   ├── Navbar.jsx           # Sticky glassmorphism navigation bar
│   │   ├── SearchBar.jsx        # GitHub username search input
│   │   ├── ProfileCard.jsx      # User profile display card
│   │   ├── StatsCard.jsx        # Reusable statistics card
│   │   ├── RepoCard.jsx         # Repository display card
│   │   ├── ContributionChart.jsx # GitHub-style contribution heatmap
│   │   └── SmartInsights.jsx    # AI-powered analytics panel
│   │
│   ├── pages/
│   │   ├── Home.jsx             # Landing page with search
│   │   └── Profile.jsx          # User profile dashboard
│   │
│   ├── App.jsx                  # Root component with routing
│   ├── main.jsx                 # Application entry point
│   └── index.css               # TailwindCSS imports
│
├── index.html                   # Vite entry HTML
├── package.json                 # Dependencies and scripts
├── vite.config.js               # Vite configuration
├── eslint.config.js             # ESLint configuration
└── README.md                    # This file

Key Components

Pages

Home (`src/pages/Home.jsx`)

Landing page with GitHub icon and branding
SearchBar component for username input
Responsive centered layout

Profile (`src/pages/Profile.jsx`)

Core dashboard component
Fetches user data, repositories, and events in parallel
Manages loading and error states
Assembles all profile components

Components

Component	File	Description
Navbar	`src/components/Navbar.jsx`	Sticky navigation with glassmorphism effect
SearchBar	`src/components/SearchBar.jsx`	Form with controlled input and navigation
ProfileCard	`src/components/ProfileCard.jsx`	Displays avatar, name, bio, and metadata
StatsCard	`src/components/StatsCard.jsx`	Reusable stat display with auto-formatting
RepoCard	`src/components/RepoCard.jsx`	Repository card with language, stars, forks
ContributionChart	`src/components/ContributionChart.jsx`	52-week heatmap calendar
SmartInsights	`src/components/SmartInsights.jsx`	Analytics with language, top repo, activity

API Integration

This application uses the GitHub REST API v3 public endpoints:

Endpoints Used

Endpoint	Method	Purpose
`https://api.github.com/users/{username}`	GET	Fetch user profile data
`https://api.github.com/users/{username}/repos`	GET	Fetch user's repositories
`https://api.github.com/users/{username}/events`	GET	Fetch user's public events

Rate Limits

Unauthenticated requests: 60 requests per hour per IP
No API token required for basic usage

Data Fetching

All three API calls are executed in parallel using Promise.all() in the Profile component for optimal performance:

const [userResponse, reposResponse, eventsResponse] = await Promise.all([
  axios.get(`https://api.github.com/users/${username}`),
  axios.get(`https://api.github.com/users/${username}/repos?sort=stars&per_page=12`),
  axios.get(`https://api.github.com/users/${username}/events?per_page=100`)
]);

Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch
```
git checkout -b feature/amazing-feature
```

Commit your changes

git commit -m 'feat: add amazing feature'

Push to the branch
```
git push origin feature/amazing-feature
```
Open a Pull Request

Commit Convention

This project follows Conventional Commits:

feat: - New feature
fix: - Bug fix
style: - Code style changes
refactor: - Code refactoring
docs: - Documentation updates
test: - Adding tests

Development Guidelines

Follow existing code style and conventions
Use TailwindCSS utility classes for styling
Ensure components are responsive
Add comments for complex logic
Test on multiple screen sizes

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contact

Project Link: https://github.com/mabdullah356/GitLens

Acknowledgments

GitHub API - For providing public API endpoints
React - UI framework
Vite - Build tool
TailwindCSS - CSS framework
React Icons - Icon library

If you found this project helpful, please give it a star!

Made with React + Vite + TailwindCSS

Name		Name	Last commit message	Last commit date
Latest commit History 24 Commits
public		public
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Folders and files

Latest commit

History

Repository files navigation