MiniMon
Interactive Pokémon Explorer with JavaScript & API Integration
A fun, dynamic single-page app that lets users browse and explore Pokémon using real-time data. With smooth navigation, interactive modals, and responsive design.
Project Snapshot
What I Did
- Built a full JavaScript-based web app using ES6
- Integrated the PokéAPI to fetch live Pokémon data
- Designed a smooth UI with Bootstrap-powered modals and mobile navigation
- Implemented sorting, searching, and swipe-based navigation
PLanning
Defined app functionality and fetched test data from PokéAPI
Planned interface flow (list, modal, search/sort)
Building
Developed API integration & DOM manipulation logic
Built dynamic Pokémon list and Bootstrap modal navigation
Styling
Applied Bootstrap 5 for responsive layout
Styled search and navigation bar for better usability
Added toggle menu and swipe modal feature
Launching
Deployed to GitHub Pages for public access
Key Features
- Live Pokémon Data: Pulled from PokéAPI
- Search & Sort: By name or height
- Responsive Design: Optimized across all screen sizes
- Swipe Navigation: Move between Pokémon directly in the modal
- Lightweight UI: Clean, single-page layout with toggle menu
Conclusion
Lessons
- First real-world API integration experience
- Gained confidence in DOM handling and JavaScript logic
- Learned to move from static sites to interactive web applications
- Improved debugging and testing workflow
Future Directions
- Add Type Filters: Let users filter Pokémon by type (e.g. water, fire)
- Accessibility Enhancements: Improve ARIA labels and keyboard navigation
- Performance Optimization: Lazy-load images and minimize API calls
- Favourites Feature: Allow users to mark and revisit favorite Pokémon