Skip to main content

Live Portal

backend.celticluck.com

Repository

TrueGroupAgency/celtic-portal

​
Overview

The Celtic Portal is the internal command center for the CelticLuck platform. Operations teams, customer support, and admins use this Next.js application to orchestrate raffles, monitor revenue, manage users, and maintain platform health across all brands.

​
What Admins Can Do

Raffle Management
Create and configure raffle campaigns with pricing tiers, draw dates, and featured flags. Monitor live entry counts, close draws, and trigger winner selection workflows. User & Discount Administration
Search user accounts, reset passwords, force-set credentials for support cases, and generate bulk discount codes with tagged categories for campaign tracking. Analytics & Reporting
View revenue reports by raffle, track returning customer rates, analyze discount redemption patterns, and export transaction logs for reconciliation. Integration with TripleWhale and GA4 provides campaign-level attribution. Multi-Brand Configuration
Manage site-specific settings (branding, legal links, checkout origins) for each storefront. Ensure new brands inherit consistent UX patterns while allowing per-brand customization. Customer Support Tools
Look up orders, issue refunds via the refund endpoint, replay failed API requests from the secure replay system, and audit user activity logs for troubleshooting.

​
Tech Stack

  • Framework: Next.js App Router
  • Language: TypeScript
  • Styling: Tailwind CSS
  • State Management: React Hooks

​
Project Structure

  • app/: Next.js App Router routes, layout shells, and server components.
  • components/: Reusable client components.
  • hooks/: Shared React hooks (useX pattern).
  • lib/: Utilities, API helpers, and configuration constants.
  • public/ & styles/: Static assets and global styles.

​
Development Workflow

1

Installation

Install workspace dependencies:
pnpm install
2

Development

Start the dev server with hot reload:
pnpm dev
Access at http://localhost:3000.
3

Building

Create a production bundle:
pnpm build

​
UX & Accessibility Guidelines

We strive for accessible, fast, and delightful UIs.

​
Interactions

  • Keyboard: Full keyboard support per WAI-ARIA APG. Visible focus rings.
  • Touch: Hit targets ≥24px (mobile ≥44px). No double-tap zoom.
  • Forms: Hydration-safe inputs. Enter submits focused text input. Errors inline next to fields.

​
Performance

  • Metrics: Track and minimize re-renders. Profile with CPU/network throttling.
  • Loading: Preload above-the-fold images; lazy-load the rest. Prevent CLS.

​
Design

  • Contrast: Meet APCA contrast guidelines. Increase contrast on hover/active/focus.
  • Motion: Honor prefers-reduced-motion. Animate compositor-friendly props (transform, opacity).

​
Environment

Store secrets in .env.local. Never commit credentials. Provide sample keys in .env.example.