Adding Storybook

I'll start off today discussing my personal project I've been working on for a little over a week now. The premise of this project is to take an array of JSON objects representing information about superheroes and manipulate that data as much as I can. Right now, I'm showing the list of heroes, and if you click on one of the heroes, it takes you to an individual page with more details about the hero. I also have a search bar at the top, where the user can search the heroes by name. I've also built out a filters drawer that will end up having a ton of functionality tied to it. Beyond fixing up the functionality for the filters and getting them to work, I need to make the application responsive. Right now, if the user were to view this application on a mobile phone, it would be a jumbled mess. I haven't added any media queries yet, but I plan to. After that, the site will pretty much be done, barring some bells and whistles. I would like to add some animation to the site, with the filter bar sliding in from the right edge of the screen. I would also like to figure out a way to lazy load the images of the superheroes. I'm pretty sure there are some packages that will help out with this, where I can show a placeholder image until the real image comes in. These small changes will take some time, and I anticipate the app to take another week before it's finished.

Last night, I got started on the functionality for the filters. This is difficult, because it's going to have to be somewhat dynamic. I thought I could come up with a reducer that could solve all my problems, and even now I still think that's the way to go. However, my first attempt at it was a complete failure. I've done some pretty complex reducers at work in the past month or so, but nothing as complicated as this. Usually, when doing this many computations, it is wise to handle this on the backend, creating an API that would return the desired information. Unfortunately, this isn't an option with the API that I'm using, so I have to manage it on the frontend. The functions themselves aren't that complicated; I think I just need a good mental model for this thing. Right now, I'm looking at the big picture first instead of starting from the basics. After getting the little girl down for the night, my goal is to crack this code. I'm going to start with coming up with the functionality for one category of filter and build it out from there. I may have to do a check on the type at the checkbox component level, which would not be ideal, but might be the only solution.

I was working on a couple things at work, one with great success and one with no success at all. The first was the continuation of yesterday, working on the build out of the leads search page. Like I said yesterday, I've iterated over this screen multiple times now, but I really like the way it looks this time. I have the layout for the phone size done, and now it's time to figure out the other sizes. Most likely, the layout for the tablet versions and the desktop version will be identical, but they're going to be totally different from the mobile version. It's going to get a little complicated, but compared to what I'm doing in my personal project, it'll be a breeze. The unsuccessful part of my day involved Storybook. My cohort has been working on building out different reusable components for our application. These components will eventually be placed into an NPM package so we can use them across different projects. These will become part of our theme as a company and are a big part of our digital presence. Right now, he's documenting his code really well with comments, which is really important, but when I go to use any of these components, it can be really difficult to parse out all of the different props and options for these props. I thought it would be nice to create some sort of design system for these components. I suggested we create a site using Gatsby for the design system or create a living style guide, and he suggested we use Storybook. I've never used Storybook before, so I figured I'd give it a whirl. I spent over 3 hours trying to get it up and running, but to no avail. Eventually, I tossed it aside for the day and went back to working on the leads search page, and I'll come back to it tomorrow.

Until tomorrow!