Menu Close

AmazonForest

AmazonForest

logo

A fun Amazon-inspired shopping site for exotic animals. A user can browse by category, search for products, add products to their cart, review/comment/rate a product, and even create a new product.

Web Site System

Demo

Technologies

  • MongoDB
  • Express
  • React
  • Node.js
  • Redux
  • AWS
  • Webpack
  • Heroku

Features:

Will Look good in any screen size, including mobile!

responsiveGif

Each of our group members had different sized screen so media queries had to be used.

@media only screen and (max-width: 1280px) {
  .headerTop span{
    display: none;
  }

  .home-page-entire-row {
    top: -470px;
    max-width: 98vw;
    margin-left: -1px;
}

@media only screen and (max-width: 805px) {
  .item-lists {
       flex-direction: column;
  }
}

Multiple media selectors were made for low resolution desktops and mobile devices. Some elements were hidden and their flex direction and wrapping changed to accomodate a portrait orientation.

A robust search component

search

Upon typing in the search bar, suggestions are immidiately generated. A previous query for the items are recycled and are filtered using RegExp to match the search term.

onInputChange(e){ this.suggestionsElement.classList.add("active") let newDisplayed = this.props.items.filter(item => item.title.match(new RegExp( e.target.value, "i"))) this.setState({ searchTerm: e.target.value, currentlyDisplayed: newDisplayed }) }

Pressing enter sends the user to a search page where they can filter by category.

filterPets(key) { let category if (key === "pets") category = "category1" if (key === "accessories") category = "accessories" if (key === "food") category = "category5" if (key === "toys") category = key let filtered = this.state.items.filter(item => item.category == category) this.setState({ filtered: filtered }) }
View Source Code
Posted in Development