What is WildSnap?


TLDR: A personal gallery to showcase my mediocre photography of the plants and animals i find in my local area and on my travels.

This idea was conceived in the Spring of 2022. Southern California was on the receiving in of a much needed rain storm and the next day the flowers were going crazy. It was my first springtime flower show in the place I had just moved to and I had to take some photos to show everyone at work. It would also put my neglected DSLR back to work. After poring through the photos I realized they were merely subpar to mediocre. They did a better job of clinically cataloguing the diversity than showcasing the beauty.

Although there was something compelling about having my own little catalogue of all the plants and flowers in my yard. I soon extended that to included the lizards, centipedes, and fish on the property. It wasn't much to look at, but it was fun and reminded me of collecting Pokemon. I thought it might be a lot more fun to share the photos as if they were an encyclopedic collection, much like the Pokedex from a well loved JRPG.

I hastily sketched up a UI and wrote some goals:


The more I wrote the more I realized this would also be an excellent time to put some of the skills from my day job to work. I hacked together a React UI, uploaded some basic images on Imgur, added a JSON to hold all the data, and hosted it all on Githubs free hosting option. I added a familiar looking font and logos to make the tool reminiscent of the pokedex and voila, WildSnap was complete.

I showed my coworkers, we all thought it was neat and that was the end of it. But a few weeks later i realized I missed some flowers and wildlife and couldn't resist improving this little project further.

  • I started expanding the JSON with more data.
  • I realized the color scheme should probably be improved.
  • I also realized some plants and creatures are seasonal and I colid add a few older ones from my phone galleries.
  • Then I thought, I should probably rate the quality of these pictures so i can filter out the less impressive ones when I want to show off.
  • Then the number off "snaps" as i had begun to call them was so numerous I felt the need to asychronously load them onto the page.
  • Adding to the JSON manually was tedious, so i added a menu item for uploading new requests (but haven't connected it to anything yet)

This quickly became a multiphase project that is still in progress. But its fun and reminded me of why I love my job.


Update - June 2022

Updating the JSON containing all the data for the site then redeploying the whole site is fine when its infrequent changes and merely meant for display. However i wanted to be able to manipulate the data through the frontend. But that means a real database, real user security, an API, and lots of other bits and bobs to connect it all together. Luckily Amazon Amplify provides most of that for me.

Understanding the page life cycle was the hardest part considering i'm not a UI programmer. Implementing the authentication and authorization was a nightmare because I didn't even fully understand when any given data i needed was available. After banging my head against the wall for a few hours I went back to basics and put console.log(text) practically everywhere with the state/props and suddenly all was clear. This hardship had way more to do with my inexperience with UI than with AWS resources.

Rather than explaining the agonizing troubleshooting and days of expirementing, I've made a visio document showing the conversion in architecture.


The best part of switching over to AWS was that now i could use the Github Free hosting instead of paying my current web host for my main site. Saved a cool $10 a month. Oh joy. I'm pretty sure that doesn't even cover a Netflix subscription these days.

Even after all these advances, there is still lots to do - image uploading to S3, linking coordinates to google maps, and individualized user uploads.