Serendipity Sweets Shop

Practice React by implementing an interactive shopping website.

In this project, I will be using React to design an interactive shopping website for a sweets shop. The user will have options to filter products by two different types, and sort the products by price. Adding items to a cart will create a subtotal to prepare the user for checkout.

Goal of Application

Goal: Allow users to sort through bakery products prior to adding the items to their cart. Users can

1. browse through a different combination of filters varying from warm or cold, desserts or beverages
2. sort the products by price to help streamline their decision process, before adding intended items for purchase into the cart

Value: provide an easy interface for users to filter and sort through bakery products.

Usability Principles Considered

Throughout the design of the app, I considered design principles that would most effectively convey information about my bakery to the users.

• There are two filter options to allow users to sort through products in a way that makes most sense- by temperature (warm or cold) and type of product (dessert or beverage).
• There are two sorting options that allow users to sort by either increasing or decreasing price. I found this to be the most logical way to sort products associated with numbers.
• The cart on the righthand side allows users to easily interact with products they plan to purchase. Items can be added to cart directly from the item catalog, and can be removed directly from the cart. There is a reset button that allows users reset to am empty cart with only one click
• Users first read the title and description of the bakery, then are presented with filter and sort options. Users read the website from left to right, so they see the items first and then their options in the cart.

Organization of Components

My React app uses two components: BakeryItem and CartItem.

• 🧁 BakeryItem represents each individual bakery product listed in the website catalog. The items are organized in a list, and each individual component contains information about the product name, image, temperature, type, and price. Finally, there is an option for users to add the item to the cart.
• 🛒 CartItem represents the component for each individual item after it has been added to the cart. An item is only displayed in the cart after the user clicks the "Add to Cart" button. Additionally, items only remain in the cart if there is at least one of that item. Each CartItem component contains the item's name, price, count describing number of products in the cart, and interactive buttons for incrementing and decrementing the count.

Conclusion

This project taught me the basis of React. I learned how to identify the goal of a website, and how to center a design around that goal. The applications of creating a shopping website are not significant, but it is important to understand how componenets are used with each other prior to implementing larger applications.

Though my website does not have a fully implemented checkout functionality, I learned how to undestand component hierarchy. In the future, I am looking to develop websites with React that are capable of handling larger amounts of data. If used correctly, React is an extremely powerful tool for front-end development!