Build this as part of a interview process.
Use Next.js with React for the project. Utilize the 'pages' directory for the project structure. Retrieve data from the GraphQL API: https://graphql-pokemon2.vercel.app/. API documentation: https://wayfair.github.io/dociql/. Use Apollo Client library to fetch data from the API. Host the application on Vercel (free hosting).
List all available Pokemon with pagination (20 Pokemon per page). Display each Pokemon's image, number, name, and types. Refer to https://www.pokemon.com/us/pokedex/ for layout inspiration. Statically render the first three paginated pages at build time. Render the remaining pages in real-time.
Display name, image, height, weight, classification, type, weakness, and resistance of the Pokemon. Include a button to open a popup showing the Pokemon's evolutions. Query evolution data only when the button is clicked, not beforehand. Refer to https://www.pokemon.com/us/pokedex/bulbasaur for an example of a Pokemon detail page. Statically render the detail pages for the first 20 Pokemon at build time.
Provide a link to the deployed Vercel application. Upload the code to a public GitHub repository and share the link.
This is a Next.js project bootstrapped with create-next-app
.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx
. 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.ts
.
The pages/api
directory is mapped to /api/*
. Files in this directory are treated as API routes instead of React pages.
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.