PokéHub

Front-end web application where users can sign up, log in and manage their Pokémon troop.

Project Overview

PokéHub is a web application that allows users to sign up, log in, and manage their Pokémon collection. Users can interact with PokéHub by catching their favorite Pokémon from the dashboard and view their collection on the Pokéland page. The app integrates with the PokéAPI to fetch real-time Pokémon data and provides an interactive experience for users.


This project was given as a capstone project as part of my Interactive Media Design program at Algonquin College. The main objectives were to practice working with APIs, enhance my JavaScript skills, and create a user-friendly interface.

Goal

To create a user-friendly web app that allows users to explore, catch, and manage Pokémon while learning to integrate APIs and improve my JavaScript skills.

Process

I developed PokéHub with three main sections:

  1. Login: Allow users to sign up and log in to their accounts.
  2. Dashboard: Fetches Pokémon data from the PokéAPI, allowing users to catch and load new Pokémon.
  3. Pokéland: Displays caught Pokémon and allows users to train, battle, view stats or release them.

The project was built using HTML, TailwindCSS, and JavaScript. I utilized the Fetch API to retrieve data from the PokéAPI and implemented local storage to manage user sessions and Pokémon data. The UI focused on a clean and intuitive interface, ensuring a seamless user experience across different devices.


Throughout the development process, I encountered a few challenges:


  1. Challenge: Handling asynchronous API calls
    Solution: This was my first time working with APIs, so I had to learn how to properly use fetch() and handle promises using async/await. I also implemented error handling to manage failed requests.
  2. Challenge: I noticed when the sign up link was clicked, the HTML generated onto the page then quickly disappeared.
    Solution: By using preventDefault(), I was able to stop the form from resorting to its natural behavior.
  3. Challenge: Duplicate Pokémon being added to pokeArray when the user clicked "Catch" multiple times.
    Solution: I used some() method to check if a Pokémon was already caught before adding it to the collection.
  4. Challenge: Event listeners not being triggered as expected.
    Solution: Used event delegation by attaching listeners to parent containers (e.g., cardsContainer and pokeDisplay) and identifying the clicked element using event.target.closest().
  5. Challenge: The carousel did not update dynamically after releasing a Pokémon.
    Solution: This was a sore point for me because even though I tried calling createCarouselCard() to recreate the cards it still wasn't working. So I ennded up clearing the container first then call createCarouselCard() to recreate the cards and use window.location.reload() to refresh the page and show the updated carousel cards.

Overall, PokéHub was a valuable learning experience that enhanced my skills in web development and API integration. I look forward to applying the knowledge and skills gained from this project to future endeavors.

Tech Stack

HTML5

CSS3

JavaScript

Tailwind CSS Logo

TailwindCSS

GitHub

Key Features

  1. User authentication with sign-up and login functionality
  2. Dasboard page to explore and catch Pokémon using the PokéAPI
  3. Pokéland page to manage caught Pokémon, view stats, and release them
  4. Responsive design for seamless use on desktop and mobile devices
  5. Local storage to persist user and Pokémon data

What I Learned

This project taught me valuable lessons, including:

  1. How to effectively fetch and handle data from an API
  2. Implementing user authentication
  3. Data persistence using local storage
  4. Building a responsive UI with Tailwind CSS
  5. Additional array methods for data manipulation
  6. Event delegation for efficient event handling
  7. Debugging and problem solving skills

Links

Back to Projects