A sleek and responsive GitHub Profile Card app built with React 19, Tailwind CSS 4, Axios, and Vite 6. Search any GitHub user and view their public profile details in a beautifully styled UI. Bonus: Export the card as a JPG!
https://githubprofilecardgenerator.vercel.app/| Tech | Description |
|---|---|
| React 19 | Frontend framework |
| Tailwind CSS 4 | Styling and responsive layout |
| Axios | Fetch data from GitHub API |
| Vite 6 | Fast build tool and dev server |
| React Router 7 | Client-side routing (optional) |
| html2canvas + jsPDF | Export card as PDF (bonus feature) |
- 🔍 Search GitHub users by username
- 🧾 View profile info (avatar, name, bio, location, repos, followers, etc.)
- 📱 Fully responsive UI
- 🖨️ Export profile card to PDF
- ⚡ Super-fast loading with Vite
- 🚫 Error handling for invalid users or network issues
# Clone the repository
git clone https://github.com/hardikdevaliya2006/Github_Card.git
cd Github_Card
# Install dependencies
npm install
# Start development server
npm run devGithub_Card/
├── public/
├── src/
│ ├── assets/
│ │ ├── preview1.png
│ │ └── preview2.png
│ ├── components/
│ │ └── GitHubCard.jsx
│ ├── App.jsx
│ └── main.jsx
├── .eslintrc.cjs
├── index.html
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── vite.config.js
└── README.md
Using the GitHub REST API:
GET https://api.github.com/users/{username}
This app uses html2canvas + jsPDF to let users download the GitHub card as a PDF.
Click the "Download PDF" button to save the snapshot.
- Learn to use the GitHub API
- Practice styling with Tailwind CSS
- Work with modern React (v19+)
- Implement PDF generation in web apps
- Build modular and clean component structure
Contributions are welcome!
# Fork the repo
# Create a feature branch
git checkout -b feature/your-feature-name
# Make your changes and commit
git commit -m "Add your message here"
# Push and open a PR
git push origin feature/your-feature-nameMade with ❤️ by Hardik Devaliya
react tailwindcss github-api vite axios responsive profile-card pdf-generator