Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jkellerman/pokedex
Nextjs 14 original 151 pokèmon
https://github.com/jkellerman/pokedex
jest nextjs nextjs14 pokeapi pokemon radix-ui react react-testing-library server-components tailwindcss tanstack-query typescript vercel
Last synced: about 1 month ago
JSON representation
Nextjs 14 original 151 pokèmon
- Host: GitHub
- URL: https://github.com/jkellerman/pokedex
- Owner: jkellerman
- Created: 2024-04-01T20:48:07.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-06-18T21:38:40.000Z (7 months ago)
- Last Synced: 2024-06-19T03:45:49.717Z (7 months ago)
- Topics: jest, nextjs, nextjs14, pokeapi, pokemon, radix-ui, react, react-testing-library, server-components, tailwindcss, tanstack-query, typescript, vercel
- Language: TypeScript
- Homepage: https://pokedex-jkellerman.vercel.app
- Size: 238 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PokeApi App
Technical assignment using the PokéApi & YodaAPI.
## Table of contents
- [How to run the app](#how-to-run-the-app)
- [Development](#development)
- [Testing](#testing)
- [Overview](#overview)
- [Links](#links)
- [Built with](#built-with)
- [Process](#process)
## 💭 How to run the app
This is a [Next.js](https://nextjs.org/) project bootstrapped with [create-next-app](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
### Development
To run this project on your local machine, follow these steps:
1. Clone this repository.
2. Open your terminal and navigate to the project directory.
3. Run the following commands:
```sh
npm install
npm run dev
```
This will start the application in development mode.
### Testing
To run the tests:
```sh
npm test
```
## Overview
Users should be able to:
- View all 151 original Pokémon in searchable list
- Paginate through list with load more button
- Click on any Pokémon and view their stats & abilities
- Navigate to previous and next Pokémon
- Translate the ability effects into yoda language and receive an error message when hitting the rate limit.
### 🔗 Links
- Live Site: [Live](https://pokedex-jkellerman.vercel.app)
### 🧰 Built with
- TypeScript
- Next.js 14
- TailwindCSS
- Radix UI
- TanStack Query
- Jest, React Testing Library
- Vercel
- [PokéAPI](https://pokeapi.co/docs/v2)
- [YodaAPI](https://funtranslations.com/api/yoda)
### Process
#### Tanstack Query/React Query
- Translating the effect from English to Yoda required fetching data on the client side. Despite the ability to use server actions in client components, I chose to use TanStack Query because it offers an excellent experience for data fetching and caching. Additionally, caching was crucial due to the rate limit of the Yoda API, which helps prevent unnecessary data requests.
#### Improvements
- One area I would like to explore is utilising TanStack Query for pagination with server components, as the initial Pokémon list data is rendered on the server. Currently, when users load more Pokémon, the data is not cached, meaning they would have to fetch those Pokémon again if they navigate away from the page and return.