DEV Community

Cover image for Star Wars Films search application
Omor Faruk
Omor Faruk

Posted on

Star Wars Films search application

Next.js Star Wars Films search application using the SWAPI.tech API:

✅ 1. Code

Your project should follow this folder structure:

starwars-films-app/
├── app/
│   ├── films/
│   │   ├── [id]/page.tsx         // Film details page (dynamic)
│   │   ├── FilmSearchClient.tsx  // Search component (client)
│   │   └── page.tsx              // Film list page (server)
│   └── page.tsx                  // Home page rendering <FilmsPage />
├── public/
├── styles/
├── package.json
├── tsconfig.json
└── README.md
Enter fullscreen mode Exit fullscreen mode

🧑‍💻 2. Technical Documentation

Overview

This application fetches Star Wars films from https://www.swapi.tech/api/films and provides a UI for browsing, searching, and viewing details about each film.

Stack

  • Framework: Next.js (App Router)
  • Styling: Tailwind CSS
  • Data Fetching: fetch() from SWAPI
  • Routing: Server and client components with dynamic routes

Key Features

  • Server-side rendering of all films with caching (ISR)
  • Client-side search functionality triggered by button click or Enter key
  • Film detail pages fetched from /films/[id] dynamically
  • Loading indicator during navigation

⚙️ 3. Installation Guide

Prerequisites

  • Node.js 18+
  • npm or yarn

Steps

  1. Clone the repo: 
   git clone https://github.com/theonlineaid/starwars-films-app.git
   cd starwars-films-app
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies: 
   npm install
   # or
   yarn install
Enter fullscreen mode Exit fullscreen mode
  1. Run the development server: 
   npm run dev
Enter fullscreen mode Exit fullscreen mode
  1. Open in browser: Visit http://localhost:3000

✅ 4. QA/Test Plan

Feature Description Test Case Expected Result
Fetch Films Load all films from SWAPI Load /films page List of films shown
Search Filter by film title Enter "hope" and click search Show "A New Hope" only
Search with Enter Use Enter key to search Type and press Enter Same as button click
Navigation Click film title Click "A New Hope" Redirect to /films/1
Loading State Show loading on click Click title "Loading..." text shown

✅ All tests can be manually tested via the browser.

💡 5. Rationale Behind Design Decisions

Why Next.js?

  • App Router supports hybrid server and client rendering.
  • Dynamic routing (/films/[id]) is simple and SEO-friendly.

Why SWAPI?

  • Publicly available and well-structured Star Wars API.
  • Allows both listing and detail fetching by uid.

Why use use client?

  • Needed for interactive components like search and navigation loading indicators.

Why fetch all films on the server?

  • Reduces load on the client and improves initial page performance.
  • Works well with next: { revalidate } for incremental static regeneration.

Top comments (0)