Purpose and Context:
Pokepedia is a web application that serves as a Pokédex, displaying a list of 200 Pokémon. Developed as a personal project, it demonstrates my skills in front-end web development and working with external APIs.
Objective:
The primary objective of the project was to create an interactive and user-friendly Pokémon index. The app allows users to view detailed information about each Pokémon by clicking on their respective buttons.
Credits:
This project was undertaken solely by me as the developer. While I utilized various resources and documentation, all aspects of development were handled independently.
Duration:
The project was completed over a span of two weeks, focusing on front-end development and integration with the Pokémon API.
Step 1: Project Initiation
- Purpose and Impact: Initiating the project laid the foundation for development, ensuring a structured environment.
- Importance of this Step: It enabled smooth project setup and dependency management.
- Technologies and Skills Employed: Utilized HTML, CSS, JavaScript, and Bootstrap for project setup and initial development.
- What went well: Efficient setup of the project structure and initial styling using Bootstrap.
- Challenges and how I solved them: Addressed initial layout issues by iterating over design prototypes and seeking feedback.
- Decision Process: Chose Bootstrap for its responsive design capabilities and ease of use.
Step 2: API Integration
- Purpose and Impact: Integrating the Pokémon API was crucial for fetching and displaying Pokémon data.
- Importance of this Step: It provided the core functionality of the app, allowing dynamic data retrieval.
- Technologies and Skills Employed: Used JavaScript to fetch data from the Pokémon API.
- What went well: Smooth integration with the API and successful retrieval of Pokémon data.
- Challenges and how I solved them: Managed asynchronous data fetching and handled API response errors effectively.
- Decision Process: Selected the Pokémon API for its comprehensive and well-documented data on Pokémon.
Step 3: Modal Window Implementation
- Purpose and Impact: Implementing the modal window was essential for displaying detailed Pokémon information.
- Importance of this Step: It enhanced user interaction and provided a seamless way to view additional data.
- Technologies and Skills Employed: Used JavaScript and Bootstrap modals for creating the modal windows.
- What went well: Smooth implementation of modals with responsive design and intuitive controls.
- Challenges and how I solved them: Ensured proper handling of modal opening and closing events to maintain a good user experience.
- Decision Process: Chose Bootstrap modals for their ease of integration and built-in features.
Conclusion:
The development of Pokepedia provided valuable insights into front-end web development and API integration. Through overcoming challenges and making informed decisions, I enhanced my skills in JavaScript, HTML, CSS, and working with external APIs. This project serves as a testament to my ability to deliver a functional and interactive web application within a specified timeframe.
