Hey everyone! 👋 I'm excited to share my latest project: the Pokedex - a web application that lets you explore the fascinating world of Pokémon in a whole new dimension!
Ever wanted to get a closer look at your favorite Pokémon? Rotate them, zoom in, and even watch their animations? Well, now you can! This Pokedex brings Pokémon to life with interactive 3D models, right in your browser.
Features You'll Love 😍
- Browse a Stunning Grid: Dive into a visually appealing grid showcasing Pokémon with their vibrant 3D models. It's like having your own digital Pokémon collection!
- Filter by Generation: Feeling nostalgic for a specific era? Easily filter Pokémon by their generation and relive your favorite moments.
- Explore Different Forms: Discover the incredible variety within the Pokémon universe! Browse through different forms like Alolan, Galarian, Mega Evolutions, and more.
- Lightning-Fast Search: Looking for a specific Pokémon? Quickly find them by name or their Pokédex number with the intuitive search bar.
- Detailed 3D Views: Click on any Pokémon to enter a detailed view. Here, you can interact with the 3D model, check out their base stats (HP, Attack, Defense, Sp. Atk, Sp. Def, Speed), and explore available forms and animations.
- Unravel Evolution Chains: Curious about how your favorite Pokémon evolves? Trace their evolutionary path with the integrated evolution chain viewer.
- Interactive 3D Models: Use your mouse or touch to rotate, pan, and zoom in on the 3D models. Get up close and personal with every detail!
- Animated Fun: Watch various animations of the Pokémon models, bringing them to life right before your eyes.
How to Use It 🕹️
- Welcome Aboard! The app starts with a friendly welcome screen.
- The Pokémon Grid: After the welcome, you'll land on the main Pokémon grid, filled with 3D models.
- Filtering Made Easy:
- Use the "All Forms" dropdown to explore different variations of Pokémon.
- The "All Generations" dropdown lets you focus on specific Pokémon eras.
- Type in a name or ID in the search bar and hit the search button (🔍) to find your target Pokémon instantly.
- Dive into Details: Click on a Pokémon in the grid to see its in-depth information.
- Interactive Details: On the Pokémon's page:
- Manipulate the 3D model to your heart's content.
- Select different forms from the "Select Form" dropdown.
- Choose from available animations using the "Select Animation" dropdown.
- Get all the crucial base stats at a glance.
- Navigate through the Pokedex using the handy arrow buttons.
- Click "Evolution List" to see its evolutionary journey.
- Tracing Evolutions: The evolution chain page clearly lays out the Pokémon's evolution line. Click on any Pokémon in the chain to view its details.
Built With 💪
- React
- Vite
- Tailwind CSS
-
@google/model-viewer
(The magic behind the interactive 3D models!) - Axios (For fetching data from APIs)
- React Router DOM (For smooth navigation)
Powering the Pokedex ⚡
This app wouldn't be possible without these amazing APIs:
- Pokémon Data and Stats: PokeAPI Proxy
- 3D Pokémon Models and Animations: Pokémon3D API
- Pokémon Species and Evolution Data: PokeAPI
Ready to Explore? 🚀
You can experience the Pokedex live here: Pokedex
And if you're curious about the code or want to contribute, check out the repository on GitHub: RepoLink
Final Thanks 🙏
- A huge thank you to the incredible developers behind the PokeAPI and the Pokémon3D API for providing the essential data and resources that make this project possible.
- And of course, a massive shoutout to the passionate Pokémon community for their endless support and enthusiasm!
If you find this Pokedex useful or just plain awesome, please consider giving the repository a star 🌟 and sharing it with your fellow Pokémon enthusiasts! Happy exploring! 😊