Your task is to create a web application that allows users to digitally search and collect video games, using the IGDB API and browser/device storage. The project can be built using pure HTML or modern frameworks like Astro or Next.js. Styling is flexible, but we recommend using Tailwind CSS. The final product should be functional, visually appealing and provide a great user experience. Feel free to add additional features or custom styles as you see fit.
You’re welcome to use any additional libraries you find helpful for the challenge.
Important
You should prioritize the responsive/mobile design; the desktop design is optional but we expect at least a clean and polished appearance. Access the Figma design here to complete the challenge.
We recommend using the following technologies to align with the tools we use at Eleven and to ensure an efficient and scalable solution for this challenge. These tools will help you meet performance, usability, and maintainability standards:
TypeScriptfor type safety and data modeling.Pure HTMLor frameworks such asAstroorNext.js.Tailwind CSSorCSS Modulesfor styling.Radixorshadcnfor UI components.Vercelfor deployment.PostmanorHTTPiefor API request testing.- (Optional)
React Testing Libraryfor testing. - (Optional) Yes, you can use
AIto enhance any part of the project, or even integrate it into your solution.
- Sign up at IGDB
- Review the IGDB API Documentation
- To fetch images, use the structure
https://images.igdb.com/igdb/image/upload/t_{size}/{hash}.jpg - For available image sizes and details, see IGDB Image Documentation.
- The challenge can be solved using only the
/gamesendpoint. - When working with game release dates, just use
first_release_dateproperty. - You can filter, exclude and sort data using the API, see IGDB Filter Documentation
Your project should let users search for video games via the IGDB API and save selected games to a collection using browser or device storage. It must be fully responsive, handle loading states and errors properly, and give clear feedback for user actions like adding or removing games.
The design should look polished, with consistent styling throughout. Remember, code quality matters—simply meeting the criteria isn’t enough. Show off your skills and creativity! 💪
- The website must be fully functional on both desktop and mobile devices.
- (Optional) Open Graph metadata should appear when sharing any URL.
- (Optional) Dynamic Open Graph metadata should be present when sharing a game detail page.
- The logo should be visible and clickable, returning the user to the home screen.
- Users should be able to search for games using a search input.
- If no games have been collected, an empty state should be displayed.
- Collected games should be shown as cover art in a grid layout, with sorting options by release date or date added.
- When a collected game is clicked, the user should be redirected to the game's detail page.
- (Optional) Users should be able to remove collected games.
- Search results should update dynamically as the user types. Be mindful of IGDB API rate limits, so ensure efficient handling of real-time searches.
- Each result should include the game’s cover art and title.
- (Optional) Clicking on the input before typing should display suggested results.
- Users should be able to browse 5–10 results via the search input (if available).
- (Optional) Up to 50 search results should be shown (if available).
- Clicking a result should navigate the user to the game detail page.
- The logo should be visible and clickable, returning the user to the home screen.
- Users should be able to search for games via an input on this page.
- The page must display the game's cover art, title, rating, release date, platforms, and how many years ago it was released.
- Users should be able to collect the game and see if it's already collected.
- (Optional) Collected games should be removable, with notifications for adding or removing games.
- Screenshots of the game should be displayed, along with a list of similar games.
- (Optional) Users should be able to click on each similar game and navigate to an internal link.
- The URL should use a friendly slug format instead of an ID.
- Incorporate visual enhancements like animations and micro-interactions.
- Prioritize performance (optimize images, web vitals, and network usage).
- Ensure SEO best practices (metadata, semantic markup, SSR).
- Focus on accessibility (keyboard navigation, screen reader support, semantic HTML).
- Protect environment variables and sensitive data.
- (Optional) Implement a login system with Supabase or similar.
- (Optional) Add unit or integration tests.
This needs to ship. You should upload the project to a public link (we recommend Vercel). You should also upload it to Github so we can review the code.
In case you need a hand in getting your site to go live, we recommend you read the Vercel Docs to help you out.
🚀 Once your code is ready send the public link and repository link via email to whoever sent it to you from Eleven Estudio, or you can apply at Contact Us if you got here some other way.
- A live, deployed demo of the project.
- Access to the codebase via a public repository.
- (optional) API request collection (using Postman or HTTPie).
- Understanding and implementation of API requests, payloads, and documentation.
- Effective data and state management.
- Search functionality and user interaction handling.
- Website performance, including asset optimization, payload size, and loading times.
- Project documentation (codebase, readme, etc.)
- Project metadata (open graph, sitemap, favicons, etc.)
Follow Eleven Estudio on social networks