Star Wars Clone

This project is developed by myself for the Patika.dev FMSS Bilişim Front-end Practicum Final Case assignment.

I aimed to develop a production-grade application therefore I developed this project using Next.js and Typescript.

Next/Image optimizes images with lazy loading.

All module css files are in styles folder.

I used SWAPI for Star Wars data. SWAPI does not provide any image because of that I used data/Image.json file that holds Image URL data.

I implemented SSG (Static-site generation) in Starship Detail pages using getStaticProps() and getStaticPaths() from Next.js

Layout is fully responsive and mobile compatible.

Features

• Listing sharships and characters
• Search among starships and characters
• Read details of a specific starship or character
• Load more starships or characters with a load more button

Used Libraries

• React
• Next.js
• Axios
• React Icons

This is a Next.js project bootstrapped with create-next-app.

Screenshots

Starships

Starships: Filtered Results

Starships: Detail Page

Characters

Characters: Filtered Results

Characters: Detail Page

Getting Started

Static-site generation doesn't work on development mode, we generate detail pages as static html files.

Install NPM packages

npm install

Build app for production

npm run build

Start app in production mode

npm run start