This is a Pokédex web application built using ReactJS, Redux Toolkit, and Axios. It allows users to search and browse Pokémon data fetched from the PokeAPI. The app features a search page, a listing page with infinite scrolling, a details page for each Pokémon, and a bookmarks screen.
https://pokedex-flurn.netlify.app/
-
Search Page : Users can search for Pokémon by name. The app makes an API call to retrieve the Pokémon data and displays loading indicators and error messages as needed.
-
Listing Page : Displays a list of Pokémon fetched from the API. The page supports infinite scrolling, loading more Pokémon as the user scrolls.
-
Details Page : Shows detailed information about a selected Pokémon, including its abilities, types, stats, and more. Users can bookmark a Pokémon and save it as a favorite on their device. Bookmarked Pokémon can be easily identified and removed from bookmarks.
-
Bookmarks Screen : Allows users to view all their bookmarked Pokémon. The data is stored locally on the user's device, and users can remove Pokémon from their bookmarks.
- ReactJS
- Redux Toolkit (for state management)
- Axios (for API calls)
- React Infinite Scroll Component (for infinite scrolling functionality)
- React Redux (for integrating Redux with React)
- React Router DOM (for routing within the app)
- React Tabs (for tab-based navigation)
- Clone the repository to your local machine:
git clone https://github.com/nareshkumaralaria/pokedex-web-app.git
- Navigate to the project directory:
cd pokedex-web-app
- Install the dependencies:
npm install
- Start the development server:
npm run dev
- Open the app in your browser: http://localhost:5173/
This app integrates with the PokeAPI to fetch Pokémon data. The API base URL is https://pokeapi.co/api/v2. The following endpoints are used:
-
/pokemon : Retrieves a list of all Pokémon. (by default 20 limit)
-
/pokemon/{name} : Fetches detailed information about a specific Pokémon.
- @nareshkumaralaria (Naresh Kumar)
