A few years ago, when my youngest son was still an infant, I happened to turn on the news and saw a recall about a popular baby formula. Thankfully, it wasn’t one we were using and I don’t think the effects were severe, but I realized I would’ve had no idea about it if I didn’t happen to turn on the news at that moment.<\/p>\n
So, I started looking into making a site to make it easier to find recalled products. As it turns out, there are free APIs provided by different government agencies. But being the government, they are all a little different by agency such as the FDA and the NHTSA. However, the one I was specifically looking for was the CPSC (Consumer Product Safety Commission) and they had the best site and API. Unfortunately, I’ve learned that what products that make it on the list is somewhat political. We also have a BOB stroller and this manufacturer made the news because they were going to be on the list but we’re allegedly able to pay their way out of it. But nevertheless, it’s a good service that more people should use.<\/p>\n
As I looked around, I found some sites that used the API, but most looked like they were class projects that met some minimal requirements. So I went about creating a site and again chose to make it using Vue JS, that I recently learned in my, ‘it’s not a portal’ project.<\/a><\/p>\n I ended up using Vuetify as the UI framework and it really helped speed up the time to build the site, even thought it was something new to me and I had look up how to do everything.<\/p>\n I made it so the site pulls down the API data as an AJAX post and formats it nicely into cards. One problem I encountered is that the images can be pretty much any size or dimension and the text can be a few words or a few pages. So, I used flexbox to keep all of the cards the same height and maintain consistent spacing and truncated the text after a certain limit.<\/p>\n Once the individual cards were designed, I then made it so you can change the display from a grid of cards to a list of narrower items. And after that, I used an animation library so the cards gradually display as you scroll.<\/p>\n