Gourmet Cheese Website
Background
The goal of this site is to help people find a cheese that suits them. Many people can only eat/only like Hard or Soft Cheese, so that is one of the filters. The other filter is by country - some people only like certain countries' cheeses or want to support local US cheese. Also, experienced cheese lovers can just search for the cheese name. Lastly, for those like me who cannot afford 90% of these cheeses, you can sort by Price (low to high or high to low for the people who want to live large).
Credit:
All cheese images courtesy of Murray's Cheese (https://www.murrayscheese.com/)
Design Decisions
I tried to incorporate a simple theme. One thing I've learned most in this class is to simplify websites as much as possible, without losing functionality. I have a tendency to make everything detailed and complicated, but I decided to use an easy and simple greyscale color scheme, so the cheese photos could be the stars. I used a simple grid layout with autofit, so that as we have less or more cheese, the display adapts and is responsive. I also used the minmax function so that if we only have one cheese displayed, we don't stretch it to the whole screen. Also, I used a font that is easy to read and not too flashy.
Programming Decisions
​
In this app, I used React.js, CSS, and HTML.
​
App.jsx: This program starts in the App.js file. There, I actually defined a header component inside the App.js file itself. The two components listed in App's rendering are Header and FilteredList2. FilteredList2 takes in a prop called "items", which is a list of the cheeses with all their data.
FilteredList2.jsx: This has the FilteredList2 component, which renders 3 dropdown menus and a search component (which searches by title). The dropdown menus are for Country, Cheese Type, and Sort Type. For each of the dropdown menus, whenever a new MenuItem is selected, it goes into a function that changes the state of FilteredList2 appropriately. For example, when they select "Soft" in the "Cheese Type" menu, it calls the cheeseTSelected function, which then changes the state's ctype to be "soft". Each dropdown menu calls a different function. The FilteredList2 also renders a List component, which has 2 props: a list of filtered items and a sortq (which tells it whether or not to sort). This list of filtered items is created in the filterItem function, which uses conditionals to figure out what to send. For example, if they select "United Kingdom" and "Hard", we will only send hard cheeses from the UK to the List component (which actually displays the cheeses). The sortq comes from the state, which is edited from another function for the Sort dropdown like the other dropdowns. Also, I implemented a search bar to work with all the elements.
List.jsx: Next, List renders the filtered items that we sent through props. First, it checks what the value of the sortq prop is. If it is default or "no sort", it renders normally, but if we told it to sort "low to high" or "high to low", we sort appropriately by price before rendering the items. We render the items by creating Card components for each item and passing all the attributes of the cheese as props.
Card.jsx: I created this component to help with the layout of each cheese. Each cheese that is rendered is a Card component, and this includes various HTML headings and elements with the image of the cheese. I also styled this in App.css. It also includes some extras, like Rating.
Summary: Whenever a user selects a new MenuItem on a filter (say "soft"), we edit our FilteredList2 and resend it to List, which then renders each item in its props as a Card, with appropriate sorting. Card is composed of different headers and HTML elements.
​
Overall React Components: FilteredList2, List, Card, Header
​