Loopback App

Loopback App is the powerful dashboard management system for Loopback — a beautiful, polished, and embeddable feedback widget for React.

Loopback is a themeable feedback component designed to be dropped into any React application. It offers:

• Flexible Layouts: Support for both modal and embedded layouts.
• Versatile Ratings: Input collection via emoji, star, or number ratings.
• Rich Theming: Fully customizable aesthetics, including native dark mode support.
• Developer Friendly: Supports both controlled and uncontrolled usage for maximum integration flexibility.

This repository serves as the administrative backend and dashboard for managing submissions, project configurations, and analytics for your feedback widgets.

Tech Stack

• Framework: Next.js 16 (App Router)
• Authentication: Clerk
• Database ORM: Drizzle ORM
• Database: Postgres
• API: tRPC
• Caching: Flamecache with Firebase
• Styling: Tailwind CSS & Shadcn UI

Getting Started

Prerequisites

• Node.js installed
• A Postgres database instance
• A Clerk project for authentication
• A Firebase project for caching (optional)

Environment Setup

1. Copy the example environment file:

   cp .env.example .env.local

2. Fill in the required environment variables in .env.local:
   • NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY & CLERK_SECRET_KEY: Get these from your Clerk Dashboard.
   • DATABASE_URL: Your Postgres connection string.
   • FIREBASE_*: Your Firebase configuration for caching.

Development

First, install dependencies:

npm install # or bun install

Then, run the development server:

npm run dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Project Structure

• app/: Next.js App Router pages and layouts.
• components/: Reusable UI components (Shadcn UI).
• db/: Database schema and Drizzle configuration.
• lib/: Utility functions and API clients (tRPC, cache).

Learn More

• Next.js Documentation - learn about Next.js features and API.
• Drizzle ORM Documentation
• Clerk Documentation
• tRPC Documentation