GitHub Portfolio Analyzer

A full-stack web application that analyzes a GitHub profile and presents useful developer insights through an interactive dashboard.

The application fetches GitHub profile and repository data through the GitHub API and converts it into visual analytics covering repositories, languages, activity, stars, forks, commits, and overall portfolio quality.

Live Demo

GitHub Portfolio Analyzer

---

Features

• 🔎 Analyze any public GitHub profile
• 👤 View GitHub profile information
• 📁 Repository statistics
• 💻 Programming language analysis
• 📊 Development activity visualization
• ⭐ Stars and forks analysis
• 📝 Commit insights
• 📈 GitHub portfolio quality score
• ⚠️ User-friendly error handling
• 📱 Responsive dashboard interface
• 🔄 Fresh analysis on every new session

---

Screenshots

Overview

Repositories

Languages

Quality

---

Tech Stack

Frontend

• React
• Vite
• React Router
• Axios
• CSS

Backend

• Node.js
• Express.js
• Axios
• dotenv
• CORS

API

• GitHub REST API

Deployment

• Frontend: Vercel
• Backend: Render

---

How It Works

User enters GitHub username
            ↓
        React Frontend
            ↓
        Axios Request
            ↓
       Express Backend
            ↓
        GitHub REST API
            ↓
      GitHub Profile Data
            ↓
       Data Processing
            ↓
        React Dashboard
            ↓
   Visual Developer Insights

---

Dashboard Sections

Overview

Provides a quick summary of the analyzed GitHub profile, including:

• Profile information
• Followers and following
• Repository count
• Stars
• Forks
• Open issues
• Development activity
• Overall GitHub score

Repositories

Displays repository-related information and statistics.

Languages

Analyzes the programming languages used across the user's repositories.

Activity

Visualizes GitHub development activity and contributions.

Stars & Forks

Provides insights into repository popularity through stars and forks.

Commits

Shows commit-related activity and contribution information.

Quality

Provides an overall portfolio quality analysis based on available GitHub data.

---

Project Structure

github-portfolio-analyzer/
│
├── backend/
│   ├── controllers/
│   │   └── github-controller.js
│   │
│   ├── routes/
│   │   └── github-routes.js
│   │
│   ├── services/
│   │   └── github-service.js
│   │
│   ├── package.json
│   └── server.js
│
├── frontend/
│   ├── public/
│   │
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   │   ├── Activity.jsx
│   │   │   ├── Commits.jsx
│   │   │   ├── Languages.jsx
│   │   │   ├── Overview.jsx
│   │   │   ├── Quality.jsx
│   │   │   ├── Repositories.jsx
│   │   │   └── StarsForks.jsx
│   │   │
│   │   ├── api.js
│   │   ├── App.jsx
│   │   ├── App.css
│   │   └── main.jsx
│   │
│   ├── package.json
│   └── vite.config.js
│
├── .gitignore
├── package.json
└── README.md

---

Getting Started

1. Clone the Repository

git clone https://github.com/chillguy-13/github-portfolio-analyzer.git

cd github-portfolio-analyzer

---

Backend Setup

Go into the backend directory:

cd backend

Install dependencies:

npm install

Create a .env file inside the backend folder:

GITHUB_TOKEN=your_github_token

Start the backend:

node server.js

The backend will run on:

http://localhost:5000

---

Frontend Setup

Open another terminal and run:

cd frontend

Install dependencies:

npm install

Start the development server:

npm run dev

The frontend will normally run on:

http://localhost:5173

---

Environment Variables

The backend requires a GitHub personal access token:

GITHUB_TOKEN=your_github_token

The token is used by the backend when communicating with the GitHub API.

Important

Never commit your .env file or expose your GitHub token publicly.

Environment files are excluded from Git tracking through .gitignore.

---

Production Deployment

Backend

The Express backend is deployed as a web service on Render.

Production backend:

https://github-portfolio-analyzer-sf32.onrender.com

Frontend

The React/Vite frontend is deployed on Vercel.

Live application:

https://github-portfolio-analyzer-lilac.vercel.app/

The frontend communicates with the deployed backend API in production.

---

API

The backend exposes the following GitHub analysis endpoint:

GET /api/github/:username/analyze

Example:

GET /api/github/octocat/analyze

The endpoint fetches and processes GitHub information before returning the data required by the frontend dashboard.

---

Error Handling

The application handles common situations such as:

• Empty username
• GitHub user not found
• GitHub API rate limits
• Backend connection errors
• Server errors
• Invalid requests

Users receive clear error messages instead of a broken dashboard when an analysis fails.

---

Data Persistence

The application intentionally does not persist the previously analyzed GitHub profile.

When a new browser session starts, the dashboard begins with an empty search state.

This prevents an old profile from unexpectedly appearing when the application is reopened.

---

Development

Run both services during local development.

Backend

cd backend
npm install
node server.js

Frontend

cd frontend
npm install
npm run dev

---

Future Improvements

Possible future improvements include:

• GitHub profile comparison
• More advanced repository quality metrics
• Contribution trend analysis
• Technology and framework detection
• Exportable portfolio reports
• Improved mobile experience
• Authentication
• More detailed repository insights
• Automated testing
• CI/CD pipeline

---

Author

chillguy-13

GitHub: chillguy-13

---

License

This project is available for educational and personal portfolio purposes.