This is a recruitment project that search Pokemon using PokeAPI.
- Aurelia: The main framework used for building the user interface.
- Aurelia Router: for managing views
- RxJS: Used for managing the state of the application.
- LESS: Used for styling the application’s components.
- Lottie: Used for displaying loading animations.
The "Gotta Catch 'em All Pokemon Search" project is an interactive web application consisting of two main views: 'Search' and 'Details'. The application allows users to search for Pokemon by name (both complete and partial) and by color. Upon selecting a Pokemon, the user is transitioned to the 'Details' view. During data loading, a loading animation is displayed. Detailed information about the selected Pokemon includes its name, statistics, and an image. This application provides a user-friendly interface for Pokemon enthusiasts to explore and learn more about their favorite creatures.
- Efficient Initial Loading: The application initially fetches a complete list of Pokemon and stores this data in localStorage for faster access on subsequent visits.
- State Management with BehaviorSubject: Uses BehaviorSubject to effectively manage and share application state across components.
- Alphabetical Display of Results: Search results are sorted alphabetically for easy navigation.
- Placeholder for Missing Images: If an image is not available in the API, a placeholder image is displayed for consistency.
Here is a link to the live version of project.
The source code of the project is available here.
To run this project locally, follow these steps:
- Clone the repository:
git clone https://github.com/tsmolarczyk/gottaCatchEmAll.git - Navigate to the project directory:
cd gottaCatchEmAll - Install dependencies:
npm install - Run the project:
npm run start
The project should now be available at http://localhost:8080/.
If you have any questions or suggestions, feel free to reach out to me!