npx create-next-app@latest saatchi-interview --typescript
cd saatchi-interview
npm run devThen answer the questions:
- ESLint? Yes
- Tailwind? No
- Code in /src directory? Yes
- Use App router? Yes
- Use Turbopack? Yes
- Customize import alias? No
Then navigate to http://localhost:3000
- Remove all HTML from
src/app/page.tsx - Fetch the first page of available Pokemon species on the server side via the API endpoint https://pokeapi.co/api/v2/pokemon-species?offset=0&limit=10
- Display their names in a bulleted list on the page
- Explain why you would want to render the initial page contents on the server side. What benefits might it provide?
https://pokeapi.co/docs/v2#pokemon-species
Screenshot of part of the API response:
- The API endpoints return a response with a link to next or previous pages of Pokemon. If the response contains one or both of these API urls, display a link to fetch the next or previous page in the NextJS app.
- On clicking the link, fetch the next/previous page and replace the bullet point names. Also replace any next/previous links based on the API response.
- Explain how you could improve this. Separate NextJS page with URL routing? If the Pokemon API were private, could there be security concerns? How could you design this differently to avoid these concerns? If URL routing is set up, how would you validate to prevent page # -999 or page # ABC or page # 9223372036854775807 or page # 1.1 ?
- How would he improve strict Typescript typing for this app? Why is strict typing important/valuable?