Skip to content
On this page

Developer Blog

Directus Panel Quest Hackathon: Project Listing

Published November 2nd, 2023

Written By
Kevin Lewis
Kevin Lewis
Director, Developer Relations

Winner Announced!

Check below as we've updated this post with our two winners for the Directus Panel Quest Hackathon.

Throughout October, we ran the Directus Panel Quest Hackathon. We challenged our community to build panel extensions that utilize external APIs or data in interesting ways.

We had feedback that the acceptance criteria was a bit unclear, so we accepted the few submissions that did not access external services, but instead enriched the behavior of a Directus project. We've had 12 submissions, and now it's your turn to get involved.

The core team will vote for our favorite project judging projects based the following criteria with no specific weighting:

  1. Creative: Is the idea original and innovative?
  2. Technical: How effectively do you integrate the external API or data (or Directus project)? Is the project well-executed? Does it run?
  3. Relevance: Do you solve a real problem faced by people?
  4. Presentation: Have you taken time to add polish to your project?

Community Vote ​

One of our prizes is decided by the community. From the submissions below, the repository with the most GitHub Stars before November 8 at 23:59 UTC will win this category. No stars given or removed after the end of the judging period will be accepted.

The Projects ​

StackSync Panel - Community Winner ​

Options showing a dropdown for panel type: manage integration, customers, products, or payment request.

A large number of charts, tables, and graphs demonstrating the four panel types.

This panel contains four distinct sets of data from a Paystack account, allowing you to handle tasks such as customer management, product management, and payment requests directly from your Directus dashboard.

Check out the repository: koredeycode/StackSync.

Flow Runner Panel - Core Team Winner ​

Panel showing sections of flows, with a button to run it

This extension will bring your manual flows from multiple collections together into a convenient panel or split them into several panels. It uses the flows endpoint and native components to provide the same functionality such as flow confirmation dialogs.

Check out the repository: timio23/directus-panel-manual-flows.

Spotify Panel ​

Two panes - one showing a song playing, last played, and up next with album art. Play, next, shuffle buttons, a slider showing song progression, and a colume slider. The seoncd pane shows just the current/last/next songs without controls.

This panel uses the Spotify SDK to view, play, and manage Spotify tunes right from a Directus dashboard. Some users have Insights Dashboards always visible on a secondary display, and this addition adds media controls and information to it.

Check out the repository: resauce-dev/directus-extension-spotify.

Poly Trend Insights Panel ​

Polygon API Panel settings showing a dropdown of asset types including stocks, forex, and crypto. Options also include ticker and timespan.

Two panels showing line charts - one is in a candlestick mode, and the other in a filled area.

PolyTrend leverages the Polygon API and ApexCharts to provide financial market data and insights. Users can select an asset type and ticker, as well as on-panel display options to make the displayed chart as useful as possible to them.

Check out the repository: koredeycode/PolyTrend.

DeepL Translator Panel ​

Translate panel options show a target language dropdown with a number of spoken languages.

A classic translate interface - a text box with a button showing 'translate to french', and a result.

A panel that uses the DeepL Free Translation API to translate detected language text into a specified target language. This can be provided as a convenience panel as part of a dashboard, or combined with other panels to create an internal CRM/Conversation tool.

Check out the repository: be7DOTis/directus-extension-deepl-translator.

GitHub Statistic Panel ​

Options include repository selection and a dropdown for a specific statistic

Six panels each showing an icon and a number. They represent stars, issues, pull requests, forms, watches, and contributors.

A panel that shows a large metric from a specified GitHub repository using the GitHub API. The chosen metric can be any of: Stars, Issues, Pull Requests, Forks, Watches, and Contributors. Only showing one metric allows dashboard creators to select what matters to them.

Check out the repository: LaCrecerelle/directus-extension-gh-stats.

System Info Panel ​

A huge number of statistics and tables about the machine's hardware, running processes, and available resources.

This extension provides a panel for displaying the system information of the Directus instance. Useful as an analysis tool for debugging or benchmarking.

Check out the repository: FloMaetschke/directus-extension-bundle-systeminfo.

Data Cleanup Admin Panels ​

One panel shows a list of unused files with a delete button. The other shows empty M2M entities.

Directus does not have built in methods to see what files are unused or M2M records are empty, this bundle tries to solve that. The bundle includes 2 panels, one for viewing unused files, the other one is for detecting empty/invalid M2M records inside of the junction table.

Check out the repository: Attacler/directus-extension-admin-panels.

Internal Chat Panel ​

Chat setup shows the ability to create unique chats or base it on the comment thread of any item

Panel showing a chat interface

This is a native internal chat panel for communicating with other users from a dashboard, using the build-in comment functionality in Directus. It supports mentions, search, emojis, and editing/deleting messages.

Check out the repository: timio23/directus-panel-internal-chat.

Jira Panels ​

One panel shows a text box and send button for feedback. The other shows a list of current tasks.

This bundle contains two panels, one to create a form and one to create a list. They let your users see what issues have been already submitted and being worked on, and let them submit their own feedback easily. Each list panel is configured with JQL, so you can limit which tasks that show up.

Check out the repository: Arood/directus-extension-jira-panels.

Custom Query Panel ​

An item in a GCP Queries collection with a full SQL Query

A panel showing a table of data

This panel allows for execution of custom SQL queries directly from an Insights dashboard. Use dynamic parameters to reuse queries with different values. This is a powerful panel, but caution should be exercised when executing raw SQL queries.

Check out the repository: 7span/directus-extension-custom-query-panel.

Data Fetch and Add Panel ​

Panel with text "chefs table" in an input with three results displayed in a dropdown.

A single selected result with a big 'Save to Directus' button shown in the panel.

This panel allows users to search data via an external API (TVMaze in this example) and then add items directly to a collection. This panel is hardcoded for TVMaze, but could be adjusted and adapted for any API with a search endpoint.

Check out the repository: smokeyfro/directus-extension-bundle-api-fetch.

And The Winner Is... ​

...being announced at a live Discord event on November 14 2023, and winners contacted over email on the same day. If you haven't already, this is a great time to join our Discord community.

Both the Directus Core Team and Community Vote prizes are the same:

  • $1000 USD awarded to the project submitter.
  • $250 USD donation to a charity of the winner’s choice from the following list:
    • codebar - a charity that facilitates the growth of a diverse tech community by running free regular programming workshops for minority groups in tech.
    • VetsInTech - who support transitioning military, veterans and spouses of either with reintegration services, and by connecting them to the national technology ecosystem.
    • Out In Tech - the world’s largest non-profit community of LGBTQ+ tech leaders.
    • Carbon180 works toward developing equitable, science-based policies that will scale carbon removal.
    • Cool Earth works with rainforest communities, tackles the root causes of deforestation, and protects vital carbon sinks.

Get voting, and see you on the November 14th!

We're all ears 🐰

How helpful was this article?