Skip to content

UPDATES.md

Latest commit

 

History

History
113 lines (92 loc) · 3.15 KB

UPDATES.md

File metadata and controls

113 lines (92 loc) · 3.15 KB

Project Updates - Enhanced Features

New Features Added

1. GitHub Username Input

  • Users now enter a GitHub username instead of a repository URL
  • Validates username format
  • Includes quick-access buttons for popular developers

2. Repository List View

  • Displays all public repositories for the selected user
  • Shows repository metadata:
    • Repository name
    • Description
    • Star count
    • Programming language
  • Click any repository to analyze its commits
  • Back button to return to username input

3. Commit Message Review Tool

  • New section below analysis results
  • Users can paste their own commit message
  • Real-time analysis with instant feedback
  • Shows:
    • Score (0-100%)
    • Specific feedback
    • Issues found
    • Success message if perfect
  • Helps developers write better commits before pushing

Updated Components

App.tsx

  • Added state management for multi-step flow
  • Views: user input → repos list → analysis + review
  • Navigation between views with back buttons

GitHub API (githubApi.ts)

  • New function: fetchUserRepos(username) - fetches all public repos
  • Returns Repository objects with metadata
  • Filters out forked repositories

Analyzer (analyzer.ts)

  • Exported analyzeCommit() function for single message analysis
  • Used by CommitReview component

New Components

  1. UserInput.tsx - Username input form with examples
  2. RepositoryList.tsx - Grid of repositories to choose from
  3. CommitReview.tsx - Commit message preview and analysis tool

File Structure

src/
├── components/
│   ├── UserInput.tsx (NEW)
│   ├── UserInput.css (NEW)
│   ├── RepositoryList.tsx (NEW)
│   ├── RepositoryList.css (NEW)
│   ├── CommitReview.tsx (NEW)
│   ├── CommitReview.css (NEW)
│   ├── ResultsDisplay.tsx (UPDATED)
│   ├── ResultsDisplay.css (UPDATED)
│   └── ... (other components)
├── utils/
│   ├── githubApi.ts (UPDATED)
│   └── analyzer.ts (UPDATED)
├── types/
│   └── index.ts (UPDATED - added Repository type)
└── App.tsx (UPDATED)

How to Use

  1. Enter Username: Start by entering a GitHub username
  2. Select Repository: Browse and click on a repository to analyze
  3. View Analysis: See commit message analysis for the repository
  4. Review Your Message: Use the commit review tool to test your own messages

Example Flow

User enters "torvalds"
    ↓
Shows all Linux kernel repositories
    ↓
User clicks on "linux" repository
    ↓
Analyzes 30 recent commits
    ↓
Shows analysis results + commit review tool
    ↓
User can test their own commit messages

API Endpoints Used

  • GET /users/{username}/repos - Fetch user's repositories
  • GET /repos/{owner}/{repo}/commits - Fetch repository commits

Next Steps to Deploy

  1. Run npm run build to create production build
  2. Upload dist/ folder to hosting service
  3. Share the URL with others

Tips for Users

  • Try popular developers: torvalds, gvanrossum, dhh
  • Use the commit review tool before every commit
  • Follow the feedback to improve commit message quality
  • Export results to track improvements over time