視界 - Your GitHub profile, refined and always in your pocket.

Shikai is a beautifully crafted, mobile-first GitHub companion that transforms how developers interact with their GitHub presence on mobile devices. Unlike GitHub's official app built for productivity and collaboration, Shikai is your personal dashboard: a read-only sanctuary where you can check your repos, admire your contribution streak, and share your profile without the anxiety of accidentally pushing code on a tiny screen.

The name Shikai (視界) means "field of vision" in Japanese, perfectly capturing the app's philosophy: see what matters, your work, your progress, your impact, without distractions.

Features

Overview Dashboard

Your GitHub activity at a glance, beautifully organized:

52-Week Contribution Graph: Visual heat map of your coding activity with daily contribution counts
Pinned Repositories: Quick access to your showcase projects with live stats (stars, forks, language)
Activity Feed: Real-time stream of recent events including pushes, stars, forks, releases, pull requests, and issues
Smart Navigation: Tap any activity item to jump directly to the relevant repository or details screen

Repository Management

Powerful repository browsing with GitHub's full feature set:

Complete Repository List: View all your repos (public, private, forked) with smart filtering
Advanced Filters: Filter by programming language, repository type (all/sources/forks), and sort order (updated/created/pushed/stars/name)
Deep Repository Insights:
- Comprehensive stats (stars, watchers, forks, open issues)
- Full contributor list with avatar previews
- Language breakdown with visual percentage bars
- Topic tags for quick categorization
- Repository description and metadata
File Explorer: Navigate the complete repository tree structure with folder hierarchy
- File preview support with syntax detection
- Image preview for visual assets
- Readable formatting for code and markdown files
Commit History: Browse full commit log with:
- Author information and timestamps
- Commit messages with SHA hashes
- Clean, chronological formatting
Issue Tracking: Monitor all repository issues with:
- Filter by state (open/closed)
- Label badges with color coding
- Assignee information
- Comment counts and timestamps
Pull Request Management: Track PRs across your repos with:
- Status filtering (open/merged/closed)
- Review state indicators
- Branch information
- Merge status tracking

Starred Repositories

Your curated collection of interesting projects:

Full starred repos library with the same powerful filtering as your own repositories
Sort options: Recently starred, creation date, stars count, or name
Quick access to projects you're following or want to reference
Search capability to find specific starred repos quickly

Profile & Settings

Your GitHub identity, ready to share:

Professional Profile Card: Display-ready format perfect for meetups and interviews
Comprehensive Statistics:
- Total repositories count
- Follower and following counts
- Total stars received across all repos
- Yearly contribution streak
Social Integration: Connected accounts (Twitter, LinkedIn, personal website) displayed elegantly
Secure Token Management: Safe storage and reset options for your GitHub Personal Access Token

Technical Architecture

Authentication & Security

┌─────────────────┐
│   First Launch  │
└────────┬────────┘
         │
         ▼
┌─────────────────┐      Token Entry      ┌──────────────────┐
│  Token Setup    │─────────────────────> │  expo-secure-    │
│    Screen       │                       │     store        │
└────────┬────────┘                       └────────┬─────────┘
         │                                         │
         │ Token Stored                            │
         ▼                                         │
┌─────────────────┐                                │
│   Auth Guard    │<────────── Token Retrieved ────┘
│   (_layout.tsx) │
└────────┬────────┘
         │
         │ Valid Token
         ▼
┌─────────────────┐
│   App Tabs      │
│  (Main UI)      │
└─────────────────┘

Shikai uses GitHub Personal Access Tokens (PAT) stored securely on-device with expo-secure-store. No servers, no third-party storage, just direct API communication between your phone and GitHub. The token never leaves your device.

Required PAT Scopes:

repo - Access private repository data
read:user - Read user profile information

Data Flow Architecture

┌──────────────┐
│     User     │
│  Interaction │
└──────┬───────┘
       │
       ▼
┌──────────────────┐     TanStack Query      ┌─────────────────┐
│  Custom Hooks    │────────(caching)──────> │  Query Client   │
│  (useRepos,      │                         │  (5min cache)   │
│   useUser, etc)  │                         └────────┬────────┘
└──────┬───────────┘                                  │
       │                                              │
       │ Axios Request                                │
       ▼                                              │
┌──────────────────┐                                  │
│  GitHub REST/    │                                  │
│  GraphQL APIs    │<─────── Refetch if stale ────────┘
└──────────────────┘

Key Technical Decisions:

TanStack Query: Handles all server state with intelligent caching (5-minute stale time), automatic background refetching, and optimistic updates
Zustand: Manages local UI state (theme, filters, navigation state) with minimal boilerplate
Axios Interceptors: Automatic GitHub PAT injection and error handling for all API requests
Expo Router: File-based routing with type-safe navigation and deep linking support
FlashList: High-performance lists with recycling for large datasets (repos, commits, issues)

Design System

Typography Hierarchy
────────────────────
Display (28pt, Bold)      ←  Screen titles
Heading (22pt, SemiBold)  ←  Section headers
Title (18pt, SemiBold)    ←  Card titles
Body (15pt, Regular)      ←  Primary content
Label (13pt, Medium)      ←  Metadata, tags
Caption (11pt, Regular)   ←  Timestamps, hints

Color Philosophy:

Shikai avoids harsh whites and pitch blacks, instead using a carefully balanced palette:

Light Mode: Soft pastel backgrounds (#F0F4F8) that reduce eye strain
Dark Mode: GitHub's signature dark (#0D1117) with slightly elevated surfaces
Accent Blue: Consistent #3B82F6 (light) / #58A6FF (dark) for interactive elements
Semantic Colors: Green for contributions/open states, red for closed/errors
Language Colors: Accurate GitHub Linguist colors for 150+ programming languages

Font Stack:

┌─────────────────────────────────────┐
│  Inter                              │  All UI text
│  (Body, labels, headings)           │
├─────────────────────────────────────┤
│  JetBrains Mono                     │  Technical content
│  (Commit hashes, filenames, code)   │
└─────────────────────────────────────┘

8-Point Grid System:

All spacing adheres strictly to 8pt increments: 4, 8, 12, 16, 24, 32, 48, 64. This creates mathematical harmony and ensures consistent visual rhythm across the entire app.

Root Stack
│
├── /token-setup ──────────── First-launch token entry
│
└── /(app) ────────────────── Auth-guarded app shell
    │
    └── /(tabs) ──────────── Native bottom tabs
        │
        ├── / (Overview) ─── Dashboard home
        │
        ├── /repos ──────── Repository stack
        │   ├── index
        │   └── /[repoId]
        │       └── index ── Repo details + file explorer
        │
        ├── /stars ──────── Starred repos list
        │
        └── /profile ────── Profile drawer
            ├── index ───── Profile screen
            └── settings ── Settings + token mgmt

The architecture uses Expo Router's file-based conventions with three navigation primitives:

Stack: For linear flows (repos → repo details)
Tabs: For main app sections (overview, repos, stars, profile)
Drawer: For secondary profile actions (settings)

Custom Reanimated panels handle the file explorer UI without introducing navigation overhead.

Performance Optimizations

FlashList: Replaces FlatList for 10x better performance on large lists
Image Optimization: Expo Image with blurhash placeholders and aggressive caching
Query Prefetching: Preloads likely next screens (repo details when browsing list)
Stale-While-Revalidate: Shows cached data instantly while fetching fresh data in background
Optimistic UI: Filters and sorts apply immediately before API confirmation
Bundle Splitting: Route-based code splitting via Expo Router's automatic lazy loading

Getting Started

Prerequisites

Node.js 18+ installed
Bun package manager (recommended) or npm
Expo CLI
Android Studio (any OS)
GitHub Personal Access Token

Installation

Clone the repository:


bash
git clone https://github.com/atharvdange618/Shikai.git
cd Shikai

Install dependencies:


bash
bun install

Generate your GitHub Personal Access Token:
- Navigate to GitHub Settings → Developer Settings → Personal Access Tokens
- Click "Generate new token (classic)"
- Name it "Shikai Mobile App"
- Select scopes: repo, read:user,
- Copy the generated token (you won't see it again!)
Start the development server:


bash
bun start

Run on your device:


bash
# Android
bun android

Enter your token:
- On first launch, paste your GitHub PAT when prompted
- The token is encrypted and stored locally with expo-secure-store

Development Scripts


bash
bun start          # Start Expo dev server
bun android        # Run on Android emulator/device
bun lint           # Run ESLint checks

Tech Stack Deep Dive

Core Framework:

Expo SDK 54 - Managed React Native development with instant updates
React Native 0.81.5 - Cross-platform mobile framework
TypeScript 5.9 - Static typing and enhanced DX
Expo Router 6.0 - File-based navigation with typed routes

State & Data:

TanStack Query 5.96 - Server state management and caching
Zustand 5.0 - Minimal client state management
Axios 1.14 - HTTP client with interceptors

UI & Animation:

React Native Reanimated 4.1 - 60fps native animations on UI thread
React Native Gesture Handler 2.28 - Native gesture recognition
Expo Blur 15.0 - iOS-style backdrop blur effects
Expo Image 3.0 - Optimized image loading with blurhash

Navigation:

React Navigation 7 - Bottom tabs, stack, drawer navigators
Expo Router - File-based routing wrapper around React Navigation

Developer Experience:

ESLint - Code quality and consistency
Expo TypeScript - Full type safety across Expo APIs
React 19.1 - Latest React features including React Compiler

Performance:

Shopify FlashList 2.3 - High-performance list rendering
React Native Worklets 0.5 - JavaScript on UI thread for smooth animations

Security & Storage:

Expo SecureStore 55.0 - Encrypted keychain storage for tokens
Expo Constants - Environment variable management

Why Shikai?

GitHub's mobile app is powerful for collaboration: reviewing PRs, triaging issues, managing notifications. But it's built for doing work, not for checking in.

Shikai fills the gap for developers who want a beautiful, stress-free way to:

Track progress: See your contribution graph and maintain your streak
Share their profile: At meetups, interviews, or casual conversations
Monitor projects: Keep tabs on repos without the pressure of taking action
Admire their work: A read-only space to appreciate what you've built
Stay connected: Follow starred projects and community activity

Read-only by design means no accidental merges, no mistaken closes, no anxiety. Just your GitHub data, presented beautifully.

Design Philosophy

Three core principles guide every decision in Shikai:

1. Read-Only by Design

No write operations. No merge buttons. No close issue actions. This isn't a limitation - it's a feature. When you open Shikai, you know you're safe to browse, explore, and share without consequences. It's your viewing space.

2. Mobile-First, Native Feel

Every interaction is optimized for touch: smooth scrolling, natural gestures, haptic feedback, and animations that feel at home on your device. Pull-to-refresh, swipe navigation, and thoughtful loading states make the app feel alive and responsive.

3. Information at the Right Density

Not too sparse, not overwhelming. Shikai balances information density to be useful without cognitive overload. Card-based layouts group related data, while progressive disclosure reveals details only when needed. You get the full picture without drowning in metadata.

What Makes Shikai Special

For Students & Learners:

Track your coding journey and maintain your green squares
Visual motivation through contribution graphs
Portfolio-ready profile to share with potential employers

For Open Source Maintainers:

Monitor issues and PRs across multiple projects
Quick repository health checks
Community engagement visibility (stars, forks, watchers)

For Professional Developers:

Interview-ready GitHub profile showcase
Clean repo presentation for client demos
Quick reference for project details and contributors

For Everyone:

No anxiety about accidentally modifying data
Beautiful design that makes you proud to show your work
Fast, responsive, and respectful of your time

Shikai

Tech Stack