🎮 GameScope – Game Explorer Web App 📌 Overview

GameScope is a web-based application built as part of my second semester Computer Science project. The goal of this project was to apply core JavaScript concepts in a practical way by integrating a public API and building an interactive user interface.

The application allows users to explore video games, view their ratings, genres, and platform availability, and interact with the data through features like search, filtering, and sorting.

🎯 Purpose

This project was designed to strengthen my understanding of:

JavaScript fundamentals Working with APIs using fetch DOM manipulation Array Higher-Order Functions (HOFs) Building responsive and interactive UIs

It also helped me understand how real-world applications manage and display dynamic data.

⚙️ Technologies Used HTML – Structure of the web application CSS – Styling and responsive layout JavaScript – Core logic and interactivity Public API – Game data fetched from the RAWG Video Games Database API 🚀 Features 🔍 Search

Users can search for games by name in real-time using a dynamic search bar.

🎯 Filtering Filter games by genre (Action, RPG, etc.) Filter games by platform (PC, PlayStation, Xbox)

🔃 Sorting Sort games by rating (high to low) Sort games alphabetically (A–Z)

❤️ Favorites Users can mark games as favorites Favorites are stored using localStorage and persist after refresh

🌙 Dark Mode Toggle between light and dark themes User preference is saved in localStorage

🎮 View Details Users can click “View Details” to open a modal Displays additional information like genres and platforms

📱 Responsive Design Works across desktop, tablet, and mobile screen sizes

🧠 Key Concepts Applied fetch() for API integration Array HOFs: filter() for search and filtering sort() for sorting some() for nested data handling find() for retrieving specific game details Event handling (addEventListener) DOM manipulation Local storage for persistence

💡 Challenges Faced Handling nested API data (genres, platforms) Managing multiple filters together Debugging API and DOM-related errors Structuring code to keep it clean and readable

📈 Learning Outcomes Through this project, I learned how to:

Work with real-world APIs Structure JavaScript code efficiently Debug errors systematically Build user-friendly interfaces Think in terms of reusable and modular functions

🚀 Future Improvements Add pagination or infinite scrolling Display detailed system requirements for games Improve UI with animations Add user authentication 🙌 Final Thoughts

This project was a great hands-on experience that helped me connect theoretical concepts with practical implementation. It gave me confidence in building real-world web applications and improved my problem-solving skills significantly.