Start
/Resources
/Frontend
/How to Contribute
/Dashboard Setup

Dashboard Setup

Learn how to set up, configure, and run the Reloop user dashboard locally.

The User Dashboard is the primary, premium Next.js client-facing web application of the Reloop platform. It serves as the visual command center where users configure campaigns, view rich analytical dashboards, manage subscriber segments, design dynamic email layouts, and manage API keys and custom sending domains.

Prerequisite First

Before starting the Dashboard client app, make sure you've completed the base Local Development Setup and have the required backend microservices running (especially the auth service).

Quick Start

Dependencies are handled globally at the root directory. You can start the Dashboard development server instantly:

# Start the Next.js dev server with Turbopack hot reloading
bun fe:dashboard:dev

cd apps/frontend/dashboard
bun dev

Once running, the Dashboard service will listen on port 3001 locally. You can access the interface through Caddy proxy at https://local.reloop.sh/dashboard (or directly at http://localhost:3001) 🎉

Service Information

  • Directory Location: apps/frontend/dashboard/
  • Local Listening Port: 3001 (configured via --port=3001 in the dev script)
  • Unified Access Route: https://local.reloop.sh/dashboard
  • Primary Tech Stack: Next.js (with Turbopack), React 19, TypeScript, Tailwind CSS, Lucide Icons, Recharts, Tiptap, Framer Motion
  • Dependencies: Relies on Caddy to proxy Auth and API requests to ElysiaJS microservices.

Environment Configuration

The Dashboard environment variables are defined inside apps/frontend/dashboard/.env. If you ran bun env:setup at the root, your .env is already configured:

# Base URL for better-auth cookie domain and callback routing
NEXT_PUBLIC_APP_URL="https://local.reloop.sh"

# API Gateway Service URL routing to ElysiaJS backend microservices
NEXT_PUBLIC_API_URL="https://local.reloop.sh/api"

# Collaborative Editor Websocket Gateway Endpoint
NEXT_PUBLIC_WS_URL="wss://local.reloop.sh"

Reference Table

VariableRequiredDefault ValueDescription
NEXT_PUBLIC_APP_URLYEShttps://local.reloop.shMain base client URL (handles Better Auth OAuth redirects).
NEXT_PUBLIC_API_URLYEShttps://local.reloop.sh/apiAPI proxy endpoint used by SWR and axios fetches.
NEXT_PUBLIC_WS_URLYESwss://local.reloop.shWebSocket presence gateway for real-time collaboration.

Development Commands

All workspace operations should be executed from the monorepo root directory using Turborepo filters:

CommandActionScope
bun fe:dashboard:devStart the Dashboard Next.js app in Turbopack development modeDevelopment
bun run --filter=dashboard buildCompile the Dashboard for optimized static productionProduction
bun run --filter=dashboard startRun the compiled production build locallyProduction
bun run --filter=dashboard lintRun Next.js linting checksCode Quality

Troubleshooting Guide

Port 3001 Conflict

If the terminal throws a port binding conflict, identify and clear the PID using port 3001:

# Inspect process listening on port 3001
lsof -i :3001

# Terminate process manually
kill -9 <PID>

Authentication Redirect Failures

If you experience infinite redirect loops or auth errors:

  1. Ensure the Elysia auth microservice is up and listening on port 8000 (bun be:auth:dev).
  2. Verify that NEXT_PUBLIC_APP_URL is set to exactly https://local.reloop.sh in .env.
  3. Check your browser developer tools to ensure cookies are being set on the correct domain context (local.reloop.sh).