GitHub Star Tracker

A modern web application that tracks and showcases GitHub repositories with over 1,000 stars. Stay updated with the most popular open-source projects across different programming languages.

Note: The preview image is a placeholder. Replace with your actual application screenshot.

🌟 Features

• Real-time Tracking: Monitor popular GitHub repositories with 1,000+ stars
• Powerful Search: Find repositories by description
• Language Filtering: Filter repositories by programming language
• Responsive Design: Optimized for both desktop and mobile devices
• Multiple Views: Switch between grid and list views
• Dynamic Loading: Load more repositories as you scroll
• SEO Optimized: Enhanced metadata for better search engine visibility
• Dark/Light Mode: Support for both dark and light themes

🚀 Live Demo

Visit the live website: GitHub Star Tracker

🛠️ Tech Stack

• Frontend:

  • Next.js 14 - React framework with App Router
  • TypeScript - Type-safe JavaScript
  • Tailwind CSS - Utility-first CSS framework
  • shadcn/ui - Accessible UI components

• Backend:

  • Next.js Server Components and Server Actions
  • ClickHouse - High-performance analytics database

🏗️ Architecture

github-star-tracker/
├── app/                      # Next.js App Router
│   ├── _actions/             # Server Actions
│   │   ├── db.ts             # Database connection
│   │   └── index.ts          # Repository query functions
│   ├── components/           # Client components
│   │   └── RepoList.tsx      # Main repository list component
│   ├── globals.css           # Global styles
│   ├── layout.tsx            # Root layout with metadata
│   ├── loading.tsx           # Loading state component
│   └── page.tsx              # Home page
├── components/               # Shared components
│   ├── theme-provider.tsx    # Theme provider for dark/light mode
│   ├── theme-toggle.tsx      # Theme toggle button
│   └── ui/                   # UI components from shadcn/ui
├── public/                   # Static assets
├── .env.local                # Environment variables (create this file)
├── next.config.js            # Next.js configuration
├── package.json              # Project dependencies
├── README.md                 # Project documentation
└── tsconfig.json             # TypeScript configuration

📦 Getting Started

Prerequisites

• Node.js 18.17 or later
• npm or yarn or pnpm
• ClickHouse database or access to database credentials

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/github-star-tracker.git
   cd github-star-tracker

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Configure environment variables: Create a .env.local file in the root directory with the following variables:

   CLICKHOUSE_HOST=your_clickhouse_host
   CLICKHOUSE_USER=your_clickhouse_user
   CLICKHOUSE_PASSWORD=your_clickhouse_password
   CLICKHOUSE_DATABASE=default
   

4. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

5. Open http://localhost:3000 in your browser to see the application.

🔍 How to Use

1. Browse Repositories: The homepage displays the top repositories sorted by star count
2. Search: Use the search bar to find repositories by description
3. Filter by Language: Select a programming language from the dropdown to filter repositories
4. Change View: Toggle between grid and list views to display repositories in your preferred format
5. Load More: Click the "Load More Repositories" button to load additional repositories

🔄 Data Structure

The application uses a ClickHouse database with the following schema:

CREATE TABLE default.repos_new (
    name String,
    user_id Int64,
    user_name String,
    description String,
    full_name String,
    topics Array(String),
    url String,
    stars Int64,
    language String
)
ENGINE = ReplacingMergeTree
PRIMARY KEY name
ORDER BY name

⚡ Performance Optimization

This application includes several performance optimizations:

• Server-side Rendering: Core content is rendered on the server for faster initial page loads
• Client-side Search: Real-time searching with debounced input to reduce API calls
• Pagination: Load more pattern to fetch data in manageable chunks
• Code Splitting: Automatic code splitting by Next.js
• Image Optimization: Next.js Image component for optimized image loading
• Responsive Design: Optimized for all device sizes

🚢 Deployment

The application can be deployed to various platforms:

Vercel (Recommended)

npm install -g vercel
vercel login
vercel

Traditional VPS

1. Build the application:

   npm run build

2. Start the production server:

   npm start

Docker Deployment

1. Build the Docker image:

   docker build -t github-star-tracker .

2. Run the container:

   docker run -p 3000:3000 github-star-tracker

🔎 SEO Features

The application includes comprehensive SEO optimizations:

• Metadata: Title, description, and keywords for all pages
• Open Graph: Rich metadata for social media sharing
• Twitter Cards: Enhanced display when shared on Twitter
• Structured Data: JSON-LD for better search engine understanding
• Semantic HTML: Proper heading hierarchy and semantic elements
• Responsive Design: Mobile-friendly for better search rankings
• Performance: Optimized loading speeds for improved SEO

🤝 Contributing

Contributions are welcome! Feel free to submit issues or pull requests.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Data sourced from GitHub API and stored in ClickHouse
• Built with Next.js and modern web technologies
• Inspired by the open-source community

---