baka-pager - GitLite

KO | EN

gitlite — search

#ui #ai-agents #nlp #open-source #ruby #kubernetes #developer-tools #gpt #openai #editor

baka-pager

(★ 9)

Baka Pager is a cute little desktop web app that lets you explore any GitHub user's followers or following one profile at a time through a clean popup interface powered by the GitHub GraphQL API.

파일 탐색기

ZIP 다운로드

- android-chrome-192x192.png
- android-chrome-512x512.png
- apple-touch-icon.png
- baka.png
- favicon-16x16.png
- favicon-32x32.png
- favicon.ico
- site.webmanifest
- upscalemedia-transformed.png
- - error.js
  - global-error.js
  - layout.js
  - manifest.js
  - not-found.js
- - index.js
- - use-mobile.js
- - utils.js
- - globals.css
.gitattributes
.gitignore
banner.png
components.json
jsconfig.json
LICENSE
next.config.mjs
package-lock.json
package.json
postcss.config.mjs
README.md
screenshot.png

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">
  <img src="banner.png" alt="Baka Pager banner" width="100%">
</p>
<h1 align="center">🐻‍❄️ Baka Pager</h1>
<p align="center">
  <strong>A playful GitHub followers and following pager built with Next.js, React, shadcn/ui, and the GitHub API.</strong>
</p>

<p align="center">
  <img src="https://img.shields.io/badge/Next.js-15.5.6-000000?logo=nextdotjs&logoColor=white" alt="Next.js">
  <img src="https://img.shields.io/badge/React-19.1.0-61DAFB?logo=react&logoColor=111111" alt="React">
  <img src="https://img.shields.io/badge/shadcn%2Fui-New%20York-111827" alt="shadcn/ui">
  <img src="https://img.shields.io/badge/License-MIT-yellow" alt="MIT License">
</p>

## Overview

Baka Pager is a small desktop-focused web app for browsing a GitHub user's followers or following list one profile at a time. The main window accepts a target GitHub username, a GitHub access token, and a list type. It then launches a compact pager popup that displays one related GitHub profile at a time while redirecting the main browser window to that user's GitHub profile page.

The project uses a local Next.js API route as a GitHub GraphQL proxy, while the client handles popup launch, cursor-based pagination, profile navigation, and local cleanup controls.

## Screenshot

<p align="center">
  <img src="screenshot.png" alt="Baka Pager screenshot" width="760">
</p>

## Features

- Enter any target GitHub username.
- Choose between the user's **Following** and **Followers** list.
- Use a GitHub Personal Access Token for authenticated GitHub API requests.
- Launch a separate popup pager window sized for quick profile browsing.
- Fetch GitHub follower/following data through a Next.js API route.
- Use GitHub GraphQL cursor pagination for loading more profiles.
- Display profile avatar, name, username, bio, and current list position.
- Automatically redirect the main window to the currently selected GitHub profile.
- Move through profiles with **Next** and **Previous** controls.
- Toggle between followers and following directly inside the pager popup.
- Persist username, list type, current index, and cursor history with cookies.
- Temporarily pass the token to the popup through `sessionStorage`.
- Persist the token in `localStorage` for convenience.
- Provide a cleanup button that removes saved cookies, local token data, and temporary session data.
- Show clear error states for missing tokens, invalid users, GitHub API errors, and network issues.
- Include a desktop-only notice for mobile screen sizes.
- Use shadcn/ui components, Radix UI primitives, Lucide icons, and a themed Tailwind CSS design.
- Include metadata, favicon assets, manifest configuration, and custom error pages.

## Tech Stack

| Area | Technology |
| --- | --- |
| Framework | Next.js 15 App Router |
| UI Library | React 19 |
| Styling | Tailwind CSS 4 |
| Component System | shadcn/ui with Radix UI primitives |
| Icons | Lucide React |
| API Integration | GitHub REST API and GitHub GraphQL API |
| State Persistence | Cookies, localStorage, sessionStorage |
| Theme Support | next-themes |
| Utility Helpers | clsx, tailwind-merge, class-variance-authority |

## Project Structure

```text 
baka-pager/
├── public/
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── baka.png
│   ├── favicon.ico
│   ├── site.webmanifest
│   └── upscalemedia-transformed.png
├── src/
│   ├── app/
│   │   ├── (main)/
│   │   │   └── page.js
│   │   ├── api/
│   │   │   └── data/
│   │   │       └── route.js
│   │   ├── pager/
│   │   │   └── page.js
│   │   ├── error.js
│   │   ├── global-error.js
│   │   ├── layout.js
│   │   ├── manifest.js
│   │   └── not-found.js
│   ├── components/
│   │   ├── error/
│   │   ├── home/
│   │   ├── pager/
│   │   └── ui/
│   ├── config/
│   │   └── index.js
│   ├── hooks/
│   │   └── use-mobile.js
│   ├── lib/
│   │   └── utils.js
│   └── styles/
│       └── globals.css
├── banner.png
├── screenshot.png
├── components.json
├── package.json
└── README.md
```

## Getting Started

### Prerequisites

- Node.js 20 or newer
- npm
- A GitHub Personal Access Token

The token is required because the app queries GitHub's GraphQL API. A fine-grained or classic token with public profile read access is enough for public follower/following data.

### Installation

```bash
git clone <repository-url>
cd baka-pager
npm install
```

### Development

```bash
npm run dev
```

Open `http://localhost:3000` in a desktop browser.

### Production Build

```bash
npm run build
npm run start
```
## Environment Variable

Client-entered tokens work without an environment file. If you want the API route to use a server-side fallback token, create `.env.local`:

```env
GITHUB_TOKEN=your_github_token_here
```

## Limitations
- The primary interface is intentionally desktop-focused.
- Mobile users see a notice instead of the full launcher UI.
- The popup depends on browser popup permissions.
- Private account data still depends on the permissions granted to the GitHub token.

## Deployment
This app can be deployed to Vercel or any platform that supports Next.js.

For Vercel:

1. Push the project to a Git repository.
2. Import the repository in Vercel.
3. Add `GITHUB_TOKEN` only if you want a server-side fallback token.
4. Deploy with the default Next.js settings.

## License

This project is licensed under the MIT License. See [LICENSE](LICENSE) for details.

## Author

Ashish Kumar