Frontend Developer Coding Challenge

screenshot of Frontend Developer Coding Challenge
nextjs
react
styled-components

Frontend Developer Coding Challenge

Are your looking for a remote developer job? Solve this frontend developer challenge and show us what you can do and what you are an expert at!

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.

nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

styled-components
Styled Components

Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.

ecommerce
Ecommerce

Ecommerce websites sell products or services to customers through an online storefront. These websites typically include features such as product listings, shopping carts, payment processing, and order management tools.

vercel
Vercel

Vercel offers built-in support for deploying and hosting Next.js applications, making it a popular choice among Next.js developers.