A stunning, feature-rich web application that showcases GitHub profiles in an engaging e-commerce-style interface. Built with clean architecture, server-side API handling, and amazing interactive features.
- 🔍 Advanced Search: Real-time search with debouncing and server-side GitHub user search
- 📊 Sort & Filter: Sort by followers, repos, or name; Filter by user type (Users, Organizations)
- 🎯 Profile Details: Click on any profile to view detailed information in a beautiful modal
- 📈 Trending Repos: Automatically displays trending JavaScript repositories
- 💾 Caching: Server-side caching for improved performance
- 🛡️ Rate Limiting: Built-in rate limiting to prevent API abuse
When you click on a profile, you get:
- 📱 Full user information (bio, location, company, email, Twitter)
- 📚 Top 5 repositories with stars, forks, and license info
- 📝 Recent gists
- 👥 Recent followers with avatars
- 🔗 Direct links to GitHub profile and personal website
- 🔥 Trending Repositories: Shows trending repos based on language and time range
- 🌟 Repository Details: Star count, fork count, language, last update
- 🎨 Gist Support: View user's recent code snippets
- 👥 Social Network: View followers and following
- 🎮 Konami Code: Try the classic code (↑↑↓↓←→←→BA) for a surprise!
- 🎉 Confetti: Click the "Play" button for celebration effects
- 💻 Terminal Mode: Toggle a developer-themed dark mode
- 🎊 Smooth Animations: Beautiful fade-in and hover effects
server/
├── config/
│ └── config.js # Configuration management
├── middleware/
│ └── rateLimiter.js # Rate limiting middleware
├── routes/
│ └── github.js # GitHub API routes
├── services/
│ └── githubService.js # GitHub API service layer
└── server.js # Main server file
GET /api/github/users?since=0&per_page=30- Fetch list of usersGET /api/github/user/:username- Get detailed user profileGET /api/github/search?q=query&page=1- Search users
GET /api/github/user/:username/repos?sort=updated- Get user's repositoriesGET /api/github/trending?language=javascript&since=weekly- Get trending repos
GET /api/github/user/:username/followers- Get user's followersGET /api/github/user/:username/following- Get users being followedGET /api/github/user/:username/gists- Get user's gists
DELETE /api/github/cache?key=optional- Clear cacheGET /api/health- Health check
- Node.js (v14 or higher)
- npm or yarn
- Clone the repository
git clone <your-repo-url>
cd slush- Install dependencies
npm install- Configure environment variables
Create a
.envfile in the root directory:
PORT=3000
NODE_ENV=development
# Optional: Add GitHub token for higher rate limits
# Get your token from: https://github.com/settings/tokens
# GITHUB_TOKEN=your_github_personal_access_token_here- Start the development server
npm run devThe server will start at http://localhost:3000
npm start- Browse Profiles: View GitHub users in a beautiful grid layout
- Search: Type in the search box to find specific users
- Sort: Use the dropdown to sort by followers, repos, or name
- Filter: Click on "All Users", "Orgs", or "Devs" to filter by type
- View Details: Click on any profile card or "View Profile" button to see full details
- Follow: Click the "+" button to add users to your following list
- Load More: Click "Load More" button to fetch additional profiles
- Trending: Scroll down to see trending JavaScript repositories
- Rate Limiting: 100 requests per 15 minutes per IP
- Strict Rate Limiting: 30 requests per 15 minutes for expensive operations (trending, cache clear)
- Server-side API calls: All GitHub API calls are made from the server
- Request validation: Input validation and sanitization
- CORS enabled: Controlled cross-origin resource sharing
- Server-side caching: 10-minute cache for API responses
- Lazy loading: Images are loaded lazily
- Debounced search: 500ms debounce on search input
- Parallel requests: Multiple API calls executed in parallel
- Staggered animations: Smooth rendering of multiple items
- GitHub Primer Design System: Uses official GitHub colors and styles
- Responsive Design: Works on desktop, tablet, and mobile
- Smooth Animations: CSS transitions and keyframe animations
- Modern UI: Clean, minimalist interface with attention to detail
- Accessibility: Proper semantic HTML and ARIA labels
express- Web server frameworkaxios- HTTP client for API callsexpress-rate-limit- Rate limiting middlewarenode-cache- In-memory cachingcors- CORS middlewaredotenv- Environment variable management
nodemon- Auto-reload during development
Edit server/config/config.js:
rateLimit: {
windowMs: 15 * 60 * 1000, // 15 minutes
max: 100 // requests per window
}cache: {
stdTTL: 600, // 10 minutes
checkperiod: 120 // Check every 2 minutes
}- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the ISC License.
Sayan
- GitHub for their amazing API
- GitHub Primer Design System for the beautiful UI components
- Canvas Confetti for the celebration effects
- Font Awesome for the icons
- Add GitHub OAuth authentication
- Implement actual follow/unfollow functionality with GitHub API
- Add user contributions graph
- Add repository language statistics
- Implement infinite scroll instead of "Load More" button
- Add dark mode toggle
- Add more language options for trending repos
Visit http://localhost:3000 to see the application in action!
Made with ❤️ and lots of ☕