Development
Creating a simple React App with an aggregator and sorter
- Project: Market Research & Front-End Development
- Role: Front-End Programmer
- Timeline: 2 Weeks
- Skills: HTML/CSS, React, Market Analysis
Overview
Development is an extremely important skill to learn in order to fully understand design. Knowing how something can be implemented is important if you want to design for it! Along with this, it is also important to be able to learn and analyze the strengths and weaknesses designs have, in order to effectively work to improve them! In this project, I developed an interactive interface using React, which can tie data in an internal state, and aggregate sort!
Research
For different websites, it is important to observe how they sort and filter information in their favoriting function. How do these decisions impact the user? What works well on this page and what doesn’t? The first step to using front end skill and knowledge is identifying how we can create and improve upon current systems.
I selected Amazon, Etsy, and Ebay to compare, as they all have a well known favoriting functions, such as adding to a cart or creating favorited lists. The set of functions are the column in the chart below, while the rows are answering whether or not the three companies have such a function.
I discovered that each website had favoriting items based a lot around how they sold items. For example, amazon named their favorite lists “Shopping” lists versus ebay named the lists “Watch” lists, since many shops in ebay are small and are run by individuals as compared to online storefronts as in Amazon. This was also shown by the types of buttons available in the favorite list. Ebay had buttons linking to the seller, whereas Amazon had more buttons that made the list feel like a virtual shopping list, with priority organizations and easy ability to move and share items.
For Amazon, Its strengths really came to the ability to use the favoriting and favorite lists in multiple ways. The favoritism function was very versatile. However, it limits buttons from the favorite list to the seller (perhaps because it has a less of a need to as compared to ebay) and makes this great functionality buried under several other buttons and UI elements, making it hard to find and use.
For Esty, instead of tackling favoritism as a making note of items the user may want to buy, it acted more like favoriting posts that the user likes. You can not get to the seller from the favorited items on your list, however it is super easy to ‘like’ items in Etsy. It acts similar to Pinterest.
When looking at Ebay, the favoritism lists was mainly focuses on you and the seller, as compared to Amazon. It shows statistic about current stock,seller information, bids, etc that let you know how long the object will exist in the current market. This is great, considering that ebay is usually user to user transaction as compared to Amazon. However, Ebay lacks the versatility of these favorite lists. You can’t easily show or work on lists with other users, which doesn’t allow for a collaborative shopping experience.
The Process
After graphing out and analyzing the benefits and downsides that come with different styles and favoritisms, I could use what I learned in order to create my own interface. For my app, I decided to make my own art shop! (not my art, just sample art from the internet). The theme I went for was animal art, and the aggregator is the addition of art pieces into a shopping cart!
So, I first had to find a theme of art, making an art shop. I downloaded the images off of the internet, and then I created a selection process, in which when you click on a picture, it becomes magnified at the bottom of the page, with a title in bold and its description. I then decided that I wanted to add a filtering process, which would make the searching process much easier if I added many more images. Specifically, I added filters based on the description of the images.
I added in a price for each individual art piece, and then coded in a filter to sort via price. After that, the website was looking much better, but I needed something that would allow me to add images onto a cart for purchase later, a favoriting mechanism. I coded in an “add” and “delete” button under each image to allow for easy flow with the cart. I then readjusted the UI so that the images would be all visible without needing to scroll. Even if more images are added in the future, the filter mechanism should make sifting through them all fairly simple!
During the process, I wanted to create a list of images, each of which containing the cosntants of description, title, and price. However, I ended up coding a list of prices, descriptions, and titles separately, which was disadvantageous due to the fact that I had to add each list separately to my aggregator and sorting mechanisms. If I wanted to scale this further, I would have to keep in mind that a single list of images, with the data inside each member, would work much better for a large number of images!
Results
After finishing the React code and working out any and all bugs that were present in the website, I deployed it using Vercel through Github, and now Keyan’s Art Shop is fully online and running, with the website and link to the Github page publicly available below!
The intention is to buy art from an online store. There are 12 item cards, each with a different visual art. All the items are titled, have a price, and have the categories of art media type and type of animals (all the items are art pieces of animals). Specifically, a sample item is “Hyena, $21, Painting, Predator”. If you press on the image of the item, the image will be magnified at the bottom of the webpage to observe its detail. Filter will be incorporated by using checkboxes to signify searching for items in specific categories. Sorting will be done by clicking on the button to sort the items by price. Both of these can work together. Aggregation happens when one presses the add to cart or delete from cart buttons underneath the item cards. After pressing one of the buttons, a list called “Cart:” underneath the main header will reflect the change. An item’s name will be added to or removed from the Cart list. Clicking on a sorting box while it is already checked unchecks it, and resets the filter in that category! The sort button can also be reset by being clicked a second time.
The website is coded in HTML/CSS using React, and deployed on Vercel. The interface is fun and easy to use, and there are no bugs in the sorter, responsiveness, or aggregator! There is also a README file including in the root directory of the app, where it gives instructions on how to run the code locally!
Conclusions
Analysing the strengths and weaknesses of different companies and their aggregating systems provided me with some great insight on how to spot good design elements, and how to think about them when coding them in myself. Making a website interface using that knowledge afterward helped me with my frontend coding skills, and gave me confidence in my ability to bring to life my designs. This project really served as a jump off point for me, as I later used what I learned making this relatively simple website to turn back and add to my own portfolio website, which looks much better because of it.
