A modern, performant Pokédex application built with Next.js 15, TypeScript, and Tailwind CSS. Features include Pokemon browsing, detailed information views, search/filter capabilities, favorites management, and dark mode support.
🚀 Live Demo: https://automatedpros-assessment-nextjs.vercel.app/
- Node.js: 18.x or higher
- npm: 9.x or higher
- Git: For version control
git clone https://github.com/webdev415/automatedpros-assessment-nextjs.git
cd automatedpros-assessment-nextjsnpm installnpm run devOpen http://localhost:3000 in your browser.
| Command | Description |
|---|---|
npm run dev |
Start development server with hot-reload on port 3000 |
npm run build |
Build production-optimized application |
npm start |
Start production server (requires build) |
npm run lint |
Run ESLint for code quality checks |
automatedpros-react-assessment/
├── src/
│ ├── app/ # Next.js app router pages
│ │ ├── home/ # Home page components
│ │ │ ├── components/ # Home-specific components
│ │ │ └── index.ts # Barrel exports
│ │ ├── pokemon/
│ │ │ └── [id]/ # Dynamic Pokemon detail pages
│ │ ├── layout.tsx # Root layout with providers
│ │ ├── page.tsx # Home page entry
│ │ └── globals.css # Global styles
│ │
│ ├── components/ # Shared UI components
│ │ ├── layout/ # Layout components (Header, ThemeToggle)
│ │ ├── pokemon/ # Pokemon-specific reusable components
│ │ └── ui/ # Generic UI components
│ │
│ ├── hooks/ # Custom React hooks
│ │ ├── useDebounce.ts # Debounce hook for search
│ │ ├── useFavorites.ts # Favorites management
│ │ ├── usePokemon.ts # Pokemon data fetching
│ │ └── useURLState.ts # URL state synchronization
│ │
│ ├── services/ # API and external services
│ │ └── api/
│ │ ├── client.ts # API client configuration
│ │ └── pokemon.ts # Pokemon API endpoints
│ │
│ ├── providers/ # React context providers
│ │ ├── FavoritesProvider.tsx # Favorites state management
│ │ ├── QueryProvider.tsx # React Query setup
│ │ └── ThemeProvider.tsx # Dark mode theme
│ │
│ ├── lib/ # Utilities and constants
│ │ ├── constants.ts # App-wide constants
│ │ └── queryClient.ts # React Query configuration
│ │
│ └── types/ # TypeScript type definitions
│ ├── api.ts # API response types
│ └── pokemon.ts # Pokemon data models
│
├── public/ # Static assets
├── tailwind.config.ts # Tailwind CSS configuration
├── next.config.ts # Next.js configuration
└── tsconfig.json # TypeScript configuration
-
Component Architecture
- Atomic design principles with UI primitives in
/components/ui - Feature-based component organization
- Barrel exports for clean imports
- Atomic design principles with UI primitives in
-
State Management
- React Query for server state (Pokemon data)
- Context API for client state (favorites, theme)
- URL state synchronization for search/filters
-
Data Fetching Strategy
- React Query with aggressive caching
- Optimistic updates for favorites
- Parallel data fetching where possible
- Graceful error handling with fallbacks
-
Performance Optimizations
- Suspense boundaries for streaming SSR
- Image optimization with Next.js Image component
- Debounced search inputs
- Virtual scrolling for large lists (planned)
- Static generation where applicable
| Technology | Purpose |
|---|---|
| Next.js 15.5 | React framework with App Router |
| TypeScript 5 | Type safety and better DX |
| Tailwind CSS 3.4 | Utility-first styling |
| React Query 5 | Server state management |
| next-themes | Dark mode support |
| Lucide React | Icon library |
| PokeAPI | Pokemon data source |
- ✅ Pokemon Browser - Paginated list with lazy loading
- ✅ Search & Filter - Real-time search by name/ID
- ✅ Type Filtering - Filter by Pokemon types
- ✅ Generation Filter - Browse by generation (I-IX)
- ✅ Sorting Options - Sort by ID or name
- ✅ Pokemon Details - Stats, abilities, evolution chains
- ✅ Favorites System - Persistent favorites with localStorage
- ✅ Dark Mode - System-aware theme switching
- ✅ Responsive Design - Mobile-first approach
- ✅ Loading States - Skeleton screens and placeholders
- ✅ Error Handling - Graceful error boundaries
The application integrates with the PokeAPI for all Pokemon data:
- Base URL:
https://pokeapi.co/api/v2 - Endpoints used:
/pokemon- List and details/pokemon-species- Species information/evolution-chain- Evolution data/type- Type-based filtering
- Implement virtual scrolling for Pokemon list
- Add service worker for offline support
- Optimize bundle size with dynamic imports
- Implement image preloading strategies
- Add Redis caching layer for API responses
- Advanced search with multiple criteria
- Pokemon comparison tool
- Team builder functionality
- Battle simulator
- Pokedex completion tracking
- User profiles and authentication
- Social features (share teams, trade)
- Add comprehensive test coverage (Jest + React Testing Library)
- Set up E2E tests with Playwright
- Implement error monitoring (Sentry)
- Add performance monitoring
- Set up CI/CD pipeline with GitHub Actions
- Add API rate limiting middleware
- Implement request deduplication
- Add animations and transitions
- Implement keyboard navigation
- Add accessibility features (ARIA labels, focus management)
- Create onboarding tutorial
- Add data visualization for stats
- Implement infinite scroll option
- Add sound effects and music toggles
- ESLint configuration for code quality
- Prettier for consistent formatting
- TypeScript strict mode enabled
- Conventional commits for version control
Currently, no environment variables are required. The app uses the public PokeAPI.
For future enhancements, create a .env.local file:
# Example future environment variables
NEXT_PUBLIC_API_URL=https://pokeapi.co/api/v2
NEXT_PUBLIC_ANALYTICS_ID=your-analytics-id