A web-based Pokédex built with React, allowing users to search, view, and manage Pokémon.
This project was designed to explore both prop-drilling and Context API patterns in state management.
This project is a Pokédex web application built with React. It allows users to browse, search, and manage Pokémon in their own collection.
The focus was on implementing and comparing prop-drilling and Context API for state management.
- React with Vite
- styled-components
- React Context API
- react-router-dom
- react-toastify
- 🧭 Browse a list of Pokémon
- 🔍 Search Pokémon by name
- 📖 View Pokémon details
- ➕ Add Pokémon to your personal Pokédex
- ➖ Remove Pokémon from Pokédex
- 🚫 Prevent duplicate Pokémon entries
- 📦 Limit Pokédex to 10 Pokémon
- 📣 Show success/error messages with toast
- 🎨 Render different UI states dynamically
- 🔗 State management with prop-drilling and Context API
- ⚙️ Control global state and side effects with
useEffect,useRef - 🧪 Validate input and business logic globally
| Start Page | My Dex | Detail View |
|---|---|---|
 |
 |
 |
| Add logic | Delete logic | Add logic in Detail View |
|---|---|---|
 |
 |
 |
이 프로젝트는 React로 구축된 포켓덱스 웹 애플리케이션입니다. 사용자가 자신의 포켓몬 컬렉션을 탐색, 검색, 관리할 수 있습니다.
상태 관리를 위해 prop-drilling과 Context API를 구현하고 비교하는 데 중점을 두었습니다.
- React + Vite
- styled-components
- React Context API
- react-router-dom
- react-toastify
- 🧭 포켓몬 목록 찾아보기
- 🔍 이름으로 포켓몬 검색
- 📖 포켓몬 정보 보기
- ➕ 개인 포켓덱스에 포켓몬 추가하기
- ➖ 포켓덱스에서 포켓몬 제거하기
- 🚫 포켓몬 중복 입력 방지
- 📦 포켓덱에 포켓몬을 10개로 제한하기
- 📣 토스트와 함께 성공 / 오류 메시지 표시
- 🎨 다양한 UI 상태를 동적으로 렌더링
- 🔗 소품 드릴링 및 컨텍스트 API로 상태 관리
- ⚙️
useEffect,useRef로 전역 상태 및 부작용 제어 - 🧪 입력 및 비즈니스 로직의 글로벌 유효성 검사
-
Clone the repository
bash git clone https://github.com/yourusername/pokemon-dex.git cd pokemon-dex -
Install dependencies
npm installyarn devif you use yarn
-
Run the development server
npm run dev -
Visit http://localhost:5173 in your browser