Web application developed with Next.js 15 and React 18 to display detailed information about Pokémon. It uses PokéAPI to fetch Pokémon data with Axios, displaying details such as name, abilities, moves, and more.
This app allows users to search, view, and explore information about Pokémon. Users can:
- Search for Pokémon by name.
- View specific details about each Pokémon, including its image, abilities, moves, and forms.
The app uses Next.js for server-side rendering and routing, along with React and Tailwind CSS for the UI with Shadcn/ui.
- Pokémon Search: Allows you to search for Pokémon by name.
- Pokémon Details: Displays details such as image, abilities, moves, and forms.
- Loading Spinner: With a dynamic gradient while data is loading.
- Results Table: A table to display multiple Pokémon.
- Next.js: React framework for server-side rendering and static site generation.
- React: Library for building user interfaces.
- Tailwind CSS: Design framework for quickly creating user interfaces.
- Shadcn/ui: Component library for Tailwind CSS.
- PokéAPI: Public API that provides information about Pokémon.
- Axios: Library for making HTTP requests.
- React Table: For creating interactive tables with filters and sorting.
Follow these steps to get the project up and running on your local machine:
- Clone the repository:
git clone https://github.com/Imoa1991/next-pokemon.git
- Navigate to the project directory:
cd next-pokemon
- Install the dependencies:
npm install
- Start the development server:
npm run dev
Open your browser and visit http://localhost:3000 to view the application