This is a resubmission in blog format, previously submitted as a blog post link in a Github Gist
Link to Github Repo: https://github.com/farisnif/flight-card
As we embark on our project to build a microfrontend, we are excited to share our initial thoughts and ideas with you in this first article of our series. In this article, we will be focusing on the scope of the project and our initial conception of how we will approach it.
Firstly, let us introduce ourselves. We are a group of college students working collaboratively on this project, and we are enthusiastic about learning and experimenting with microfrontend architecture.
To begin with, we have identified the main goal of our project, which is to create a searchable interface using web components that are delivered via Vercel endpoints. We plan to create at least three web components that work together to deliver the user experience we are aiming for.
As a part of our initial conception, we have identified the two UI options we will be working with - the Badge UI and the Collapse UI. We will be using the Badge UI as a dashboard for a high-level search, where we will be showing cards as "badges." The Collapse UI will be used to show details in a collapsed fieldset, which will expand when the user clicks on it. For this, we will be using either the summary/details relationship or a navigation-collapse component.
We have also created an API specification in JSON format, which will be loaded from an endpoint (/api/search). To enable users to interactively search, we will include a search input and a button to execute the search. Once the user hits the search button, we will use a .map method to update the search results visually.
As we move forward with the project, we anticipate needing specific properties for our web components. For example, the Badge UI will need an image and a title, while the Collapse UI will require a title, a summary, and a detail field. We will also need data to come from the backend to make our components work, which will be delivered via our custom API endpoint.
To give you a better idea of our initial conception, we have included a screenshot of our API specification in JSON format. This will show you how we plan to name the elements involved and what properties we anticipate needing.
We will also be using concepts from our homework, such as importing and using @lrnwebcomponents/simple-icon and @lrnwebcomponents/simple-icon/lib/simple-icons to get access to an icon library. We will be using these icons to enhance the user interface and improve the overall user experience.
In conclusion, our first article in this series has focused on the scope of our microfrontend project and our initial conception of how we will approach it. We hope that by sharing our thoughts and ideas with you, we have given you a glimpse into the process of building a microfrontend. In the upcoming articles, we will dive deeper into the technical details and share our progress as we work towards our goal of building a functional and visually appealing microfrontend.
Top comments (0)