https://github.com/maitepv87/poke-toolkit
React project utilizing Redux Toolkit for state management and Axios for API data fetching from PokéAPI. Features include pagination, loading indicators, and error handling to ensure a smooth user experience.
https://github.com/maitepv87/poke-toolkit
axios hooks prop-types react-redux redux-toolkit
Last synced: 11 months ago
JSON representation
React project utilizing Redux Toolkit for state management and Axios for API data fetching from PokéAPI. Features include pagination, loading indicators, and error handling to ensure a smooth user experience.
- Host: GitHub
- URL: https://github.com/maitepv87/poke-toolkit
- Owner: maitepv87
- Created: 2025-04-10T17:30:22.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-05T17:06:47.000Z (12 months ago)
- Last Synced: 2025-06-13T20:45:20.630Z (12 months ago)
- Topics: axios, hooks, prop-types, react-redux, redux-toolkit
- Language: JavaScript
- Homepage: https://poke-toolkit.vercel.app/
- Size: 59.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Poke Toolkit
## Description
Pokémon Toolkit is a **fast and optimized** React application that allows users to browse Pokémon data using the PokéAPI. It showcases best practices in frontend development, including Redux Toolkit for **efficient state management**, `useMemo` and `useCallback` for **performance optimization**, and a **responsive UI with reusable components**.
### **Key Features**
- **Optimized Pokémon browsing** with paginated data.
- **Interactive Pokémon cards** displaying images and names.
- **Improved modal performance**, ensuring smooth interactions.
- **Global state management** with Redux Toolkit.
- **Efficient API handling** using Axios.
- **Custom hooks** for clean and reusable data-fetching logic.
This project is part of my portfolio to **demonstrate scalable, maintainable frontend development** using modern React tools.
## Technologies Used
- **React:** Component-based user interface.
- **Vite:** Fast build tool and development server.
- **Redux Toolkit:** Simplified global state management.
- **React Redux:** Official React bindings for Redux.
- **Axios:** HTTP client for API requests.
- **PropTypes:** Runtime props validation for components.
- **CSS Modules:** Component-scoped styling.
- **React.memo:** Prevents unnecessary re-renders in list components.
- **useMemo & useCallback:** Optimizes function and list rendering for better performance.
## Getting Started
### Installation & Setup
Follow these steps to run the project locally:
1. Clone the repository:
```bash
git clone https://github.com/maitepv87/poke-toolkit.git
cd poke-toolkit
2. Install dependencie:
```bash
npm install
```
3. Set up environment variables in a .env file:
```ini
VITE_API_URL=https://pokeapi.co/api/v2
```
4. Start the development server:
```bash
npm run dev
```
Then open http://localhost:3000 in your browser.