A modern, responsive GitHub clone built with Next.js 15, TypeScript, and TailwindCSS. This application allows users to search for GitHub users and view detailed profiles with repositories, similar to the original GitHub experience.
- Search for GitHub users by username, location, or skills
- Real-time search results with GitHub API integration
- Responsive search interface with keyboard navigation support
- Comprehensive user profile information
- User statistics (repositories, followers, following, gists)
- Profile details including location, company, blog, and social links
- Join date and last update information
- List of user repositories with detailed information
- Repository metadata (language, stars, forks, last update)
- Fork status and privacy indicators
- Direct links to GitHub repositories
- Dark theme with GitHub-inspired design
- Responsive layout for all device sizes
- Smooth animations and hover effects
- Professional typography and spacing
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: TailwindCSS 4
- Icons: Lucide React
- API: GitHub REST API
- Deployment: Vercel-ready
-
Clone the repository
git clone <your-repo-url> cd github-clone
-
Install dependencies
npm install --legacy-peer-deps
-
Run the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
- Enter a search query in the search bar
- Press Enter or click the Search button
- Browse through the search results
- Click on any user to view their detailed profile
- Profile Header: Avatar, name, bio, and statistics
- User Information: Location, company, blog, social links
- Repositories: List of public repositories with metadata
- Navigation: Easy navigation back to search
The application integrates with the GitHub REST API to fetch:
- User search results
- Individual user profiles
- User repositories
- Repository metadata
Note: The GitHub API has rate limits for unauthenticated requests (60 requests per hour for IP address). For production use, consider implementing GitHub OAuth authentication.
- Mobile: Optimized for small screens with stacked layouts
- Tablet: Adaptive grid layouts for medium screens
- Desktop: Full-featured interface with optimal spacing
src/
├── app/
│ ├── components/
│ │ ├── Header.tsx # Navigation header with search
│ │ ├── Footer.tsx # Site footer
│ │ └── LoadingSpinner.tsx # Reusable loading component
│ ├── user/
│ │ └── [username]/
│ │ └── page.tsx # User profile page
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page with search
├── types/ # TypeScript type definitions
└── utils/ # Utility functions
- Push your code to GitHub
- Connect your repository to Vercel
- Deploy automatically on every push
The application can be deployed to any platform that supports Next.js:
- Netlify
- Railway
- DigitalOcean App Platform
- AWS Amplify
Currently, the application uses the public GitHub API without authentication. For production use, you may want to add:
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is open source and available under the MIT License.
- GitHub for providing the excellent API
- Next.js team for the amazing framework
- TailwindCSS for the utility-first CSS framework
- Lucide for the beautiful icons
If you have any questions or need help, please:
- Open an issue on GitHub
- Check the existing documentation
- Review the code examples
Happy coding! 🚀