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.
- MongoDB
- Express
- React
- Node.js
- Redux
- AWS
- Webpack
- Heroku
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.
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 })
}