DEV Community: Spenser McLaughlin

W13 HW

Spenser McLaughlin — Mon, 10 Apr 2023 02:32:22 +0000

We ended up going with three elements (amazon-badges, badge-list, search-widget), as this made the most sense to us. We could have broken it up further, such as making each part of the badge its own component (like the header or border), but found that level of complexity unnecessary. One of the most challenging aspects was to set up the fetch requests to render our badges. It was important to maintain all properties in the constructor throughout the many steps in the process where I needed to repeat those properties. For Spenser, when he had something comparable to look at, rendering the badges based on search results was easier than he expected. For Anish, the Javascript part of making the functional expandable box was easier than expected.

Our repo: https://github.com/M18ab/amazon-badges

W12 HW

Spenser McLaughlin — Mon, 03 Apr 2023 01:40:02 +0000

Anish:
I started this project from using my old card to make the front end, based on the new cards design, I made changes to its design and functionality including dropdown(expand) and the search bar. Then, I decided to implement the box design first then moved to the arrow and drop down functionality. Once these were done, I moved to creating the search bar. I have had issues with having the box expand and then wait a second before returning to contract shape, the transition time was not the issue so not sure why that was happening. However, I would say a lot of the design aspects were translated from Project 1's card to work on. My next priority is to connect the search quarry to the data present in the cards and to highlight the needed text on search. Nevertheless, I am not sure how to connect the API for our codes to make the search functionality work.

Spenser:
I started by using the card element of project one to temporarily replace the badges while Anish creates the design on the frontend. Once I implemented project one’s card, the first thing I attacked was the orientation the card was rendered in, since it needed to be from top to bottom instead of left to right. My biggest issue has been figuring out how to connect the search bar with the rendering of the cards in the API folder. I’ve tried following guides from numerous online resources and spent hours trying to connect the two to no avail. Despite this, having a constructor with different changeable properties that modify individual elements of the card/badge translated from Project 1's card since overall, the badges are the same, they just have different properties tweaked to make them unique. Going forward, my next priority is connecting the search bar to rendering the results. I’m not sure how to do this, but I’ll keep trying and doing more research.

NOTE: Last week (W11), we accidentally blogged based on this week’s (W12) prompt. Thus, this week’s blog is based on the W11 HW prompt.

W11 HW

Spenser McLaughlin — Sun, 26 Mar 2023 22:48:59 +0000

We made a lot of progress this week on our badge-list! This week, Anish created the badges with the working functionality of expand on click (vertical) to show contents inside, added images to the badges, created the search bar on the front end, and is working on getting the CSS of the design to match. Spenser created a method to render cards in the backend (using his project 1 card while Anish builds the badges), made them top to bottom instead of side to side to match the badge-list example, and started researching search functionality to connect it to the render results. However, while a lot of progress was made this week, we did not yet get the relationship between searching and rendering results working.

We made a diagram to showcase the user interaction pattern, which can be found here.

In a real world use-case from industry, micro-service architecture could fit into their business context through something like an e-commerce website that does digital art services like products and custom designs as well as digital assets. In this case, users could use AI image generators to write prompts that can generate images for reference and the models can take the prompt and run the data then produce an output that is fetched by the front end. As design is a preference based field, it helps to have variations of a design request so that the artist can have a better sense of direction about what the customer wants.

Spenser's Progress can be found here and here. He had to create a brand new repo to fix an error when initializing the OWC.
Anish's Progress can be found here