Pokedex React App

Welcome to the Pokedex React App! This state-of-the-art application allows users to explore and analyze different Pokemon using various features. The application is developed using React and Redux for efficient state management, ensuring a seamless user experience.

Features

1. Search Bar

• Basic input field for users to search Pokemon by name or ID.

2. Infinite Scroll for Pokemon Listing

• Display an infinite scrollable list of Pokemon for a smooth browsing experience.

3. Interactive Pokemon Cards

• Each card displays Pokemon name, image, type, and ID with rich micro-interactions.

4. Pokemon Detail Modal

• Detailed Pokemon statistics appear in an intuitive modal dialog upon card click.

5. Real-time Type Filter

• Implement a filter functionality with a dropdown to filter Pokemon based on type without refreshing the page.

Pokemon Image API

• The Pokemon image is fetched from the Pokemon Image API using the following URL format:
  • https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/id.svg
  • Replace "id" in the URL with the respective Pokemon ID.

Tech Stack

• React
• Redux
• React Hooks
• Context API

Recommendations

• Candidates are encouraged to use advanced UI/UX frameworks like Ant Design, Semantic UI, or Tailwind CSS.
• Leverage your preferred tech stack and showcase your expertise in React.js or Next.js.

Judgment Criteria

1. Aesthetics of Application

   • Evaluate the overall appearance, user experience, and micro-interactions.

2. API Integration with Reactive Paradigm

   • Assess the integration of the Pokemon API with a reactive paradigm.

3. Interactive UI Components and State Handling

   • Examine the implementation of interactive UI components and the handling of application state.

4. React Best Practices and Advanced Patterns

   • Ensure strict adherence to React best practices and advanced patterns such as Render Props and Higher Order Components.

5. Code Modularity, Reusability, and Organization

   • Evaluate the codebase for modularity, reusability, and organizational structure.

6. Handling of Edge Cases, Application Errors, and Performance Optimizations

   • Check how well edge cases and errors are handled, and assess performance optimizations.

7. Appropriate Use of Life-cycle Methods, Hooks, Context API, and Other Advanced React Features

   • Examine the application's use of life-cycle methods, hooks, context API, and other advanced React features.

Getting Started

1. Clone the repository:

   git clone <repository_url>
   cd <repository_directory>