In the process of creating this project, we ended up splitting the project into 3 main components:
The overall badges app, which would contain the majority of the frontend design and styling.
The search bar and the corresponding JS logic from which it would run off of.
The badges list that would contain the actual list of badges to search from. This would pull from badges.js in the API folder, that contained the map of all the implemented badges.
We decided to break it up this way in order to properly organize and separate the different aspects of the app, while at the same time not overcomplicating it.
The most difficult aspect of this project was by far getting the search function to work. I think this was so difficult because of the need to dynamically update the search after each new letter, through an input event. The process of actually filtering results based on the input was also tough to do.
A component of the project that was easier than expected was HTML/CSS styling, i.e., getting the frontend design to emulate the actual badges page. Since it's very visual, I think you could just eyeball what you needed to code a lot of the time. It was also possible to inspect element the page in the rare case that you got stuck on how to style an element. Of course, the page isn't exactly like the real one, but it's definitely close.
Top comments (0)