Overview

Aerolab is challenging frontend developers to create a catalog view for a loyalty program app. The main goal of the product is to help users redeem items through a points-based system. The challenge allows developers to showcase their skills and creativity by coming up with new solutions and interactions. The end product should be visually attractive and functionally effective.

Features

• Level 1: It works! - Create a desktop version with visible prices for products. Users should be able to sort products by price and see how many points they have in their account. There should be a clear distinction between redeemable and non-redeemable products. Redeem buttons should be available for products with enough points, and a “Redeem now” option should appear when interacting with a product that can be redeemed. Users should be informed of the points needed if they don’t have enough, and they should not be able to redeem products they can’t afford. Clicking on “Redeem now” should deduct the item’s price from the user’s points. Users should also be able to add points to their account.

• Level 2: Eye Candy - In addition to the Level 1 functionalities, create a mobile responsive version of the app. The “view all products” button should scroll the view to the listed products. Pay attention to details and the provided design system. Users should be able to filter products by category and use pagination to view more listed products.

• Level 3: Mind-blowing - In addition to the Level 1 and 2 functionalities, create a tablet responsive version. Make visual tweaks such as animations and micro interactions.

Installation

The installation guide for the Aerolab Frontend Developer coding challenge is as follows:

1. Clone the project repository from the provided GitHub link in the footer.
2. Open the project in your preferred code editor.
3. Install the required dependencies using the package manager of your choice (e.g., npm or yarn).
4. Start the development server to run the app locally.

Summary

In this coding challenge, Aerolab is inviting frontend developers to build a catalog view for a loyalty program app. The challenge allows developers to showcase their skills and creativity by enhancing the provided UI and API. The main focus is on helping users redeem items through a points-based system. The challenge is divided into three levels of difficulty, each with its own set of features to implement. Developers are expected to create visually attractive and functionally effective solutions.