This project is a full-stack Pokémon application built with Laravel for the backend API and React for the frontend user interface. It allows users to browse Pokémon, view their details, and navigate between different Pokémon.
The project is divided into two main parts:
- Laravel Backend: Located in the project root, this handles the API for fetching Pokémon data.
- React Frontend: Located in the
react/directory, this consumes the Laravel API to display the Pokémon information.
- Dynamic Pokémon Display: Fetches and displays Pokémon details from the backend.
- Dynamic Background Colors: The background color of a Pokémon's detail page changes dynamically based on the Pokémon's type color, providing a visually engaging experience.
- Seamless Navigation: Users can navigate between different Pokémon using "Previous" and "Next" arrows. The application handles dynamic route changes efficiently, ensuring the correct Pokémon data is loaded without a full page refresh.
- Responsive Layout: The navigation arrows maintain their intended positions even when one of them is hidden, providing a consistent user experience.
- Pokémon Data API: Provides endpoints for retrieving Pokémon information.
- Efficient Data Handling: Designed to serve Pokémon data efficiently to the React frontend.
To address the challenge of dynamic content not updating when navigating between Pokémon (e.g., /pokemons/1 to /pokemons/2), the React frontend utilizes the useEffect hook with the route id as a dependency. This ensures that whenever the Pokémon id in the URL changes, the loadPokemon function is triggered to re-fetch and display the new Pokémon's data.
To ensure the navigation arrows maintain their layout when the "Previous" arrow is not visible (i.e., for the first Pokémon), a placeholder div element is used. This placeholder occupies the space that the "Previous" arrow would normally take, preserving the justify-content: space-between styling of the flex container and keeping the "Next" arrow consistently on the far right.
The background color of the DetailsPokemon component is now dynamically set using an inline style. A getColorValue utility function maps the Pokémon's color property (e.g., 'fire', 'water') to a corresponding hexadecimal color code, which is then applied to the background.