Welcome to the Bannano frontend code challenge! The goal of this challenge is to create a list of cards using the Pokemon API, with a focus on modern technology and good development practices.
https://www.figma.com/file/O58fFAAwSZKfoVOIDm8aQR/Bannano-MVP?node-id=2278%3A17645
The following technologies will be used in this challenge:
- React Query
- Stitches.dev for the styling
- Next.js
- TypeScript
- Zustand for state management
The challenge requires you to:
- Query the Pokemon API as the user scrolls
- Use component-driven development with an atomic design pattern (atoms, molecules, etc.)
- Use TypeScript throughout the project
- Use Zustand for state management
- Clone this repository to your local machine
- Create a new branch for your solution
- Follow the instructions below to implement the code challenge
- When you're ready to submit your solution, make a pull request to the original repository
Please follow the component-driven development and atomic design patterns as closely as possible.
In order to ensure the quality of the code, please make sure to:
- Write clear and well-documented code
- Write tests to cover the functionality of your code
- Optimize the performance of the code
Your solution will be evaluated based on:
- Correct implementation of the requirements
- Code quality, including readability, maintainability, and documentation
- Performance optimization
- Adherence to the atomic design pattern
- Use of TypeScript and state management with Zustand
Given a data API located here: Pokemon API.
- https://pokeapi.co/api/v2/pokemon?limit=151 to get all the pokemon with a limit
- https://pokeapi.co/api/v2/pokemon/{id-or-name}/ for searching the pokemon
- https://img.pokemondb.net/artwork/large/{name}.jpg for get the image
- https://bulbapedia.bulbagarden.net/wiki/{name} link to wiki
We wish you the best of luck with the code challenge, and are excited to see your solution!