First Screen: Static One just with the Images and the Button to navigate to the second screen.
Second Screen: Create a web page that lists all the Pokémon available from the following endpoint: https://pokeapi.co/api/v2/pokemon. Include a search input on this page that filters the Pokémon list displayed on the screen without making additional API calls.
Third Screen: Create another web page that displays the details of the Pokémon selected from the first screen. For example, you'll need to capture the Pokémon's ID to fetch details from an endpoint like this: https://pokeapi.co/api/v2/pokemon/1/.
Key Points: 🔑
Provide comprehensive documentation in the readme.md
Ensure the web application is free of bugs/errors.
Maintain a well-structured and clean codebase.
Make frequent commits with clear and descriptive commit messages.
Create a repository on GitHub and share the link with the recruiter/manager.
Requirements: ‼
Use Vite to set up your web project.
Implement the application using React.
Handle routing using react-router-dom.
Style the app using styled-components.
Make API requests using Axios.
Implement React Hooks (useState, useEffect, useCallback) where necessary.
🚨 Pay close attention to the design details.
FIGMA LINK for design reference: DESIGNS 💅
Tips 💡 Start by implementing all the logic and componentization before focusing on design tasks. Retrieve the Pokémon images (3D) from the sprites with the name "shiny" on it, following the example below:
DO YOUR BEST, AND GOOD LUCK!! 🍀