Arcade Assembly is a single-page MERN-stack application created to bring gamers together in an immersive community, allowing them to connect and team up for gaming sessions. The app combines a scalable MongoDB back end, a GraphQL API, and an Express.js and Node.js server with a React front end to provide users with an intuitive and seamless experience. The core functionality of Arcade Assembly revolves around creating a space where gamers can discover new titles, organize sessions with fellow gamers, and enhance their overall gaming experience. Users can explore a wide range of games, from popular AAA titles to more obscure indie games, building a well-rounded community of passionate gamers.
One of the standout features of Arcade Assembly is the use of the IGDB (Internet Games Database) API, which allows users to search for games and retrieve detailed information such as cover images, release dates, and game modes. Setting up IGDB API integration was an essential part of the app, involving OAuth authentication to secure access. The application required proper configuration of environment variables, such as the CLIENT_ID and ACCESS_TOKEN, to ensure smooth API communication. I also spent significant time troubleshooting authorization failures, ensuring that the headers contained the correct Bearer token and client ID to make successful API requests.
To handle game search functionality, I implemented the back-end logic using the fetch API, which allowed users to query the IGDB for relevant game information. This was achieved through a searchGames function that made a POST request to the IGDB API, passing the user's search query along with specific fields like cover images, release dates, and game modes. The request was authorized using the Bearer token and Client-ID, which were retrieved from environment variables. I added error handling to check the response status and return meaningful errors when the authorization failed or the API response wasn't successful.
Additionally, I created a clean function to process the data returned by the IGDB API. This function ensured the data was in the correct format before being sent back to the front end. For example, it checked if each game had a cover image, and if it did, it formatted the image URL to display a larger version. It also transformed the first_release_date field into a simplified date format and converted the game's ID into a string. This data transformation made it easier to handle and display the game information on the client side. If the API returned data that wasn't an array, the function threw an error to prevent further issues. This approach streamlined the data flow, ensuring only clean and usable game information reached the front end.
This back-end logic, combined with the React front-end interface, created a seamless experience for users searching for games. The search results were displayed dynamically, allowing users to explore game titles easily, with detailed information pulled directly from the IGDB API. This structure made sure the app could efficiently handle multiple queries while providing accurate, relevant game dat
The typeDefs.js file in Arcade Assembly defines the GraphQL schema, outlining the structure for users, games, and lobbies, as well as the queries and mutations used to interact with the data. Key types include User, which stores details like username, email, friends, and lobbies they’ve joined, and Game, which holds game-specific information such as the igdb ID, name, and cover image. Each game is associated with multiple Lobbies, where users can connect for gaming sessions. Mutations like createLobby, join, and leave allow users to manage lobbies, while queries like getGameLobbies enable searching for lobbies based on specific games.
GraphQL played a crucial role in efficiently managing data, allowing us to fetch only the necessary information for each request, reducing load times and enhancing the user experience. This scalability was critical in handling a wide range of games while keeping the interface responsive. Using React’s component-based architecture, we built reusable components for game listings, user sessions, and search features, further improving maintainability and scalability of the app.
Future Development
In future updates, real-time features like GraphQL subscriptions could notify users when new players join a lobby or when sessions are updated. Adding more metadata from IGDB, such as game reviews or gameplay stats, could enrich the game data available in the app. Enhanced social features like lobby chat, notifications for friends' activities, and scheduled game sessions would improve user engagement. Additionally, integrating notifications for friend requests or game updates would further enhance the community-driven nature of the app.
