docs: 2024 new challenge

Author: lucasromerodb

README.md

@@ -1,108 +1,122 @@
-![Aerolab's Frontend Developer coding challenge](assets/github-cover-aerolab-frontend-developer-coding-challenge.png)
-# Aerolab Frontend Developer coding challenge
+# Aerolab Coding Challenge (for frontend developers)
 
-The challenge is to build a catalog view for a loyalty program app. We’ll provide you with the base UI and API, you can use it as provided or you can make any improvements you deem fit. It’s up to you, your imagination and your skills to come up with new solutions and/or interactions between the components.
+> Check out our 2022 coding challenge [here](https://github.com/Aerolab/frontend-developer-coding-challenge/tree/2022)
 
-Remember that the product’s main goal is to help users redeem items through a points-based system. We expect your end-product to be both visually attractive and functionally effective.
-
-* [Acceptance Criteria](#Acceptance-Criteria)
+* [Overview](#Overview)
 * [Tech Stack](#Tech-Stack)
+* [IGDB API](#IGDB-API)
+* [Requirements](#Requirements)
 * [Design resources](#Design-resources)
-* [API Documentation](#API-Documentation)
 * [Delivery](#Delivery)
-* [Aerolab career opportunities](#Aerolab-careers-opportunities)
-
-## Acceptance Criteria
-
-Users have an undetermined amount of points accumulated, and each product is worth a set amount of points. We’ll test the product you submit, along with the code it is written in, and any additional interactions or layers you’d like to add.
-
-We want to see how your code’s UI interacts with different states and user interactions, so your product should comply with the following guidelines
-
-(Keep in mind that the jury will also take into account the quality of the submitted code. Simply meeting this criteria doesn’t mean your solution will be the best)
-
-Feel free to reach one of the following levels of quality based on your skills. Show us what you can do and what you are an expert at! 💪
-
-### Level 1 - It works! ⚙️
-
-- Make a desktop version
-- Each product should have a visible price in points.
-- Link to the project GitHub repository (footer)
-- The user should be able to sort products by price, from highest to lowest, and vice-versa.
-- The user should be able to see how many points they have in their account.
-- There should be a clear way for the user to distinguish those products that they can redeem from those they cannot.
-- A “Redeem” button should be available for those products that the user has enough points to claim.
-- A “Redeem now” option should appear when the user interacts with a product that they have enough points to claim.
-- When the user doesn’t have enough points for a product, they should be able to see how many more points they need to claim it.
-- The user should not be able to redeem a product for which they don’t have enough points.
-- When the user clicks on the Redeem now button, the system should automatically deduct the item’s price from the users’ points.
-- The user should be able add points to their account
-
+* [About Aerolab and career opportunities](#Aerolab)
 
-### Level 2 - Eye Candy 💅
+## Overview
 
-- *All of above*
-- Make a mobile responsive version
-- The "view all products" button (on Hero/Header section) should scroll view to listed products
-- Make the "Browse, Choose, Enjoy" section
-- Put all your effort into making the site look beautiful
-- Pay attention to details and the design system we provide you
-- The user should be able to filter products by category
-- The user should be able to use the pagination to view more listed products
+Your task is to create a web application that allows users to search for and digitally collect video games, using the IGDB API and browser/device storage. The project must be built using the Next.js App Router. Styling is flexible, but we recommend using Tailwind CSS or CSS Modules. The final product should be functional, visually appealing, and provide a great user experience. Feel free to add any extra features or custom styling as you see fit.
 
-### Level 3 - Mind-blowing 🤯
+> You’re welcome to use any additional libraries you find helpful for the challenge.
 
-- *All of above*
-- Make a tablet responsive version
-- Make some visual tweaks (animations, micro interactions, etc)
-- Put all your effort on website performance (images, web vitals, network optimization, etc)
-- Be careful about SEO (metadata, markup semantics, SSR, etc.)
-- Be careful about Accesibility (keyboard navigation, narrator, markup semantics, etc.)
-- Be careful about environment variables security
-- If you want you can make some unit or integration tests
+![wireframes](docs/aerolab-coding-challenge-wireframes.png)
 
 ## Tech Stack
 
-We recommend that you use the following technologies, which are aligned with the daily work we do at Aerolab 🪁 and which in this case we believe are also adequate to solve the challenge.
-
-### We recommend
-
-- [**NextJS (app router)**](https://nextjs.org/) (SSR framework)
-- [**CSS Modules**](https://github.com/css-modules/css-modules) or maybe:
-  - [**Styled Components**](https://styled-components.com/) (styles)
-  - [**Styled JSX**](https://github.com/vercel/styled-jsx)
-  - [**Tailwind CSS**](https://tailwindcss.com/)
-- [**Vercel**](https://vercel.com/) (deploy)
-
-### Optionally
-
-- *Typescript (data types)*
-- *Jest + React Testing Library (testing)*
-
-> 😎 You can use any additional library you need to carry out the challenge.
-
-> 👍 BTW, we can be flexible if you feel comfortable with any other technology or if you want to combine them in different ways. You can use other stack like *CRA, VueJS, NuxtJS, Remix, Svelte, Angular, React Native, Flutter, Heroku, Digital Ocean, Stitches CSS, Styled JSX, SASS, CSS Modules,* etc...
+We recommend using the following technologies to align with the tools we use at Aerolab and to ensure an efficient and scalable solution for this challenge. These tools will help you meet performance, usability, and maintainability standards:
+
+
+### Recommended Tools
+- TypeScript for type safety and data modeling.
+- Next.js (App Router) for server-side rendering and routing.
+- Tailwind CSS or CSS Modules for styling.
+- Radix, shadcn, MUI for UI components.
+- Vercel for deployment.
+- Postman or HTTPie for API request testing.
+- (Optional) React Testing Library for testing.
+
+> Yes, you can use AI to enhance any part of the project, or even integrate it into your solution.
+
+
+## IGDB API
+
+### API Account Setup
+- Sign up at [IGDB](https://www.igdb.com/)
+- Review the [IGDB API Documentation](https://api-docs.igdb.com/#getting-started)
+
+### Useful Tips
+- 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](https://api-docs.igdb.com/#images).
+- The challenge can be solved using only the `/games` endpoint.
+- When working with game release dates, just use `first_release_date` property.
+- You can filter, exclude and sort data using the API, see [IGDB Filter Documentation](https://api-docs.igdb.com/#filters)
+
+## Requirements
+
+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! 💪
+
+### General
+- 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.
+
+### Home 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.
+- (Optional) Users should be able to remove collected games.
+
+### Search Feature
+- 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.
+
+### 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.
+
+### Extra Considerations
+- 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.
 
 ## Design resources
 
-We've crafted a beautiful design for this coding challenge. We provide your a Figma access to all of resources like, views, design systems, responsive adaptations, typography, styles, and more.
+🚧 The design is still in progress, and we’ll share the final Figma file once it’s ready. In the meantime, you can work from [wireframes](https://www.figma.com/design/3O7BxHFnSSawJeny3lXWkE/Aerolab-Frontend-Developer-Coding-Challenge---Public?node-id=16692-3191&t=4j9KGkZuF4bA2zbD-4) to complete the challenge. You’re welcome to use any component library, such as shadcn, or even create your own custom designs.
 
-- [Figma design here](https://www.figma.com/file/3O7BxHFnSSawJeny3lXWkE)
+## Delivery
 
-## API Documentation
-- Read our [API Documentation](https://aerolabchallenge.docs.apiary.io/)
-- [Claim your API token](https://aerolab.co/coding-challenge) and have access to endpoints (type `join` and write your **email**. Then you'll receive some details and the API token)
+This needs to ship. You should upload the project to a public link (we recommend [Vercel](https://vercel.com/)). You should also upload it to Github so we can review the code.
 
-## Delivery
+In case you need a hand in getting your site to go live, we recommend you read the [Vercel Docs](https://vercel.com/docs/concepts/deployments/overview) to help you out.
 
-This needs to ship. You should upload the project to a public link (we recommend [Vercel](https://vercel.com/)). You should also upload it to Github so we can review the code.
+🚀 Once your code is ready send the public link and repository link via email to whoever sent it to you from Aerolab, or you can apply at https://aerolab.co/jobs if you got here some other way.
 
-In case you need a hand in getting your site to go live, we recommend you read the [Vercel Docs](https://vercel.com/docs/concepts/deployments/overview) to help you out.
+### Expected Deliverables
 
-🚀 Once your code is ready send the public link and repository link via email to whoever sent it to you from Aerolab, or you can apply at https://aerolab.co/jobs if you got here some other way.
+- A live, deployed demo of the project.
+- Access to the codebase via a public repository.
+- API request collection (using Postman or HTTPie).
 
-> _If you feel uncomfortable building fancy user interfaces then try our [alternative challenge](https://github.com/Aerolab/fullstack-developer-coding-challenge) (Disclaimer: we'll prioritize the original challenge)_
+### Evaluation Criteria
 
----
+- 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.
 
 ## Aerolab