PokeDextra

Pokedextra is a web application that functions as an interactive Pokédex, developed in just three days as part of a technical test for Dextra. The project's goal was to demonstrate the ability to structure a complete frontend, consuming external APIs, handling authentication and real-time data persistence, and paying close attention to the visual experience. The central idea is to allow the user to search, view, capture, and manage their favorite Pokémon in an interface reminiscent of the classic Pokédex from the anime.

Among the main functionalities, Pokedextra offers a search filter by Pokémon name or number, an initially empty capture list, and the ability to add (capture) and remove Pokémon from the Pokédex. The listing is displayed in a grid with pagination of 10 items per page, facilitating navigation in larger catalogs. Each Pokémon has a details page with complete information, such as name, image, size, types, battle attributes (HP, attack, defense, speed), and evolution steps. In addition, the layout includes a viewing mode inspired by the anime's Pokédex, built entirely with HTML and CSS, and the application is fully responsive for different screen sizes.

From a technological standpoint, the project was built with React and JavaScript, using Create React App as a base to speed up environment setup. HTTP requests to the Pokémon API are made with Axios, while the main Pokémon listing utilizes GraphQL to consume data in a more flexible way.

User authentication and the storage of the capture list were implemented with Firebase, leveraging its authentication and real-time database features to deliver an experience closer to a real product. The stack is complemented by the intensive use of HTML and CSS to build the Pokédex-style layout, reinforcing the attention to UI and UX in a 100% frontend context.

During development, one of the main challenges was integrating different ways of consuming data—combining GraphQL and traditional REST requests—while maintaining code organization and a fluid user experience. Another relevant learning point was modeling the persistence of the Pokédex in Firebase, ensuring that captures and deletions were correctly reflected in the interface, as well as handling states and real-time visual feedback. The project also reinforced good practices in componentization in React and in organizing styles for more complex interfaces, especially when recreating a visual Pokédex using only CSS within a short and well-defined timeframe.