Creating a Microfrontend
Published: 2023-03-21 17:58:38

[Repo Link](https://github.com/Sobarzo14/badge-search)
[Live Version Working](https://badge-search-one.vercel.app/)

## Scoping of the project
This project consists of building a Frontend that uses the api of https://badgesapp.psu.edu/ to output badges and then, using a search component for narrowing down the output to only the badges that match the search description.
![Example of the UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvhv37p8pu5aitqguoa8.png)
## Components used
The app would consist of using a badge component to display the individual badges, a badge list that contains the output of one or multiple badges based on the search description, a search bar that handles the input of the user, and a toggle component to decide the type of search.
## Type of technology
Using JSON, the data will display the output. Those objects are also used for the search algorithm
![JSON Object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n41kb6e4fsokm9pc932c.png)
Using fetch, that data can be then turned into Javascript objects that are then manipulated in the Js files.
![fetch function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2lne59rnbqblxwsrdiz.png)


# Week 11 Check-In
How did you start?
I first decided to start with the UI, and that means that I had to take the components that I decided on previously, and begin implementing them into code.

#### What did you decide to attack first?
I think it was easiest to take the HTML and CSS to make static cards as components before I began to mess around with an api that will display JSON objects as cards.

#### What issues have you had?
I began to work with flexbox, and sometimes it doesn't display the expected output. I am also working on the asynchronous function to gather the data, and then use to display the badges, but it is difficult to understand AJAX. I also can't see the icons from the library.

#### What concepts translated from Project 1's card?
I think it is very easy to work with components after Project 1. I can also work well with the hierarchy of the different components and accessing the shadow DOMs. 

#### What's your next priority?
My goal for next week will be to have a map function that displays all the cards with the info provided. Once I have that, I can start working on the search aspect.

#### What problems are you unsure of how to solve?
I would like to know if the search should be changed dynamically as the user types the desired search, or is it once the user presses enter? What are the events that trigger those functions called.

# Week 12 Check in
#### How did you get the relationship between Searching and rendering results working?
At first the biggest issue was for me to get the server going because my npm run build would exit with a 1. So I had to add dependencies and wiring them up to the project. Once I had the server up and running, I had to fix the api js file. Where the the file handles a request query, from the getSearchResults function.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3zqye1w7b99sc8bouj7.png)

That value was passed from the input field in the search that is ran every time that the value changes due to the CustomEvent. The value is then sent to the back end where it is a search query. We take the text that is in the badges and make it into an index. We map through the badges json data, and then we filter the badges that include the search query in their index. Those badges are then rendered in the front-end.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/huxx3p1pclpiz8h1ktz6.png)

#### Draw a diagram on draw.io for user interaction pattern. What happens from user input, through machine sending value, to re-rendering on the page

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8s199mc152xy27z2rox.png)

#### Think of a real world use-case from industry (Media streaming, youtube, corporate, cable company provider, web platform, etc) where micro-service architecture could fit into their business context. How could we use this approach to solve a real problem at a company currently using a monolithic design architecture?
One real-world use case where micro-service architecture could fit is a media streaming platform like Netflix. Currently, Netflix uses a monolithic architecture that handles all of their application logic, which can become increasingly difficult to maintain and scale as the platform grows. By implementing a micro-service architecture, Netflix could break down their application into smaller, independently deployable services that are responsible for a specific business function. This approach would allow Netflix to make changes to individual services without affecting the entire platform, leading to faster development cycles, reduced risk of failure, and increased flexibility to accommodate new features or changes to the platform.

Another benefit of micro-services is that they can be easily scaled up or down depending on demand, unlike a monolithic architecture where scaling requires scaling the entire application. Overall, implementing a micro-service architecture could help Netflix solve the problem of maintaining and scaling their monolithic architecture as the platform continues to grow and become more complex.

# Week 13 Check in
#### How many elements did you end up going with? Why did you break it up that way?
I broke it up into 3 elements: The search-bar that handles the input of the search. The badge-list, which is the one that communicates with the back-end since it handles the JSON files and then parses the properties into the badges. The badge-element is the badge itself, and it just takes the properties from the JSON data.

I decided this structure for the elements because the communication between the elements and the back-end is easier this way. Since there are multiple badges, we had to have something handling the data and rendering as badge elements, but the one to send the search input would have to be separate, other wise the badge-list element would not be able to communicate with the search-bar separately.

#### What was the hardest aspect of this?
The hardest part was differentiating between backend and frontend development. It was hard to handle two servers at once because what works on one server, does not work on the other and vice-versa. In order to see if something was functioning the way it should, I needed the badges to render, and if the server wasn't working I had to debug the rendering of the badges before moving forward. In the project before, I parsed through a static JSON file, so changing to dynamic JSON data was difficult. 

#### What part of this project was easier than you expected?
I think the search algorithm was much easier than I thought it would be. Since it is known that large websites have complicated search algorithms that use machine learning, I expected the search to be difficult. In this case, it was a matter of adding all the info that is displayed, and then filtering the badges that have the search query and those that didn't.