GitHub Weekly Summary

A full-stack web application that generates comprehensive weekly activity reports from GitHub. The application fetches user activity, commits, pull requests, and repository data, then uses AI-powered summarization to create readable weekly summaries.

Features

• Weekly Activity Tracking: View your GitHub activity for any date range
• User Reports: Generate detailed reports for any GitHub user
• Repository Filtering: Filter activities by specific repositories
• Activity Type Filtering: Filter by commits, pull requests, or all activities
• AI-Powered Summarization: Automatically summarize commit messages and pull request descriptions using Hugging Face's Pegasus model
• Multiple Display Modes: Switch between "My Activity" and "User Report" modes
• Date Range Selection: Customize the time period for activity reports
• Responsive UI: Modern, clean interface built with Tailwind CSS

Tech Stack

Frontend

• React 18 - UI library
• TypeScript - Type safety
• Vite - Build tool and dev server
• Tailwind CSS - Styling
• Lucide React - Icons

Backend

• Express.js - Web server
• TypeScript - Type safety
• Node.js - Runtime

Services

• GitHub API - Fetch user activity and repository data
• Hugging Face Inference API - AI-powered text summarization

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• GitHub Personal Access Token
• (Optional) Hugging Face API Key for AI summarization

Environment Variables

Create a .env file in the root directory with the following variables:

# Required
GITHUB_TOKEN=your_github_personal_access_token

# Optional - for AI summarization
HUGGINGFACE_API_KEY=your_huggingface_api_key

# Optional - server port (defaults to 3001)
PORT=3001

Getting a GitHub Token

1. Go to GitHub Settings → Developer settings → Personal access tokens → Tokens (classic)
2. Click "Generate new token (classic)"
3. Select scopes: repo, read:user, read:org (if needed)
4. Copy the token and add it to your .env file

Getting a Hugging Face API Key (Optional)

1. Sign up at Hugging Face
2. Go to Settings → Access Tokens
3. Create a new token
4. Add it to your .env file

Installation

1. Clone the repository:

git clone <repository-url>
cd githubsummary

2. Install dependencies:

npm install

3. Create a .env file with your environment variables (see above)

Development

Run both the frontend and backend servers concurrently:

npm run dev

This will start:

• Frontend: http://localhost:5173 (Vite dev server)
• Backend: http://localhost:3001 (Express server)

You can also run them separately:

# Frontend only
npm run dev:client

# Backend only
npm run dev:server

Build

Build the application for production:

npm run build

This will:

• Compile TypeScript
• Build the frontend with Vite
• Output to dist/ directory

Preview

Preview the production build locally:

npm run preview

Linting

Run ESLint to check code quality:

npm run lint

Project Structure

githubsummary/
├── src/                    # Frontend source code
│   ├── components/         # React components
│   │   ├── ActivityTypeFilter.tsx
│   │   ├── CommitItem.tsx
│   │   ├── DateRangeInput.tsx
│   │   ├── DisplayFilter.tsx
│   │   ├── EmptyState.tsx
│   │   ├── ErrorState.tsx
│   │   ├── FetchForm.tsx
│   │   ├── LoadingState.tsx
│   │   ├── ModeToggle.tsx
│   │   ├── PullRequestItem.tsx
│   │   ├── ReportHeader.tsx
│   │   ├── RepoSearch.tsx
│   │   ├── RepositoryCard.tsx
│   │   ├── RepositoryList.tsx
│   │   ├── StatsCard.tsx
│   │   ├── SummaryCard.tsx
│   │   ├── UserCard.tsx
│   │   ├── UsernameInput.tsx
│   │   └── summary.tsx     # Main summary component
│   ├── services/          # API service functions
│   │   └── github.ts
│   ├── types/             # TypeScript type definitions
│   │   ├── github.ts
│   │   └── summary.ts
│   ├── utils/             # Utility functions
│   │   └── github.ts
│   ├── App.tsx            # Main App component
│   ├── main.tsx           # Entry point
│   ├── index.css          # Global styles
│   └── constant.ts        # Constants
├── server/                # Backend source code
│   ├── controllers/       # Request handlers
│   │   └── githubController.ts
│   ├── models/           # Data models
│   │   └── github.ts
│   ├── routes/           # API routes
│   │   └── github.ts
│   ├── services/         # Business logic
│   │   ├── githubService.ts
│   │   └── huggingFaceService.ts
│   └── index.ts          # Server entry point
├── package.json
├── tsconfig.json         # TypeScript config for frontend
├── tsconfig.server.json  # TypeScript config for backend
├── vite.config.ts        # Vite configuration
└── tailwind.config.js    # Tailwind CSS configuration

API Endpoints

Health Check

• GET /health - Server health status

GitHub API Endpoints

• GET /api/github/user - Get authenticated user information
• GET /api/github/user/events - Get authenticated user's events
• GET /api/github/repos/:owner/:repo/commits - Get commits for a repository
• GET /api/github/repos/:owner/:repo/pulls - Get pull requests for a repository
• GET /api/github/weekly-activity - Get weekly activity for authenticated user
  • Query params: repoName, activityType, startDate, endDate
• GET /api/github/users/:username/weekly-report - Get weekly report for a user
  • Query params: startDate, endDate
• GET /api/github/users/:username/pull-request-messages - Get PR messages for a user
• GET /api/github/users/:username/commit-messages - Get commit messages for a user
• GET /api/github/users/:username/summarize - Get AI summary for a user's activity
  • Query params: startDate, endDate
• POST /api/github/summarize - Generate AI summary from provided data
  • Body: { text: string }

Usage

1. Start the development servers with npm run dev
2. Open http://localhost:5173 in your browser
3. Choose between "My Activity" or "User Report" mode
4. For "My Activity": Optionally filter by repository, activity type, and date range
5. For "User Report": Enter a GitHub username and optionally set date range
6. Click "Fetch Activity" to retrieve and display the data
7. Use "Generate AI Summary" to create an AI-powered summary of the activity

License

This project is private and proprietary.