A demo frontend application showcasing Bun, React 19, Zustand, Ky, and shadcn/ui by interfacing with the Star Wars API (SWAPI).
Visit https://travispulley.github.io/starwars-explorer
- The port it runs on (3000 by default) can be set in .env (see .env.sample)
- The base url for SWAPI is set as SWAPI_BASE in lib/api.ts
- Browse Resources: Explore People, Planets, Films, Species, Vehicles, and Starships
- Global Search: Search across all resource types simultaneously
- Pagination: Configurable items per page (12, 24, 48) with page navigation
- Expandable Badges: Click badge counts to reveal related entities
- Detail View: View individual entities with full information
- URL State Sync: Shareable URLs with query parameters for current view
- Local Caching: API responses cached in localStorage via Zustand persist
- Dark Theme: Space-themed dark UI with animated star background
- Runtime: Bun - Fast JavaScript runtime and bundler
- Framework: React 19 - UI library
- State: Zustand - Lightweight state management
- HTTP: Ky - HTTP client
- UI: shadcn/ui - Component library
- Styling: Tailwind CSS 4
bun install # Install dependencies
bun dev # Start dev server at http://localhost:3000The app state syncs to URL query parameters:
| Parameter | Description | Example |
|---|---|---|
type |
Resource type | ?type=planets |
page |
Page number | ?page=3 |
q |
Search query | ?q=skywalker |
detail |
Detail view | ?detail=people/1 |
src/
├── App.tsx # Main app, URL sync, layout
├── index.ts # Bun server entry
├── components/
│ ├── ResourceCard.tsx # Card switcher + 6 resource card types
│ ├── ExpandableBadge.tsx # Badge with expandable entity list
│ ├── Pagination.tsx # Page navigation
│ ├── LoadingSkeleton.tsx # Loading state grid
│ └── ui/ # shadcn/ui components
├── lib/
│ ├── api.ts # Ky client and SWAPI types
│ └── url-helpers.ts # URL param helpers + global state
└── store/
└── swapi.ts # Zustand store with caching