Skip to content

metadot/aksel-poke-dex-explorer

Repository files navigation

PokéDex Explorer

A Pokémon browser application built with Angular that allows users to explore the world of Pokémon using the PokéAPI.

Project Overview

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

Technologies Used

  • Angular (Latest version)
  • TypeScript
  • Signals for reactive programming
  • Angular Router
  • PokéAPI for Pokémon data

Project Structure

This section will be filled in as you develop the application. Consider how you might organize your code using Angular best practices.

Development Milestones

The project is divided into 10 progressive milestones:

  1. Project Initialization: Setting up the Angular project and landing page
  2. Navigation: Implementing routing between components
  3. API Integration: Fetching and displaying Pokémon data from PokéAPI
  4. Component Interaction: Creating reusable Pokémon components with inputs/outputs
  5. Reactivity: Implementing reactive state management
  6. Derived State: Managing selected/filtered Pokémon data
  7. Async Data Handling: Implementing loading states and error handling
  8. Custom Directives & Pipes: Enhancing the UI with custom Angular features
  9. Route Guards: Implementing protected routes
  10. HTTP Interceptors: Adding global HTTP request/response handling

Getting Started

Prerequisites

  • Node.js
  • npm or yarn package manager

Installation

  1. Clone the repository:

    git clone <repository-url>
    cd aksel-poke-dex-explorer
  2. Install dependencies:

    yarn install
  3. Start the development server:

    yarn start
  4. Open your browser and navigate to http://localhost:4200

Development Environment

You'll need to set up appropriate environments for your application:

  • Development
  • Testing
  • Production

Best Practices

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

Learning Resources

License

This project is created for educational purposes as part of an internship training program.

About

Internship Angular learning project

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors