A GitHub user search application that displays user information, statistics, and popular repositories using the GitHub public API.
- HTML5
- CSS3 (Custom animations and effects)
- Vanilla JavaScript (ES6+)
- GitHub REST API v3
- Real-time GitHub username search with 500ms debounce
- User profile information display (avatar, name, bio, location, company, website)
- Statistics dashboard (repositories, stars, followers, following)
- Top 3 most popular repositories by star count
- Responsive design (desktop, tablet, mobile)
- About modal with project information
- Error handling for API failures and rate limits
The application follows a simple client-side architecture:
-
API Integration: Fetches data from GitHub's public API endpoints
/users/{username}- User profile data/users/{username}/repos- User repositories
-
Data Processing:
- Calculates total stars across all repositories
- Sorts repositories by star count
- Formats dates and statistics for display
-
UI Rendering: Dynamic HTML generation with template literals
- Search Input: Header-positioned search with custom styling and glow effects
- User Card: Full-screen modal displaying user data with flexbox layout
- Loading States: Animated loading indicator during API requests
- Error Handling: User-friendly error messages for 404 and rate limit errors
- Custom scrollbars
- Gradient backgrounds and glow effects
- Reflection and shine animations on input
- Smooth transitions and hover effects
- Media queries for responsive breakpoints (1024px, 768px, 480px, 360px)
- Clone the repository
- Open
index.htmlin a web browser - Enter a GitHub username in the search bar
- View user information and repositories
No build process or dependencies required.
The GitHub API allows 60 requests per hour for unauthenticated requests. The application displays an error message when the rate limit is exceeded.
Modern browsers with ES6+ support required:
- Chrome 51+
- Firefox 54+
- Safari 10+
- Edge 15+
Renato Khael - LinkedIn