As a Digital Problem Solver, you often encounter surprising digital challenges. Recently, I had such an opportunity to sink my teeth into a project that combined two key areas of expertise: deploying the headless CMS Directus and the power of rapid prototyping using AI. A double win!
A prospect approached me with a specific question: how can we convert an Excel dataset into a functioning website, powered by a headless SAAS application? The application in question? Directus. To be honest, I'd never heard of it myself. But as always, I see a new Digital Problem as an invitation to learn and innovate.
Laying the Groundwork: Data and Directus
You need data for a prototype. Fortunately, my Tradetracker account came in handy. I downloaded an existing product feed, which formed a good basis for a data model.
Directus offers a handy Docker image, allowing me to effortlessly launch the application on my home server with a simple compose.yaml configuration.
services:
directus:
image: directus/directus:latest
ports:
- 8055:8055
volumes:
- ./florapracht/database:/directus/database
- ./florapracht/uploads:/directus/uploads
- ./florapracht/extensions:/directus/extensions
environment:
SECRET: "replace-with-random-value"
ADMIN_EMAIL: "admin@example.com"
ADMIN_PASSWORD: "d1r3ctu5"
DB_CLIENT: "sqlite3"
DB_FILENAME: "/directus/database/data.db"
WEBSOCKETS_ENABLED: "true"
After logging in to Directus, I quickly built a data model based on the CSV headers. For this rapid prototype, I kept it simple: everything as text fields, without direct validation. Speed was key here. To ensure secure access for the front-end without manipulating the data, I created a specific 'read-only' account. The data was ready; time for the website!
The Front-end Leap with AI: Gemini Canvas
For the front-end, I wanted to explore a new tool: Gemini Canvas. This AI-powered environment promises to enable you to create websites without coding yourself. Exactly what I was looking for in a rapid prototype!
My instructions to the AI were clear and detailed:
Create a simple webpage that displays a list of collection items based on an API endpoint of the headless CMS Directus. Also ensure that you have a details page for each collection item. The system must be independently deployable. Ensure that the details page has a good call-to-action button. The products are about flowers and floral arrangements. Also come up with an original name. The site must be mobile-first and responsive.
The results didn't take long. After a short conversation, a website was quickly up and running that neatly presented the data and was easy to navigate.
Going Live and Fine-Tuning
A website needs a name! I asked Gemini for help finding a suitable, available domain name for a flower shop. The suggestion florapracht.nl was perfect and still available! Using a simple Docker Nginx image, I connected the website to this new domain.
The next step was optimizing the URL structure. I wanted each flower arrangement to have its own "clean" URL. This required changes to both Directus and the site's generated code. Directus has extensions for automatic slugs (user-friendly URLs), but these didn't work optimally during a bulk import. I found the solution in Directus Flows: a powerful feature that allows you to use a piece of code to perform automated actions each time an item is created or updated, even when importing items.
Then I instructed Gemini Canvas:
The response also has a slug field. If it exists, use it as the URL for the details page.
And to top it all off:
I also want to see the slug in the browser address bar.
After a quick update to the code on my server, I had it: a simple, yet fully functional website, powered by a headless Directus with a CSV file as the source.
Prototype Successful: Two Birds with One Stone!
This exercise has proven how quickly and efficiently you can tackle complex digital challenges by combining the right tools with innovative AI solutions. I'm not only richer in experience, but also one step closer to my mission as a Digital Problem Solver for entrepreneurs.
Do you have a digital challenge that requires an effective solution? Feel free contact me or fill out the form, and let's explore together how I can realize that ambition.