Game Hub

The universe of games

An interactive online store focused on providing an immersive gaming experience.

HTML, CSS, JavaScript

API Integration

Theme Switching

Modular JavaScript

GitHub (Version Control)

CSS Variables & Utility Classes

My Role in the Project

Game Hub was developed as part of my first JavaScript project. I was responsible for every aspect of the project, including:

Design and Development: This was my first full HTML, CSS, and JavaScript project, including the design of multiple interactive elements such as a theme switcher and dynamic review system.
JavaScript Logic: The store dynamically fetches game data from the GameHub API and uses JavaScript to handle filtering, cart management, and random review generation.
Testing and Accessibility: I followed WCAG guidelines and used ARIA attributes to ensure that the site is accessible, including for the theme switcher and cart functionality. Testing was done across multiple devices and browsers.
Deployment: The project was deployed on GitHub Pages, handling version control via GitHub.

This project allowed me to develop my skills in JavaScript logic, API usage, and front-end development.

API Integration for Dynamic Game Data: Managing API requests and handling dynamic content from the GameHub API required asynchronous programming and troubleshooting response data.
Responsive Design Across Devices: Ensuring that the game grid and single game pages adapted seamlessly across all devices was a major focus during development.
Theme Switcher & Accessibility: I built a theme switcher with 8 color schemes, focusing on making each theme accessible to users based on WCAG guidelines.
Performance Optimization: I used CSS variables for theme management and optimized image loading to improve overall performance and user experience.

Dynamic Product Display The product grid dynamically displays games fetched from the GameHub API, allowing for real-time updates.

Cart and Checkout Functionality Users can add games to their cart and proceed to a checkout simulation with a live summary of items.

Theme Switching Users can switch between 8 different themes, with theme preferences stored for the session.

Dynamic Review Generator A random review is generated for each game, with dynamic icons, ratings, and review text.

Responsive Design The site adapts seamlessly to various screen sizes, from mobile phones to desktops, ensuring an optimized experience.

Working with JavaScript: This project was my first time writing JavaScript from scratch, allowing me to deepen my understanding of DOM manipulation, event handling, and async programming.
Using CSS Variables: I implemented CSS variables for theme switching, making it easier to manage and update the color schemes across the site.
Error Handling & API Debugging: I learned a lot about debugging API-related issues and implementing user-friendly error messages.

Rewrite Code for Efficiency: Now that I have learned more, I plan to refactor the code for better structure and maintainability.
Improve Loading Screen: I want to implement a more interactive loading screen to enhance the user experience.
Fix Bugs: There are a few minor bugs I need to fix, especially regarding the theme switcher and cart functionality.
Implement Preferred Data Theme Recognition: I plan to update the theme switcher so it can recognize and automatically apply the user's preferred theme from their device settings.

These improvements reflect my commitment to continuously improving the Game Hub platform.

View Live

Check out the live version of the Game Hub platform or explore the source code on GitHub to see how it's built.