Sometimes when you find yourself building the same thing over and over again with only slight variations, eventually, you decide it’s time to build a shortcut. That’s how we ended up with Teal.
Teal is a soon-to-be open-source tool for resource management. For several years, our team had been building administrative dashboards for clients as an item on a list of project deliverables.
Of course each dashboard had its own variables and criteria, but for the most part, they all came with very similar requirements: logins and the ability to manage a range of resources and pages.
We hadn’t found an open-source solution that met our requirements across the board, so we built one ourselves. Teal would not only save us time and repetition, but it would also provide a customizable administrative resource for future clients.
We set out with the goal of streamlining our workflow and never building another administrative dashboard again. This was a solution to our own pain point, so we had a clear plan of attack.
The system would need to be easily integrated into an existing Phoenix application. It would also need to:
- perform basic CRUD operations (Create, Read, Update, and Delete).
- provide filters, relationship management, and a tool for acting on resources.
- be performant for a diverse set of inputs and for large data sets.
- be easy to extend through plugins for tools and workflows outside of the core feature set of the application.
- be customizable and provide a great user experience.
Challenges & Solutions
In its earliest iteration, Teal was two separate applications. We knew that eventually we had to merge the two. The front end was written on Vue CLI, which interacted with an API that was compatible with Phoenix. In order to make the front-end tool compatible with the Elixir ecosystem, we separated our front-end code from Vue CLI and served the results of the new build system from the plug dependencies.
We also used Ecto schemas to map data into the Elixir struct. We were particularly interested in our new tool’s ability to correlate its resources with the Ecto schemas and their relationships. From Ecto’s metadata, we had good insight into the relationships that made the work possible in a functional language and toolset.
The best thing about Teal, from our perspective, is its adaptability. It’s a solution that’s built to work for everyone, but it’s certainly not meant to be one-size-fits-all. We’ve seen, through various plugins we’ve written, that Teal contains the groundwork for some highly ambitious custom tooling.
Teal is a reflection of who we are in more ways than one. We’re engineers who are deeply interested in the tools that we work with, and our understanding of those tools allows them to work for us. While building solutions for clients, we also act on opportunities to improve our internal workflow.
Teal happens to be a color that’s been embedded into our visual identity for years. As a software solution, it allows us to bring a touch of our own identity and ingenuity to anyone looking to manage their content more efficiently.
Fun fact: We built this whole site using Teal.
🧪 Elixir Admin Dashboard Tool
View Case Study
Feast & Fettle
🍽 Custom Web App
🛍 Custom E-commerce Site
📓 Custom Portfolio Site
😷 COVID-19 Resource
🍩 Custom Order Form
🐘 Visual Identity Redesign