This is a simple Next.js Pokémon web application utilizing the Pages Router. Live Demo
This project is a modern and dynamic Pokémon web application built using Next.js. Leveraging the power of PokéAPI, it allows users to browse, search, and manage their favorite Pokémon in an interactive and responsive interface. Whether you're adding Pokémon to your Pokédex or analyzing their stats with detailed charts, this web app offers a smooth and user-friendly experience for Pokémon enthusiasts. Designed with scalability in mind, the app employs state management and a clean component-based architecture, making it not just functional but also a delight to develop and use.
- Responsive Web and Mobile: Optimized for both desktop and mobile screens.
- List Pokémon with Images: View a list of Pokémon complete with their images.
- Search Pokémon by Name: Easily search for your favorite Pokémon by name.
- Pagination: Browse through Pokémon lists with pagination.
- Error Handling Page: User-friendly error handling for a smooth experience.
- Add to Pokédex: Add Pokémon to your personalized Pokédex.
- Delete Pokémon from Bag: Remove Pokémon from your bag.
- Detail Pokémon with Statistics Chart: View detailed information with statistical charts for each Pokémon.
- React Redux: State management for scalable applications.
- Phosphor Icons: Beautifully designed icon set for visual elements.
- React Loader Spinner: Display loading states with animated spinners.
- Axios: Promise-based HTTP client for API requests.
- ShadCN UI: UI components for Next.js.
- Tailwind CSS: Utility-first CSS framework for fast and responsive design.
- PokéAPI: Free and open API for Pokémon data.
To get started with the project, follow these steps:
- Clone the repository:
git clone https://github.com/wxhyxtrx/pokemon-api.git
- Navigate to the project directory:
cd website-pokemon-api - Install the dependencies:
npm install
- Run the development server:
npm run dev
- Open http://localhost:3000 in your browser to view the app.
