A Next.js / React challenge consisting on creating an Star Wars fansite with some content and features.
Although this is a solo effort I'm keeping the git regular flow by doing Pull Requests, so my progress can be more traced and documented.
In order to know more about technical decissions feel free to check any merged Pull request.
Create an Star Wars fansite with the following content:
-
Homepage: a. Content: I. Full screen carousel of images from Star Wars
-
Lister page – List of Star Wars characters: a. Content: II. 10 items per page + pagination II. Each character has few info + link to detail page of the character
-
Detail page – Detail page of Star Wars character: a. Content: I. Extended info of the character II. Title of the films where the character stars III. Back to list link that takes you to the page you where
-
Sitewide: a. Header: I. Visible in all pages II. Content: 1. Logo to go back to homepage 2. Link to lister page 3. 3 last visited detail pages 4. Search field to filter characters b. Footer: I. Visible in all pages II. Content: 1. Logo to go back to homepage 2. Copyright text
-
Use https://swapi.co to gather all the information needed
-
For the carousel, look for 3 images yourself. You can use a library to build it
-
Required tech stack: I. React II. Typescript
-
Optional tech stack: I. Next.js II. Testing: Jest + React Testing Library III: CSS: Styled components
-
Don’t take into account extra info like: planets, vehicles and starships
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
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.