A Next.js frontend web app that consumes the Pokemon API
March 17th, 2023
About:
A Next.js frontend web app that consumes the Pokemon API. It has been built using stitches.dev, react query, zustand, and TypeScript. The app follows the atomic design pattern principles for the UI development.
Highlights
- 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 stitches.dev for consistent branding and design across the app
Technologies Used
- Stitches.dev: 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
Features:
- Suggestion based search bar
- Fast loading of cached content
- Get information about any existing pokemon quickly
Technologies Used:
README.md:
About the API
- This app consumes the Pokemon API at https://pokeapi.co/. 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.
Prerequisites
- 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.
Development
Bundle project
- yarn build
Testing
To test, run
- yarn test
Linters
- yarn lint
Author
👤 Arturo Alvarez
- Github: @StarSheriff2
- Twitter: @ArturoAlvarezV
- Linkedin: Arturo Alvarez
