Coding Challenge
CHALLENGE
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.
You’ll notice there isn’t a responsive version of the app, you decide if you do something about it or not.
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.
Before getting started you should take a look at the API Documentation.
DOWNLOAD UI KITDELIVERY
This needs to ship. You should upload it to a public link (we recommend Zeit Now). 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’ve written a short article to help you out.
Once your code is ready send it via email to whoever sent it to you from Aerolab, or you can apply at aerolab.co/jobs if you got here some other way.
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 automatically win)
- Each product should have a visible price in points.
- 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.
This is what we expect of your product. If you choose to build it in any other way, it could still be valid, as long as it makes sense and it’s an improvement on the overall experience. We’re looking for creative solutions, so go ahead, take some risks and blow us away!
Tech
You have absolute freedom in which technology you choose to work on. We’d like to see how you solve the challenge, as well as which technologies you deem appropriate.
We want to see how you work and how innovative you can get. These are some keywords that we would keep in mind to do it, but you are not required to use any of them React, Vue.js, Next.js, Node, Service Workers, CSS Grids, Flexbox, PostCSS, Now, A-Frame.
To get started, click here to join the challenge. Take into acount that if you’ve already subscribed to the challenge through the terminal, there’s no need to do it again! Once you’re done you can submit your code by applying at aerolab.co/jobs.