The latest articles on DEV Community by İpek Efendiev (@ipek_efendiev_192742a5571). https://dev.to/ipek_efendiev_192742a5571 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3192884%2F43a7c270-1a4c-457a-ae00-d8fcb251e022.jpg https://dev.to/ipek_efendiev_192742a5571 en İpek Efendiev Sun, 25 May 2025 19:41:28 +0000 https://dev.to/ipek_efendiev_192742a5571/turn-emails-into-support-tickets-with-postmark-fao https://dev.to/ipek_efendiev_192742a5571/turn-emails-into-support-tickets-with-postmark-fao <p>This is a submission for the <a href="https://dev.to/challenges/postmark">Postmark Challenge: Inbox Innovators</a>.</p> <h2> What I Built </h2> <p><strong>Postmark Kanban Inbox</strong> is a simple ticket management system that turns incoming emails into categorized, actionable Kanban cards - powered by Postmark's inbound webhooks with facebook/bart-large-mnli, a powerful language model that can categorize messages without any fine-tuning.</p> <h2> Demo </h2> <blockquote> <p>You can run the full app <strong>locally</strong> by following the steps in the <a href="https://github.com/iefendiev/postmark-kanban-inbox#-how-to-test-it" rel="noopener noreferrer">README</a>.</p> </blockquote> <p>The README includes everything you need to:</p> <ul> <li>Start both the frontend and backend servers</li> <li>Set up a Postmark inbound webhook (with <code>ngrok</code>)</li> <li>Send test emails or use <code>curl</code>/JSON for local testing</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu5vkxljbrpt20c37clo5.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu5vkxljbrpt20c37clo5.png" alt="app-demo" width="800" height="607"></a></p> <h2> Code Repository </h2> <p>You can explore the full project source code here:</p> <p>🔗 <a href="https://github.com/iefendiev/postmark-kanban-inbox" rel="noopener noreferrer">https://github.com/iefendiev/postmark-kanban-inbox</a></p> <p>The repository contains:</p> <ul> <li>A <code>server/</code> folder with the Express + Prisma backend</li> <li>A <code>client/</code> folder with the React + Tailwind frontend</li> <li>A comprehensive README with setup instructions and usage notes</li> </ul> <h2> How I Built It </h2> <p>This project was built with a clean separation between backend and frontend, allowing full control over both Postmark webhook handling and UI rendering.</p> <h3> Backend </h3> <ul> <li> <strong>Node.js + Express</strong> for setting up the webhook and exposing RESTful endpoints</li> <li> <strong>Prisma + SQLite</strong> for a fast, file-based data layer — ideal for local testing</li> <li> <strong>Postmark Inbound Webhook</strong> to receive and parse raw email data</li> <li> <strong>Hugging Face Inference API</strong> using the <code>facebook/bart-large-mnli</code> model for zero-shot classification of ticket category and priority</li> </ul> <h3> Frontend </h3> <ul> <li> <strong>Vite + React + TypeScript</strong> for a fast, modern development environment</li> <li> <strong>Tailwind CSS + Shadcn UI</strong> for a polished and consistent interface</li> <li> <strong>TanStack Query</strong> to manage API data and caching</li> <li> <strong>@dnd-kit</strong> for Kanban-style drag-and-drop ticket management</li> <li> <strong>Confetti animation</strong> triggers when a ticket is marked as resolved 🎉</li> </ul> <p>I usually stick to frontend work, but this challenge pushed me to try new things, and I’m really glad it did.</p> devchallenge postmarkchallenge webdev