Building Star Wars Explorer as a guided browsing experience

The Motivation Behind the Project

Star Wars Explorer was built to make browsing a large fictional universe feel more organized and approachable. The app focuses on letting users explore different entities through a structure that is easier to scan than a raw list.

Core Features and Design Goals

• Catalog browsing: the app keeps exploration moving through a structured experience.
• Entity-focused navigation: the user can move between different items without losing context.
• Responsive UI: the browsing flow stays usable across device sizes.

Technical Implementation

• Built entity-type routing with Next.js dynamic routes, where each Star Wars entity type (people, planets, starships, etc.) gets its own parameterized page that fetches and displays data from the SWAPI.
• Implemented cross-entity navigation that resolves API URLs embedded in entity responses (e.g., a character's homeworld URL) into clickable links, creating a web of interconnected detail pages.
• Designed a search and filter system with debounced input and client-side filtering across multiple entity attributes for fast exploration of the full Star Wars dataset.

The Technology Stack

Built with Next.js, TypeScript, and Tailwind CSS. Uses Next.js dynamic routing for entity-type pages, client-side data fetching from SWAPI with cross-entity URL resolution, and a debounced search system for fast catalog exploration.

Final Reflections

The app is a solid example of turning a large universe into something easier to browse and enjoy.