Pokédex is a Single Page Application (SPA) developed in React.js that allows users to explore detailed information about each Pokémon, just like in Pokémon games and anime.
- Theme toggler between Light and Dark themes
- Pokémon search by name and ID
- Pokémon filtering by type
- Viewing details of each Pokémon, including moves and abilities
- Responsive Web Design
- React.js: Chosen for its efficiency in creating SPAs
- PokeAPI
- Vanilla Extract: Adopted for styling components and creating the Theme Toggler.
- React Router: Used for navigation between application pages.
-
Figma Prototype: I created the UI prototype in Figma, which made my workflow smoother as I knew how the design of my application would look.
-
PokéAPI: This API is designed in a simple and easy-to-use way, with a wide variety of data and images for each Pokémon. I love how the game arts were pixelated, so I decided to use this aesthetic despite the ease of switching to any other.
-
Vanilla Extract: I used this library to style the components for its practicality and being a Zero-runtime Stylesheets, providing better performance than other libraries.
-
Theme Toggler: I created themes to improve the user experience, allowing them to switch between Light and Dark themes.
-
React Router: I used this library to facilitate navigation between different pages of the application.
Main Page
Pokémon Details Page
Theme Toggler
Access and test my project: Pokédex
- Clone the repository to your computer:
git clone https://github.com/jricardocarreira/pokedex
- Navigate to the cloned project directory:
cd pokedex - Install dependencies:
npm install
- Start the application:
npm start
- Open your browser and go to http://localhost:3000 to view the Pokédex!
- Vanilla Extract documentation
- Using Vanilla Extract with React
- Theming a React Application with Vanilla Extract
- PokéAPI Documentation
- [PokéAPI Sprites](https://github.com/PokeAPI/spsrc/assets