Building a site for Industrial Architectural Salvage with Retool Gen AI, and Trello
I am currently on parental leave and thoroughly enjoying, but I have been missing coding a bit! So, I finally took some time to wrap up one (of my many) ongoing side project; a site for my dad’s architectural salvage pieces that he wants to sell! The site is live https://fredericks.studio and I am very excited about it! I enjoyed working on it and was able to leverage Gen AI (with Retool) in a cool way that I wanted to share.
Here’s an overview of the tech stack (all hosted for free!):
- Angular 15 (I started 2 years ago)
- Bootstrap (Grayscale theme)
- Trello as a Backend ™️ (more on that later)
- Cloudflare Pages for free hosting (and the domain registration)
- Retool Workflows with Retool AI
At work, I have mostly used React when developing for front-end, so I wanted to poke around and try out Angular for this side project to learn it better. I would say I still prefer React for any project and find it quicker and more intuitive, but my colleagues recommend Angular because it is so opinionated on how to structure things that it can be helpful for larger dev teams and separating work.
I didn’t have the time or skills for a fancy design, so I scrolled through the Bootstrap themes and just picked one, Grayscale, that seemed like a good fit. Then, I started wrapping it in Angular code to make some pages more dynamic. The goal for this site was just to get something usable and Google-able to show what is out there; it didn't have to be perfect.
I love Cloudflare’s free tiers and used them for my domain registration of https://fredericks.studio, the free SSL with it, and their free tier hosting, Cloudflare Pages, which also includes some Github-Actions-like CICD to auto-deploy!
The backend!
I have always been a fan of Trello, and while this is not its intended use, I believe it is a good option for a very user-friendly database for certain types of simple sites because of its great API! I have now created a few sites that use Trello as a Backend™️ (made-up trademark 🙃); it is great when you have a list of items that may have some attachments/images, and you may be moving them from one status to another. Rather than needing to make an Admin UI, you can simply use Trello itself to modify the data.
The board itself is public, so you can read the data from the front-end using Trello’s JSON export or API features, but only modify it if you’re logged in; dead simple database admin!
Adding new items to the catalog via emailed photos
Another great easy data admin feature; email-to-board. My dad is not a particularly technical person who certainly won’t be doing any database manual inserts nor Trello board work. But he can certainly send an email with a photo! You can enable a feature where Trello gives your board a unique email address to which you send emails, which then get processed and turned automatically into cards. This way, as Dad comes across a new item to add to his collection, he can simply take a photo on his phone and email it to the saved address…and it will just show up! Trello even lets you specify which list to put incoming emailed cards.
Processing Images using Gen AI and Leveraging Retool Workflows
Now that we have a catalog of photos, we need to add names and descriptions to them! Our initial photography captured 90+ photos of items which is a lot to go through manually. And again, the priority was simply to get an MVP v1 of the site up (and quickly with my limited dev time between naps). So, I figured this would be a perfect opportunity to employ some help from Gen AI! ChatGPT could look at a photo and say what it is, give it a description, and even choose some categories to assign.
But, I didn’t want to have to write an API or cron job to do this repeatedly for our long list of photos to process. This is where I turned to Retool Workflows (they have a great free tier as well!). Workflows is a feature that lets you build jobs and ETL tasks in a low-code browser IDE, choosing from a variety of connectors and building blocks, similar to Azure Data Factory. One of the building blocks is an ‘AI Action’ that lets you easily trigger any of the major providers’ model APIs. I set up a workflow to:
- Take all of the cards in the ‘to be processed’ Trello list, fire off a job for each:
- Query to get the image a base64 version
- ✨Use ChatGPT’s Gen AI API (via Retool’s handy wrapper) to classify the image and extract details such as a name, description, and categories, based on the prompt instructions I gave to get the type of text we wanted for the site.
- Update the Trello card with the new name, and description, and then move the card from the ‘to process’ list to ‘available’ via the Trello REST API
This helped me go from a long list of photos to manually process to automatically having them ready enough to put on the website in a few seconds!
For the products page on the site, I query this list of items from Trello and display the details about each! This is not an exact catalog and more there to give a perusing customer an idea of what’s available and encourage an in-person visit. But this same setup could be used for a (slightly) more sophisticated workflow of inventory as well!
Conclusion
That’s it! It was really fun to work on, try some things out, and get a website up with no hosting costs for my dad’s work! A wonderful side project to tinker with while I have been on leave and primarily busy with being a dad myself!
Thanks to all the excellent tools that provide wonderful and usable free developer tiers; Trello, Retool, Cloudflare. These approachable tools are also great at the Enterprise level; our company has Trello Enterprise and it is used often for project setup, we also recently partnered with Retool because we see it as a valuable option for our clients carrying out digital transformations quickly and with sometimes limited engineering resourcing.
Lastly, if you’re in the Baltimore area and looking for some artifacts, antiques, or architectural salvage pieces from some beautifully renovated industrial buildings, please visit Frederick’s of Baltimore in Hampden (also on Google Maps and Yelp).
