Setup User Feedback Collection in Minutes

#webdev #javascript #programming #productivity

Setup User Feedback Collection in Minutes with @jxdltd/feedback

Collecting user feedback shouldn't be complicated. @jxdltd/feedback is a headless feedback platform that gets you up and running in just a few minutes with a simple, type-safe SDK.

Why @jxdltd/feedback?

Headless architecture - Bring your own UI, no bloated widgets
Type-safe - Built with TypeScript for a great developer experience
Automatic tagging - Organize feedback by app, environment, or custom tags
Centralized management - All feedback in one place across multiple apps
Framework agnostic - Works with Next.js, Express, or any web framework

Getting Started

1. Install the package

bun add @jxdltd/feedback

2. Create a server handler

Set up a feedback endpoint that forwards submissions to the centralized service:

import { createFeedbackHandler } from "@jxdltd/feedback/server";

// Create the handler with your API key and tags
const handler = createFeedbackHandler({
  apiKey: process.env.FEEDBACK_API_KEY,
  tags: {
    app: "my-app",
    environment: "production",
  },
});

// Example: Next.js API route
export async function POST(request: Request) {
  return handler(request);
}

3. Submit feedback from the client

import { feedback } from "@jxdltd/feedback/client";

// That's it! 
await feedback("This is great!");

Real-World Example

Here is the code from one of my products Big Journal.

// routes/api.feedback.ts

import { createFeedbackHandler } from "@jxdltd/feedback/server";
import { createFileRoute } from "@tanstack/react-router";
import { json } from "@tanstack/react-start";
import { getAuth } from "@/auth/functions";
import { env } from "@/env";

export const Route = createFileRoute("/api/feedback")({
    server: {
        handlers: {
            POST: async ({ request }) => {
                const auth = await getAuth();

                if (!auth) {
                    return json({ error: "Unauthorized" }, { status: 401 });
                }

                return createFeedbackHandler({
                    apiKey: env.FEEDBACK_KEY,
                    tags: {
                        app: "big-journal",
                        user: auth.user.email,
                    },
                })(request);
            },
        },
    },
});

All feedback automatically includes your tags, making it easy to filter and analyze by app, environment, version, or any custom dimension you need.

The Headless Advantage

Unlike traditional feedback widgets that force a specific UI, @jxdltd/feedback gives you complete control over the user experience. Build a feedback form that matches your design system, integrate it into your existing modals, or create a simple button - it's entirely up to you.

Get Started

Check out the GitHub repository to get started. With just three steps and a few lines of code, you'll have production-ready feedback collection running across all your applications.

Perfect for indie hackers, startups, and teams who want powerful feedback management without the complexity.

DEV Community