amazonforest's Introduction

AmazonForest

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.

Technologies

MongoDB
Express
React
Node.js
Redux
AWS
Webpack
Heroku

Features:

Will Look good in any screen size, including mobile!

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

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 })
}

Recommend Projects