Next.Js Example

A Next.js frontend web app that consumes the Pokemon API

March 17th, 2023

A Next.js frontend web app that consumes the Pokemon API's picture


A Next.js frontend web app that consumes the Pokemon API. It has been built using, react query, zustand, and TypeScript. The app follows the atomic design pattern principles for the UI development.


  • Server-side rendering for improved performance and SEO
  • Image caching with react query for fast loading times
  • Debounce for search feature to improve usability
  • Infinite scroll to load more results
  • Responsive design for seamless use on any device
  • Global style and typography with for consistent branding and design across the app

Technologies Used

  • A CSS-in-JS library for creating high-performance, scalable styles
  • React Query: A powerful data-fetching library for React applications
  • Zustand: A small, fast state management library for React
  • TypeScript: A statically typed programming language that improves code quality and reduces errors


  • Suggestion based search bar
  • Fast loading of cached content
  • Get information about any existing pokemon quickly

Technologies Used:

About the API

  • This app consumes the Pokemon API at Pokemon API is a public API.
  • You can read more about how to use this API in their website.

Getting Started

To get a local copy up and running, follow these simple example steps.


  • A browser to open the main file
  • Node.js
  • NPM
  • Yarn

Local deploy

  • Clone the repository to your local machine.
  • Install dependencies by running yarn.
  • Run the app with yarn dev.


Bundle project

  • yarn build


To test, run

  • yarn test


  • yarn lint


๐Ÿ‘ค Arturo Alvarez

Share this:

You May Like:

full-stack music app's picture

full-stack music app

Nedx ยฉ 2023