Thanks to visit codestin.com
Credit goes to github.com

Skip to content

greg-argulla/oldst

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Products Grid

This is an ecommerce site, where you can buy all sorts of stuff. The homepage should display a list of products for people to browse.

Features

  • products are displayed in a grid.
  • give the user an option to sort the products in ascending order. Can sort by "title", "price" or "rating". The products list should be reloaded when a new sorting option is chosen.
  • each product has :
    • a "thumbnail" field. We should display the thumbnail to give the customer an impression of what they're buying.
    • a "title" field. So as the customer would know what the product is.
    • a "price" field. This should be formatted as dollars like $1,351.
    • 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.
  • display an animated "loading..." message while the user waits for the data to load.
  • Pre-emptively fetch the next batch of results in advance, making use of idle-time. Would only 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 ~".

Ads features

  • 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 shown in src/App.js, 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.

Products API

  • The basic query looks like this: http://localhost:8000/products
  • The response format is JSON.
  • To paginate results use the _page parameter, eg: /products?_page=5&_limit=15 (returns 15 results starting from the 10th page).
  • To sort results use the _sort parameter, eg: /products?_sort=price. Valid sort values are price, title and rating.

How do I start the app?

Start with 1 npm install to install the dependencies 2 run the server npm run server 3 npm start to run the app

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published