ascii-warehouse-demo

Discount Ascii Warehouse

This is an ecommerce site, where you can buy all sorts of ascii faces like (ノ・∀・)ノ and ¯_(ツ)_/¯, in a wide variety of font sizes. The homepage should display a list of products for people to browse.

Requirements

Your task is to implement the following features:

• display the products in a grid.
• give the user an option to sort the products in ascending order. Can sort by "size", "price" or "id".
• each product has :
  • a "size" field, which is the font-size in pixels. We should display the faces in their correct size, to give customers a realistic impression of what they're buying.
  • a "price" field, in cents. This should be formatted as dollars like $3.51.
  • a "date" field, which is the date the product was added to the catalog. Dates should be displayed in relative time (eg. "3 days ago") unless they are older than 1 week, in which case the full date should be displayed.
• the product grid should automatically load more items as you scroll down.
• our product database is under high load due to growing demand for ascii, so please display an animated "loading..." message while the user waits.
• to improve the user's experience, we should always pre-emptively fetch the next batch of results in advance, making use of idle-time. But they still should not be displayed until the user has scrolled to the bottom of the product grid.
• when the user reaches the end and there are no more products to display, show the message "~ end of catalogue ~".

Products API

• The basic query looks like this: /api/products
• The response format is newline-delimited JSON.
• To get a larger results set use the limit parameter, eg: /api/products?limit=100
• To paginate results use the skip parameter, eg: /api/products?limit=15&skip=30 (returns 15 results starting from the 30th).
• To sort results use the sort parameter, eg: /api/products?sort=price. Valid sort values are price, size and id.

Ads

• after every 20 products we need to insert an advertisement from one of our sponsors. Use the same markup as the advertisement in the header, but make sure the ?r query param is randomly generated each time an ad is displayed.
• Ads should be randomly selected, but a user must never see the same ad twice in a row.

FAQ

How do I start the app?

Start with node index.js. The server will look for any files you add to the static/ directory.

Can I use {{ module_x }}?

Yes, that's fine. But please don't use an existing module for any core functionality listed in the requirements (eg. infinite scroll) because we want to see how you implement that yourself.

What about sort order (ascending / descending)?

We don't need to worry about alternate sort order for this project, we'll just use ascending-order for everything.

Can I make changes to the backend or API?

No, your final solution should not include any changes to the server code.

What should I do when I'm finished?

Please zip up your files and email them back.

How is the exam graded?

We are looking for idiomatic use of javascript, and the ability to solve the problems with code that is clean and easy to read. Even though it's very small in scope, please show us how you would use the language and conventions to structure things in a clear and maintainable way.

We won't be considering any visual aspect (except for those defined in the requirements). Just enough CSS to get the basic layout.