A modern Pokémon trainer dashboard built with Angular 19, featuring real-time battle updates, team management, and interactive charts.
- 📖 Pokédex - Browse 151 Pokémon with search, filter, sort, and pagination
- ⚡ Team Builder - Create and manage Pokémon teams with type coverage analysis
- 🏆 Battle Log - Real-time battle updates with 5-second polling
- 👤 Trainer Profile - Manage your profile and view battle statistics
- 📊 Interactive Charts - Radar charts, bar charts, and doughnut charts with animations
- 🌙 Dark/Light Theme - Toggle between themes with smooth transitions
Pokémon list with type badges, stat columns, and pagination controls
Detailed view with stats radar chart, Pokémon cry audio, and YouTube video
Create teams with Pokémon search, type coverage analysis, and type distribution chart
Real-time battle logs with severity filters and monthly battle results chart
Trainer information with edit functionality and battle statistics
Modern dark theme with glass morphism effects
- Frontend: Angular 19, TypeScript, RxJS
- State Management: BehaviorSubject + Signals
- API: GraphQL (PokeAPI), REST (JSON Server)
- Charts: Chart.js
- Styling: SCSS with CSS Variables
- Testing: Jasmine, Karma
| Requirement | How db.json fulfills it |
|---|---|
| Battle Log Polling | interval(5000) + switchMap works perfectly with REST |
| Avatar Base64 Storage | Stable up to 2MB, no 500 errors |
| CRUD Operations | Full REST support (GET/POST/PATCH/DELETE) |
| Development Speed | Zero configuration, immediate start |
| Deployment | Single file, no extra setup |
- Assignment requires polling simulation, not GraphQL subscriptions
json-serveris stable for Base64 images;json-graphql-serverreturns 500 errors- REST is simpler, faster to implement, meets all requirements
# Clone the repository
git clone https://github.com/modernWebDev9/pokemon.git
# Install dependencies
cd pokemon
npm install
# Start Server (Terminal 1)
npm start
# Start JSON Server (Terminal 2)
npx json-server db.json --port 4000