A modern, responsive web application to find and explore GitHub repositories with a beautiful UI and smooth animations. Built with clean, semantic code and best practices.
- 🔍 Search Repositories: Find any user's public repositories by username
- 📱 Fully Responsive: Works perfectly on desktop, tablet, and mobile devices
- 🎨 Modern UI: Beautiful gradient design with glassmorphism effects
- ⚡ Smooth Animations: Engaging hover effects and transitions
- 🌟 Star Count Display: See repository popularity at a glance
- 🔗 Direct Links: Quick access to repository pages
- 📊 Error Handling: User-friendly error messages for invalid usernames
🌐 Check out the live application: https://youssefali2002.github.io/Code-Finder-GitHub/
🔗 Alternative Demo: https://youssefali2002.github.io/github-repo-finder/
Search for any GitHub username (e.g., facebook, microsoft, google) to explore their repositories.
The application is fully responsive and optimized for:
- Desktop (1200px+): Full-featured layout
- Tablet (768px-1199px): Adaptive design
- Mobile (480px-767px): Compact, touch-friendly interface
- Small Mobile (<480px): Optimized for small screens
- Gradient Background: Eye-catching purple-blue gradient
- Glassmorphism: Modern frosted glass effect
- Hover Animations: Interactive elements with smooth transitions
- Loading States: Visual feedback during data fetching
- Badge Design: Modern star count display
🔥 GitHub Repo Finder/
├── index.html # Main HTML structure
├── style.css # Complete styling with animations
├── main.js # JavaScript functionality
└── README.md # Project documentation
-
Clone the repository
git clone https://github.com/Youssefali2002/github-repo-finder.git cd github-repo-finder -
Open in browser
# Simply open index.html in your favorite browser # or use a live server for better experience
-
Start searching!
- Enter any GitHub username
- Click "Get Repos" or press Enter
- Explore the repositories with beautiful animations
The application uses the GitHub REST API:
- Endpoint:
https://api.github.com/users/{username}/repos - Rate Limiting: GitHub's standard API limits apply
- Error Handling: Comprehensive error messages for:
- Invalid usernames
- Network issues
- Users with no public repositories
- Real-time repository fetching
- Instant results display
- Error handling for invalid inputs
- Flexbox layout for adaptive content
- Media queries for different screen sizes
- Touch-friendly mobile interface
- slideIn: Main container entrance animation
- fadeInUp: Repository cards appearance
- Hover Effects: Interactive feedback on all clickable elements
- Loading Spinner: Visual feedback during API calls
- 🚀 Zero Dependencies: Pure HTML, CSS, and JavaScript - no build tools required
- ⚡ Lightning Fast: Optimized for quick loading and smooth performance
- 🔍 SEO Optimized: Semantic HTML5 structure for better search visibility
- ♿ Accessible: ARIA labels and keyboard navigation support
- 🌐 Universal: Compatible with all modern browsers
- ✅ Chrome 60+
- ✅ Firefox 55+
- ✅ Safari 12+
- ✅ Edge 79+
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- 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 MIT License - see the LICENSE file for details.
- GitHub API for providing repository data
- Modern CSS techniques for beautiful UI
- JavaScript Fetch API for smooth data handling
Made with ❤️ by Youssef Yaser Ismail
📧 Email: youseef.ali.2002@gmail.com
🔗 GitHub: Youssefali2002
Search • Explore • Discover GitHub Repositories