Article 2
In the last article we talked about what mircofrontends are and the scope of work that we will we be doing to build out our mircofrontend. In this article, we will start the development process of the mircofrontend, and how we conceived the API badge element.
Everything starts somewhere...
The first point of attack was to start creating the Badge element that the user will be searching for in our mircofrontend. We created 'badge-card'.js to start building what a singular badge "card" would look like. We tried to make the badge as similar as possible to the comp and this is what we came up with:
Some CSS Used:
- Border-Radius : To Round out the corners
- Border-Left : To get a solid line to the left of the card
- Outline : To get a small outline border around the card
To test out how the badge of the card was looking with txt contents, we set the properties to some default values to get correctly get the layout before we proceeded.
Next Step : API
After we were happy with how the badge-card was looking, we began to scope out the backend API where we will be storing all of out badges and data. We created a folder called api and a Badge.js file. This is where the backend magic will begin to work.
Notes
- One issue we were having was trying to get the alignment of content in the card in the right place. It took awhile for things in the card to align nice and neat.
- We used many concepts from Project 1's card to scope out how the badge card would look like. Such as div structures and CSS styling.
NEXT PRIORITY
Now that we have the badge element scoped out and part of the backend api folder, we now need to work on how the badges will render on the frontend and the user search implementation.
To Be Continued...
Top comments (0)