This is a Next.js project bootstrapped with create-next-app and enhanced with several powerful technologies and design practices.
This project utilizes TailwindCSS for styling. TailwindCSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup.
For interactive components like dropdowns and comboboxes, we've incorporated Headless UI, a completely unstyled, fully accessible UI component library designed to integrate beautifully with TailwindCSS.
We leverage the Star Wars API (SWAPI) to fetch data about planets and characters from the Star Wars universe. Given the API's paginated response for planets and people, we implemented functions to fetch all planets initially, and then proceed to fetch characters. The first page of characters is rendered immediately, while the rest are loaded in the background, ensuring a responsive and dynamic user experience.
The project is deployed on Firebase, providing a fast and secure hosting for the app. Firebase hosting not only offers a simple deployment solution but also serves the app over a secure connection and at a scale.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
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!
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.