A Pokémon browser application built with Angular that allows users to explore the world of Pokémon using the PokéAPI.
This Angular application serves as a training project for interns to learn and apply core Angular concepts. The PokéDex Explorer will allow users to:
- Browse a list of Pokémon
- View detailed information about each Pokémon
- Navigate between different pages
- Experience protected routes
- Interact with dynamically displayed data
- Angular (Latest version)
- TypeScript
- Signals for reactive programming
- Angular Router
- PokéAPI for Pokémon data
This section will be filled in as you develop the application. Consider how you might organize your code using Angular best practices.
The project is divided into 10 progressive milestones:
- Project Initialization: Setting up the Angular project and landing page
- Navigation: Implementing routing between components
- API Integration: Fetching and displaying Pokémon data from PokéAPI
- Component Interaction: Creating reusable Pokémon components with inputs/outputs
- Reactivity: Implementing reactive state management
- Derived State: Managing selected/filtered Pokémon data
- Async Data Handling: Implementing loading states and error handling
- Custom Directives & Pipes: Enhancing the UI with custom Angular features
- Route Guards: Implementing protected routes
- HTTP Interceptors: Adding global HTTP request/response handling
- Node.js
- npm or yarn package manager
-
Clone the repository:
git clone <repository-url> cd aksel-poke-dex-explorer
-
Install dependencies:
yarn install
-
Start the development server:
yarn start
-
Open your browser and navigate to
http://localhost:4200
You'll need to set up appropriate environments for your application:
- Development
- Testing
- Production
As you develop this project, consider following these coding principles:
- Clean, organized code structure
- Component-based architecture
- Reactive programming patterns
- Proper error handling
- Comprehensive documentation
- Responsive design
This project is created for educational purposes as part of an internship training program.