Overview
PokeCheck is a Pokémon matchup checker that allows users to search for Pokémon and check type effectiveness in battles. The app is designed to be fast, accessible, and user-friendly. For more details, see the PokeCheck Project Plan.
Achievement
PokeCheck scored 100 on the Lighthouse test! View the result. 100 points on both desktop and mobile for the homepage and search results page in Lighthouse performance audits! While the detail page on mobile scored 96 points, I am thrilled with the overall optimization, especially for key pages.
Features
- Home Page: Displays featured Pokémon and a search bar.
- Search Functionality: Users can search for Pokémon by name.
- Pokémon Details: View weight, height, stats, type, and abilities.
- Type Details: Check type effectiveness, Pokémon, and move.
- Favorite Functionality: Users can add/remove Pokémon to favorites with a heart icon. Favorite list is persisted via localStorage.
- Favorite List Page: View all your favorited Pokémon in one place.
- Responsive Design: Optimized for both desktop and mobile.
Tech Stack
- WireFrame: Figma
- Deployment: Vercel
- Language: TypeScript
- Styling: Tailwind CSS
- State Management: Redux Toolkit
- API Requests: Axios, TanStack Query
- Component Documentation: Storybook
- Testing: Jest (unit testing)
- Performance Testing, Accessibility: Lighthouse, Wave