Star Wars Planet Explorer

Purpose & Design choices

Purpose of this project is to show skills with React, TypeScript and Next.js.

Global State Management

This project is using pure React Context API for demonstration purposes.

For RESTful resource, better alternatives are for example Tanstack's React Query or React Redux

API Notes

There are at least two choices:

• ✅ swapi.info (in use)
  • ❌ Missing pagination & search
  • ✅ JSON Schema
• ❌ swapi.dev
  • ✅ Have pagination & search
  • ❌ JSON Schema not working, see #37, ⎇66

SWAPI Types from JSON Schema and data sample

You can automatically generate stuff from OpenAPI and data endpoint.

• pnpm gen:swapi:schema - write schemas with inferred types using valibot library.
• pnpm gen:swapi:sample - fetch sample data from entire swapi.info
• pnpm gen:swapi - do both of the above

Developer guidelines

• Use Conventional Commits convention for commit messages
• Do not introduce new dependencies

---

---

Next framework

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

Getting Started

First, run the development server:

pnpm dev

Open http://localhost:3000 with your browser to see the result.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.