Thumbsmith Uses Directus to Power Dynamic Creation of Customized Link Previews
Thumbsmith is an innovative SaaS app that enables developers to display customized link preview images – instead of generic ones – along with relevant information when they share links to content across platforms. The link preview thumbnails are dynamically generated based on customizable templates that Thumbsmith users can create in just a few clicks.
“Say you share a link to your website on Slack, and Slack shows you a small preview,” said Alexandre Lotte, Thumbsmith’s creator. “The preview is usually pretty generic and doesn’t give you any information about the content you’re sharing. Thumbsmith allows you to use HTML/CSS templates to programmatically define pictures for these previews. This way you can easily and automatically embed useful information about the content, providing recipients with more information that will compel them to click the link.”
Thumbsmith users leverage an integrated online editor to create beautiful templates and receive real-time feedback to help them fine-tune the templates, or they can use their favorite code editor coupled with Thumbsmith’s live updating development environment. In a few clicks, they can create the template, and add meta tags to make link previews truly useful when shared online. “Thumbsmith leverages the full power of HTML/CSS to provide infinite customizability,” Alexandre said. “The CDN is blazing fast, and pictures are cached and served at the network’s edge, as well, so they render instantly.”
To bring his idea for Thumbsmith to life, Alexandre needed a platform for creating a high-performing SaaS. He evaluated several solutions, including Supabase, Strapi and Directus. “Directus was more user-friendly than Supabase and offered just the right mix of features which are delivered in a way that made it much more valuable than the other solutions to me,” Alexandre said.
An Out-of-the-Box Backend Made Deploying the SaaS Quick and Painless
Getting up and running with Directus simple. “Initially I had a custom Docker setup, but I ended up switching to Digital Ocean’s one-click app, which simplified the setup and provided a robust solution for the service,” Alexandre said. “I can easily manage Directus using the Node.js CLI, and I still use the Directus Docker image for local development.”
According to Alexandre, Directus provided a ready-made backend for Thumbsmith. To create the frontend, he used a CSS library called HalfMoon UI, which he connected to the Directus backend using the JavaScript SDK provided by Directus. The SDK manages user login/logout as well as all data-fetching and interactions with the backend.
“For some of the performance-sensitive CDN related queries, I used a custom API endpoint with a custom SQL query to perform the calculations I needed straight in SQL,” Alexandre said. “I also created ‘magic link’ logic using a custom API route. I used a plain Custom API Endpoint for the webhook, as well.”
Thumbsmith users leverage a CLI to develop and manage their templates, which are deployed to the backend of the SaaS using the Directus REST API, along with the API token feature that comes out-of-the-box with Directus for authentication. Alexandre communicates with users upon account creation and login using emails provided by Directus and configured for use with the Mailgun API. “I just changed the appearance of the emails using .liquid templates,” he said. “For transactional emails, I leverage the internal MailService accessible in Directus via custom API endpoints and hooks.”
Rich Feature Set Enhances Ease of Use, Security
Alexandre is impressed with the rich feature set Directus provides. Templates are created and stored in a collection within Directus. Leveraging custom permissions, Alexandre created “custom access” rules to define user roles and apply them based on the user_created field within the templates. This ensures users only have access to their collections and no visibility into other users’ collections.
When users create a Thumbsmith account, a plain Directus account is automatically created with the appropriate user role. “I added a few extra fields to the user collection via the UI, and no code was necessary!” Alexandre said.
A Flexible and Full-featured Platform for Your SaaS
Directus provides a flexible, highly customizable solution for creating Thumbsmith, enabling Alexandre to launch his service faster and with user-friendly features. “Directus is a comprehensive full-featured solution for building out a highly performance SaaS, quickly and easily, and with no up-front cost,” he said. “Everything can be configured in a few clicks, and I still retain the flexibility to perform direct SQL queries, if necessary. Importantly, users have a high-quality experience and can now customize their image previews any way they like, quickly and with minimal effort.”
See for yourself how Thumbsmith works. To learn more about how Directus can help you get started building your next SaaS, try it out today.