GitHub Star Tracker

Track and monitor your GitHub starred repositories with star count analytics, README viewing, and similar repo recommendations.

Features

• ⭐ Star Tracking: Monitor star count changes over time
• 📄 README Viewer: Quick access to project documentation
• 🔍 Similar Repos: Discover related projects based on your interests
• 📊 Trending: Stay updated with popular repositories
• 👥 Following Feed: See what repos your followed users are starring
• 🌙 Dark Mode: Built-in dark/light theme support
• 🌍 i18n Ready: Multi-language support (EN/TR)

Tech Stack

• Frontend: React 19 + Vite + TypeScript
• Styling: Tailwind CSS v4
• State Management: Zustand
• Database: IndexedDB (Dexie.js)
• Routing: React Router v7
• HTTP Client: Axios
• i18n: react-i18next

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• A GitHub OAuth App (see below)

GitHub OAuth Setup

1. Go to https://github.com/settings/developers
2. Click "New OAuth App"
3. Fill in:
   • Application name: GitHub Star Tracker
   • Homepage URL: http://localhost:5173
   • Authorization callback URL: http://localhost:5173
4. Copy your Client ID and Client Secret

Installation

1. Clone the repository
2. Copy .env.example to .env and fill in your GitHub credentials:

cp .env.example .env

3. Install dependencies:

npm install

4. Run the development server:

# Frontend
npm run dev

# Backend (optional, for OAuth callback)
npm run server

5. Open http://localhost:5173

Environment Variables

VITE_GITHUB_CLIENT_ID=your_client_id_here
VITE_GITHUB_REDIRECT_URI=http://localhost:5173

# Server (optional)
VITE_GITHUB_CLIENT_SECRET=your_client_secret_here

Development

Available Scripts

• npm run dev - Start Vite development server
• npm run server - Start Express OAuth server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Project Structure

src/
├── components/     # React components
│   ├── auth/      # Authentication components
│   ├── repo/      # Repository-related components
│   ├── dashboard/ # Dashboard components
│   ├── common/    # Shared UI components
│   └── layout/    # Layout components
├── pages/         # Page components
├── hooks/         # Custom React hooks
├── stores/        # Zustand state stores
├── services/      # API and database services
├── utils/         # Utility functions
├── types/         # TypeScript type definitions
└── i18n/          # Internationalization

OAuth Flow Note

For development, you have two options:

1. Client-side only: Use the GitHub login button which redirects to GitHub and back with a code. The token is stored in memory.

2. With backend server: Run npm run server for proper OAuth token exchange.

License

MIT