Random Shop

Some background: I’ve been enrolled in a full stack developer “bootcamp” for the last 3 months. For the first two months I’ve been busy with learning Java. The last 4 weeks I upgraded my JavaScript skills:

  • In the first week I’ve improved my Fractal Generator that I used to create the F3 logo.
  • The next two weeks I’ve made a random text generator that generates a small random “language” from which random words (with adjustable probabilities / weights) are then picked.
  • During the last 8 days I’ve programmed the Random Shop as a project, which I wanted to show here

Here are some of its features:

  • Randomly generated products with random category-dependent prices
  • Random numbers and codes interspersed into the random product names
  • Randomly generated category colors
  • Random product descriptions
  • Random product images generated by and loaded from the Deep AI text to image API.
  • Infinite scrolling: New random products are generated once the user scrolls to the bottom of the page
  • A shopping cart as extendable sidebar attached to the bottom of the main page
  • A wish list as extendable sidebar attached to the top of the main page
  • A settings bar with filter and sort options (and the option to generate a completely new random shop) as extendable sidebar attached to the left of the main page
  • Product cards can be dragged and dropped between the shop, the cart, and the wish list
  • Buttons to add products to cart or wish list directly or increase the amount of that product therein
  • Individual product amount control within cart and wish list via buttons and a number input field
  • Indicators for total product amount and total price in cart and wish list
  • Product detail page with randomly generated sentences and (pseudo “SEO optimized”) paragraphs for randomly generated product features
  • Randomly generated product reviews by randomly generated users with random avatars pulled from the site “This Person Does Not Exist”.
  • Randomly generated product ratings from 0 to 5 stars.
  • Randomly interspersed (upper cased) expletives in product review texts dependent on product rating
  • Dedicated product reviews page
  • Dedicated cart page
  • Dedicated wish list page
  • Payment page with a table that displays the random tax and price information
  • The words on the payment page are translated into “randomese” with a dictionary that is created along with the random language
  • Randomly generated TOS (intentionally absurdly long)
  • Semi-persistent data storage via the local storage of the browser. Settings and sidebar positions are saved along with the random language, the random products, and the contents of cart and wish list
  • No use of any cookies
  • Project made with vanilla JavaScript from scratch. No dependency on any external JavaScript libraries whatsoever. No Angular, no React, no Vue, no jQuery, no Node.js, no lodash, …