Star Wars Character Browser

A React app for browsing Star Wars characters using the SWAPI. Search, filter, and view detailed character information.

Running the Project

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

The app will be available at http://localhost:5173.

What's Implemented

• Character listing with pagination
• Search by name
• Filter by homeworld, species, or films
• Character details modal with enriched data (homeworld info, species, films)
• Custom accessible select component with keyboard navigation
• Page caching for faster navigation
• Responsive design for mobile and desktop

Design Choices & Trade-offs

Data Loading: All characters are loaded upfront for instant filtering, which increases initial load time. Paginated browsing only loads 10 characters per page.

Custom Components: Built a custom select dropdown instead of using a library to keep bundle size small and have full control over styling and behavior.

API Rate Limiting: Added throttling when enriching character data to avoid hitting SWAPI rate limits. This slightly slows initial load but prevents errors.

Caching: Pages are cached in memory for instant navigation when returning to previously viewed pages.