Catching Up

OK, so, I haven't written anything here in a while. Which is not to say I haven't been hard at work. In fact, I've been coding like mad for the past month or so, especially since we started the whole quarantine thing. And my site now looks WAY better than it did when I posted my last entry, over 6 weeks ago. Also, I've gotten a whole lot better at React, JavaScript, and coding in general. Apparently that's what happens when you start doing something obsessively for up to 12 hours a day. Seriously, during the month of March, I made 231 commits and spent a total of 177 hours.

Anyway, I'm going to try to summarize what I learned, and some key decisions I made.

1. I stopped trying make working forms. If someone wants to contact me, they can use my email address. And setting up an order form requires some way to process and fulfill the orders, which I also (temporarily) gave up on.
2. I started embracing Bootstrap, and trying to actually use its React components to make my site responsive. And now most of it is - at this moment, only my menu will definitely break if you try to view the site on a phone. Which is weird, because it is pretty much just wrapping two Bootstrap components - a Navbar and a ListGroup. But, still discovering how they work.
3. I'm going to finish my original goal of a front-end-only site before starting on any kind of back end. And by "finish," I mean making it presentable enough that I can share the link without embarrassment, even if someone looks at it on their phone. Which means I have to accept some limitations in terms of functionality:
1. The only API available to me is Cloudinary, where all my images live. While the API has tons of search capabilities, most of them require an API key. Which I finally realized I can't use without a back end. I mean, I could, but it would be stupid. React won't compile anything in your .env file (to prevent you from accidentally revealing your API keys), so I'd have to store it in a JS file somewhere - not only sending it to everyone who visited my site, but also copying it to GitHub. Which explains why Cloudinary's example code never demonstrates any search functions in React; they only use server-side technologies like Node and Java. That fact baffled me for a surprisingly long time.
2. Without the API key, Cloudinary lets me do exactly two things:
1. Given a tag, I can request all the images associated with that tag; and
2. Given an image ID, I can request that image, in any size or format I want
3. The response from a tag request contains not only the image ID, but also any custom meta information that I've included with the image. Which essentially gives me a NoSQL database, albeit a fairly inefficient one.
4. So, that's what my site does: offers a bunch of filtering options using tags, requests lists of images based on those tags, and pulls meta information about the images from the responses. Anything else I might want to do will have to wait until I write a back end.
4. At present, using just those two API actions, I've implemented the following features:
1. Filter images using a whole bunch of different categories, as well grouping into pre-defined albums
2. Each filter has a description, a gallery of thumbnail images, and a defined sorting method (not visible to the user, unless they are really paying attention to what order the images arrive in)
3. Each image has some number of fields (the custom metadata), which are displayed when the image is selected.
4. In addition, many of my most recent paintings have associated "process" images - photographs taken over the course of painting. Using a complicated extension of the basic filtering request, I can display the process as a series of steps whenever such an image is selected.
5. Because of the Geo tags encoded in each process photo, I can also provide exact coordinates for where such paintings were created. It would be nice to show that on a map, but so far I haven't been able to get any mapping components to render properly (it's entirely possible that the client-side API key is part of the problem). Anyway, that's really still on my to-do list.
6. All those features created too many things on the screen, so the actual display image (the "big" version of the selected thumbnail) was barely larger than the thumbnail itself. So I stuck everything but the display image into an accordion stack, which I accomplished using an higher-order component that stuffs the feature into a stacked Card. It's incredibly simple as HOCs go, but it's still my first one and I'm ecstatic that it works. 

So, that's where my project stands at the moment. Almost done-ish, except for the lack of responsiveness on the menu. I've got a couple other items on my wish list, but I'm going to save them for another post. Which is going to take me less than 6 weeks this time.