A powerful GitHub Profile README Generator with real-time stats and customization...
A dynamic, beautiful web application that generates stunning GitHub Profile READMEs with real-time data from the GitHub API. Built with Next.js, TypeScript, and Tailwind CSS - optimized for Vercel deployment.
- Fetches live GitHub user data, repositories, and statistics
- Displays actual commit counts, stars, and follower information
- Shows real programming language usage statistics
- Includes genuine repository information and descriptions
- Modern, responsive UI with GitHub's design language
- Dark theme optimized for developer experience
- Smooth animations and hover effects
- Mobile-friendly responsive design
- 12 Complete Sections following the advanced template structure
- Toggle individual components (stats, languages, trophies, etc.)
- Multiple theme options (Dark, Light, Tokyo Night)
- Customizable social links and personal information
- GitHub Stats Cards - Live statistics with beautiful charts
- Streak Stats - Contribution streak tracking
- Language Stats - Top programming languages with usage percentages
- Trophy Collection - Achievement badges
- Activity Graph - Contribution activity visualization
- Visitor Counter - Profile view tracking
- Typing Animation - Dynamic text effects
- Hero Section with animated welcome banner
- About Me with bio and personal information
- What Sets You Apart - Unique selling points
- Tech Stack with badge generation
- Featured Projects from actual repositories
- Custom Sections including coding principles and fun facts
- Connect Section with social media integration
- Call to Action with engagement elements
git clone https://github.com/yourusername/github-readme-generator.git
cd github-readme-generator
npm installCreate a .env.local file:
# Optional: GitHub Personal Access Token for higher rate limits
GITHUB_TOKEN=your_github_personal_access_tokenGetting a GitHub Token:
- Go to GitHub Settings > Personal Access Tokens
- Generate a new token
- Select scope:
public_repo(for accessing public repositories) - Copy the token and add it to your environment variables
npm run devOpen http://localhost:3000 to see the application.
- Push to GitHub - Push your code to a GitHub repository
- Connect to Vercel - Import your repository on Vercel
- Add Environment Variables (Optional):
- Go to Project Settings > Environment Variables
- Add
GITHUB_TOKENwith your GitHub personal access token
- Deploy - Vercel will automatically build and deploy your application
Name: GITHUB_TOKEN
Value: your_github_personal_access_token
- Input any public GitHub username (e.g.,
torvalds,octocat) - Click "Generate README" to fetch user data
- Toggle components you want to include:
- ✅ GitHub Stats
- ✅ Top Languages
- ✅ Streak Stats
- ✅ Trophies
- ✅ Activity Graph
- ✅ Featured Repositories
- ✅ Visitor Count
- ✅ Typing Animation
- Choose your preferred theme
- Click "Generate Amazing README"
- Preview the result in real-time
- Copy the markdown or download the file
- Paste into your GitHub profile repository's
README.md
Our generator creates READMEs with 12 comprehensive sections:
- 👋 Hero Section - Animated welcome with typing effects
- 🧠 About Me - Personal bio and information
- 🚀 What Sets Apart - Unique value propositions
- 🛠️ Tech Stack - Programming languages and tools with badges
- 📊 GitHub Stats - Live statistics and visualizations
- 📚 Currently - Current activities and interests
- 📁 Featured Projects - Top repositories with descriptions
- 🎨 Custom Sections - Coding principles, schedule, milestones
- 🧰 Daily Tools - Development environment and tools
- 📬 Connect - Social media links and contact information
- 🎁 Sponsor - Support and sponsorship options
- 📌 Call to Action - Engagement and collaboration invites
- Next.js 14 - React framework with App Router
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first styling
- Framer Motion - Smooth animations
- React Hot Toast - Beautiful notifications
- GitHub REST API - User data, repositories, statistics
- GitHub Stats API - Dynamic stat cards and charts
- Shields.io - Custom badges and icons
- Real-time Services - Live visitor counts and typing animations
graph TD;
A[User Enters GitHub Username] --> B[Fetch GitHub Data]
B --> C{Is User Valid?}
C -->|Yes| D[Build Components]
C -->|No| H[Show Error Message]
D --> E[Render Preview]
E --> F[Generate Markdown]
F --> G[Copy or Download README]
- Server-Side Rendering - Fast initial page loads
- Client-Side Interactions - Dynamic user experience
- API Rate Limiting - Efficient GitHub API usage
- Error Handling - Graceful failure management
- Responsive Design - Works on all devices
We welcome contributions! Here's how to help:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'Add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow TypeScript best practices
- Maintain consistent code style
- Add tests for new features
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
- GitHub API - For providing comprehensive user data
- Vercel - For excellent hosting and deployment experience
- GitHub Community - For inspiration and feedback
- Open Source Contributors - For making this project possible
⭐ Star this repository if you found it helpful!
Made with ❤️ for the GitHub community