Full-Stack Engineer Assignment (JavaScript)

This assignment is a part of the selection process for Full Stack Engineer Job at Greendeck. Your task is to create MERN (MongoDB, Express, React, NodeJS) Stack app and host it on Heroku. Go through the details clearly. If you have any doubts or queries, do not hesitate to ask. We of course want you to solve the problem, but are equally interested to see how you solve it - the quality of your approach & code! We expect the response in a week. In case of any doubts, send a mail to [e-mail].

The Story

In the fashion industry, there are brands that manufacture and retailers that sell. Each brand usually partners with multiple retailers to sell their inventory. So, it may happen that there is a product that is being sold at multiple retailers. The retailers need to set the correct price in order to win over the customer and also take care of the fact that they don't lose out on profits. They have to keep a watch on both their own and their competition's pricing strategy. There is a ton of data that every retailer has to gather to make better pricing decisions. They track the brands, stock availability and prices among other things for each product. Net-a-porter (NAP) is a famous retailer in Europe. They have identified five competing retailers and have mapped each product in their own inventory with a similar product on their competition's catalogue. This is where you come in. The team at Net-a-porter has a few queries they want answered. They need a web app that processes and analyses the data and helps them in making day-to-day pricing decisions.

The Data

The data is in the form of a newline delimited JSON list. There are libraries you can use to parse the data; one such library is ndjson. There are approximately 5K products in the data-file. You can download it from here -- dataset (~35 MB). You will encounter some common fields like name, brand, price for each product. Some of the products have a field called similar_products which contains information about the matching products on competitor's website.

We recommend No-SQL DBs like MongoDB etc. Insert the data available json file to MongoDB using appropriate schema. To host the app, please use Heroku.

In case of any doubts, send a mail to [e-mail].

The Workflow of the App

A sample architecture for the webapp

The Question

Your task is to create a React app where products will be displayed along with certain filter options. Selection of the filters should generate an API call to the ExpressJS backend which would in turn query the MongoDB database and generate the required result. Here are a few filters that need to be implemented.

Filter 1

List all products where discount percentage is greater than, smaller than or equal to n. There will be a text field along with a dropdown where the user inputs a number n and an operator (i.e. "greater than", "smaller than", "equal" etc.). As an example, if the user enters the value of n as 12, and selects operator as "greater than", then those products should be listed whose discount percentage is greater than 12.

Selecting the filter should send a POST request to the backend and the backend should return a list containing the appropriate items. Here's an example POST request body

{
    filters: [
        { key: 'discount', value: 10, operator: 'greater_than' }
    ]
}

Note - The filter should be designed in such a way - both at the front end and the back end - that the filter field should be replaceable with minimal code changes. E.g. we asked you to make a filter for "discount percentage", but the same filter should work for other numerical fields such as "offer_price", "regular_price" etc. i.e. we should be able to make a filter called "Offer Price" which filters products based on the offer price without making much changes in the existing code.

Note 2 - There is no key for discount in the given data; you'll have to calculate the discount and discount percentage using the offer price and regular price provided in the data.

Filter 2

List all products which contain a specific string as their brand name. It will be a text field where the user will enter the brand name to be searched for. As an example, if the user enters "gucci", all the products with "gucci" as their brand name will be displayed on the dashboard. You have to implement substring matching so if the user enters "gucc", all gucci products will be matched. The search has to be case-insensitive.

Here's an example POST request

{
    filters: [
        { key: 'brand', value: 'nike', operator: 'contains' }
    ]
}

Note - As mentioned in the previous filter, this filter too has to be generic, i.e. the field "brand name" should be replaceable easily by other text fields such as "name" or "description_text".

Filter 3

List all products which are in or out of stock. This can be determined using the "stock" key in the data. The filter will contain a boolean field indicating whether to list items that are in or out of stock.

Here's how an example POST request could look like. It would list all products that are currently in stock.

{
    filters: [
        { key: 'stock_available', value: true, operator: 'equals' }
    ]
}

Filter 4

List all products that were created between a certain range of dates. i.e. use the "created_at" field to list only the product whose "created_at" field lies within the range specified by the user. You can use a calendar component if you want.

Here's how an example POST request body could look

{
    filters: [
        { key: 'created_at', value: ['10 April, 2020', '20 April, 2020'], operator: 'between' }
    ]
}

Combination of filters

Your filters should be stackable, i.e. any combination of filters can be applied at once. Here are a few examples of how such a POST request could look :

{
    filters: [
        { key: 'discount', value: 10, operator: 'greater_than' },
        { key: 'discount', value: 20, operator: 'smaller_than' },
        { key: 'brand', value: 'nike', operator: 'contains' }
    ]
}

The above request would list all Nike products whose discount percentage is between 10 and 20.

{
    filters: [
        { key: 'discount', value: 5, operator: 'greater_than' },
        { key: 'created_at', value: ['1 April, 2020', '5 April, 2020'], operator: 'between' },
        { key: 'brand', value: 'balenciaga', operator: 'contains' }
    ]
}

The above request would list all balenciaga products listed between 1 April and 5 April whose discount percentage is greater than 5.

These are just a few examples, your backend should be able to handle all such possible combinations.

Sample UI

Here is a sample view of how the web app should look, it is similar to how a lot of e-commerce websites look. You can of course choose the layout to be whatever you want as long as it is user-friendly. You can use various pre-existing React component libraries such as SemanticUI, MaterialUI, AntDesign etc.

An example layout

Submission details

Follow the below instructions for your submission :

• Upload your code in a private repository on GitHub, Gitlab or Bitbucket.

• Host your code on Heroku. In case you are new to hosting web apps on heroku, you can follow the instructions in the given link for deploying your Node app on Heroku -- https://devcenter.heroku.com/articles/getting-started-with-nodejs

• Send an email to [e-mail] with the subject "Full stack assignment" and mention the following details in your email -

  • Your repository link

  • The Heroku URL of your web-app.

We are expecting a submission within 10-12 days.

Scoring details

Your assignment will be judged on the following parameters

• The cleanness of your code, i.e. use sane variable names, use comments wherever necessary, proper indentation -- use a linter if you must.

• Clean UI/UX.

• Modularity of code. As already mentioned in the filter details -- the filters should be easily replaceable by other filters of the same type; i.e. the brand name filter should be easily replaceable by other text based filters such as "product name" or "product description"

Most importantly, we encourage you to submit your results even if you feel they are not up to the mark.

Good luck!

In case of any doubts, send a mail to [e-mail]