🚀 GitHub Repository Preview (Svelte 5 + Runes Edition)

Discover GitHub repositories in style! A modern web app built with Svelte 5's bleeding-edge Runes reactivity system, TypeScript, and Tailwind CSS 4. Search any GitHub user, browse their public repos, and star favorites locally ⭐ – all with buttery-smooth interactions!

🌟 Key Features

• ⚡ Blazing Fast UI: Svelte 5's optimized reactivity + Vite's instant HMR
• 🌓 Dark/Light Mode: Automatic system preference detection with Tailwind
• 🔍 Smart Search: GitHub API integration with rate limit handling
• 📱 Responsive Grid: Clean card layout adapting to all screen sizes
• ✨ Local Star System: Toggle starred repos persisted via Svelte stores
• 🚦 UI States: Loading spinners, error handling, and empty states
• 🛠 Type-Safe: Full TypeScript integration for robust development

🛠 Tech Stack

• ⚛️ Svelte 5 (With Runes reactivity)
• 🎨 Tailwind CSS 4 + tailwind-merge for utility-first styling
• 📦 Vite (Build tooling with lightning-fast HMR)
• 🔮 TypeScript (Type-safe development)
• 🗃️ Reactive State Management: Svelte stores + Runes $state/$derived synergy
• 🔗 Immutable Patterns: Set-based operations for predictable state updates
• 📡 GitHub REST API (Repository data fetching)
• 🧩 Component Architecture (Reusable, self-contained components)

🚀 Getting Started

Prerequisites

• Node.js 22+
• pnpm 10.x

Installation

git clone https://github.com/handylim/github-repo-preview.git
cd github-repo-preview
pnpm install

Development

pnpm dev

Visit http://localhost:3000

Build for Production

pnpm build
pnpm preview

🧠 Why This Stack?

Svelte 5 Runes 🔥

Leverage the new reactivity primitives ($state, $derived) for granular control over component updates while maintaining minimal boilerplate.

Tailwind CSS 4 🎨

Utility-first styling with dark mode support out of the box. The cn utility (src/lib/utils/tailwind.ts) combines clsx and tailwind-merge for conditional classes.

TypeScript 🔒

Full type safety from API responses (github.ts) to component props, catching errors at compile time.

Vite ⚡

Instant hot module replacement and optimized production builds via Rollup.

🏗 Project Structure

📦 src
├── 📂 lib
│   ├── 📂 components  # Reusable Svelte components
│   ├── 📂 store       # Svelte store for local starring
│   └── 📂 utils       # Tailwind/helper functions
├── App.svelte         # Root component
└── main.ts            # App mount point

🎯 Design Philosophy

1. Progressive Enhancement:
   Graceful degradation for slow networks (loading states, error boundaries)

2. Accessibility First:
   Semantic HTML, ARIA labels, and keyboard navigation support

3. Reactive Patterns:
   Svelte 5's $derived for computed states, store synchronization

4. Modern CSS:
   Tailwind 4 is used to style the Svelte components

5. Performance First:
   Set operations ensure efficient starred ID lookups even with 1000+ repos

🚨 Caveats

• Rate Limiting: GitHub API allows ~60 requests/hour unauthenticated
• Local Storage: Starred repos persist only in current browser session
• Svelte 5: Using experimental Runes syntax (future-proof but bleeding-edge)
• Volatile State: Starred repos reset on page refresh (intentional - see Future Improvements)

🌱 Future Improvements

• Add OAuth for higher API rate limits
• Persist stars in localStorage
• Repository filtering/sorting
• GitHub Actions CI/CD pipeline
• Unit tests with Vitest
• Add store hydration from localStorage
• Implement store middleware for API sync
• Benchmark large Set performance

🙌 Acknowledgments

Built using the create-vite template, supercharged with:

• Svelte 5's new reactivity system
• Tailwind CSS 4's new features
• GitHub's REST API v3

🌟 Star this repo (both here and locally in the app🌟) if you find it useful!😉
🐛 Issues/PRs welcome! Let's build something awesome together! 🚀

Crafted with ❤️ by Handy