Article 3
In this continuation article of the "Building a Mircofrontend" series, we will dive into the progression we have made on our project. The main portion of this article will be talking about how we got the searching and rendering connectivity to work for our badges.
Next Step : Render and Search
Now that we are satisfied with our badge "card" and have carved out a portion of the backend API, we started the process of developing how the cards will be rendered and searched. For this we have created "badge-list" which will hold the place for the user to search for badges, and a place where the badges will be displayed.
Step one: Scope out properties
The main property of the badge-list will be the array of badges that data coming from the backend will be loaded into in order to display the badges searched.
This is how we started to develop badge-list:
Step two: Some Frontend Dev
In this step, we started to build out some of the visuals that will be seen on the frontend. We built two containers. The first container (Box1), will hold the search component. The section container (Box2), will render the badges from the user search.
Code:
How it looked after CSS styling:
Step three: Creating the search widget
The next step was to create the search implementation to render some badges from the backend to be displayed on the frontend. We tried to attack this problem with three big steps:
Step 1: Create search-widget.js
- Return property of value that will hold the value of what the user is searching.
- Renders a search symbol and input field for user search.
- Creates a method handleInput, that creates a CustomEvent for when the value is changed to respond accordingly.
Step 2: Add search-widget to badge-list and add search functionality
- Add search-widget to the html portion badge-list.
- Add methods to get the value from the input of the search widget and fetch data from the backend API to search and render badges based on the search.
- Style the search widget using CSS styling
Step 3: Add .map functionality to the backend to display or "map" out the badges to the badge-list based on the search value.
- This will map out the badge data needed to be sent to badge-list to display the badges based the user search value.
Issues
- The main issue that we were having is that all the badges in the backend were rendering on the frontend so it was causing on overflow of badges displaying on the frontend and messing up the structure of the second container
The mircofrontend is starting to come together. We will continue to work on and fix bugs that are currently present to deliver a complete mircofrontend with a nice user experience.
To Be Continued...
Top comments (0)