Star Wars Wiki

A simple Star Wars Wiki built with Next.js.
Search for characters from the Star Wars universe and view detailed information on each character. This uses API provided by swapi.dev.

Features

• 🔍 Search Star Wars characters
• 👤 Per-character detail pages (server-rendered)
• 🎨 Styled with Tailwind CSS
• 📱 Responsive design, infinite scroll pattern on mobile.
• 🛠 Mock services for development and tests (SWAPI-like data)
• 🛠 Run tests with Jest
• ✅ Linting, formatting, and build setup included

Environment Variables

The project uses NEXT_PUBLIC_SWAPI_HOST to determine whether to fetch data from the real SWAPI or use mock services.

• If NEXT_PUBLIC_SWAPI_HOST starts with http, the app will use the real SWAPI service.
• Otherwise, the app will fall back to the built-in mock services.

Example

# Use real SWAPI
NEXT_PUBLIC_SWAPI_HOST=https://swapi.dev/api

# Use mock services (default)
NEXT_PUBLIC_SWAPI_HOST=mock

Getting Started

0. Node version

To minimize inconsistencies between environments, we (optionally) use nvm. The version listed in the .nvmrc is v22.15. Now I'm sure other node versions would work just as well (as long as the version difference is not too far away), but just to be extra safe, I suggest you use nvm as well. In the project directory:

# Install compatible node version
nvm install

Then to use it:

# Install compatible node version
nvm use

1. Install dependencies

npm install

2. Run the development server

npm run dev

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

3. Lint the code

npm run lint

Running this command will automatically report formatting issues detected by prettier as error-level. To fix formatting issues automatically, run:

npm run lint:fix

This will run eslint with prettier integration with the --fix flag to automatically format your codebase based on the prettier configuration.

4. Run the tests

To run all tests once, run:

npm run test

If you want to enable watch mode, run:

npm run test:watch

This will keep jest running and it will rerun the tests when there's a change to the code.

5. Build for production

npm run build

6. Start the production build

npm start

Project Structure

src/
 ├─ app/                # Next.js app routes
 ├─ components/         # Reusable UI components
 ├─ lib/                # Services, interfaces, and mock data

Tech Stack

• Next.js 15
• swapi.dev
• Tailwind CSS
• Jest
• shadcn/ui
• TypeScript

Notes

• All pages are client-side.
• Mock services simulate SWAPI responses for local development.