GitHub Visualizer lets you visualize your GitHub account in a cool and modern way. Explore your profile, repositories, contributions, and activity with interactive charts and detailed stats. Built with Next.js, Typescript, Tailwind CSS, and Chart.js, it provides a sleek, intuitive interface to see your GitHub data at a glance.
- User Dashboard: Displays profile info, stats, and activity feed.
- Activity Feed: Commits, pull requests, stars, issues with timestamps and icons.
- Contribution Graph: Monthly contributions visualized in a bar chart.
- Repository Insights: Total stars, public/private repos, pinned repos.
- Authentication: GitHub OAuth for secure access.
- Frontend: Typescript, Next.js, Tailwind CSS
- Charts: Chart.js
- API Requests: Axios
- Authentication: GitHub OAuth
You can run the following bash script to clone, install dependencies, and set up environment variables automatically:
#!/bin/bash
🔹 Setting up GitHub Visualizer project...
# 1. Clone repository
git clone https://github.com/your-username/github-visualizer.git
cd github-visualizer
# 2. Install Node dependencies
npm install
# 3. Create environment variables file for frontend
NEXT_PUBLIC_CLIENT_ID=your_client_id
NEXT_PUBLIC_API_URL=http://localhost:5000
# 4. Create environment variables file for backend
JWT_SECRET=your_jwt_secret
CLIENT_ID=your_client_id
CLIENT_SECRET=your_client_secret
# 5. Inform user
✅ Environment file created. Please replace 'your_client_id' and 'your_client_secret' with your GitHub OAuth credentials.
# 6. Run the development server
Starting development server...
npm run dev
🎉 GitHub Visualizer is running at http://localhost:3000