H
Hex2077 Starter
6 min readLast updated: 2026-01-02 17:45

Features

This document provides a detailed overview of the core feature modules integrated in the Hex2077 Starter Template, helping developers understand system capabilities and extend functionality.

Authentication & Security

Built on Better Auth, providing a complete user account management system.

  • Multiple Login Methods: Support for email/password login and OAuth (GitHub, Google) social login
  • Automated Hooks:
    • Before Hook: Intercept illegal registration requests (e.g., fingerprint conflicts), validate password strength, check login attempt counts
    • After Hook: Record login logs, associate user fingerprints, send welcome emails
  • Security Features:
    • Login Failure Lockout: Temporarily ban IP or account after exceeding configured failure attempts
    • Registration Fingerprint Protection: Combined with browser fingerprint technology to prevent malicious bot batch registration
    • Turnstile Integration: Login/registration pages support Cloudflare Turnstile captcha

Payment & Subscription System

Uses strategy pattern to support multiple payment gateways with a unified subscription model.

  • Multi-Gateway Support: Pre-integrated Stripe and Creem, dynamically switched via GatewayFactory
  • Subscription Cycle Management:
    • Support for Monthly and Yearly plans
    • Automated handling of subscription creation, updates (upgrade/downgrade), and cancellation
  • Webhook Normalization: Unified processing of webhook notifications from various gateways, ensuring database state synchronization with payment gateways
  • Customer Portal: Integrated native customer portal from gateways, allowing users to self-manage billing, payment methods, and subscriptions

Credits System

A flexible virtual currency model supporting consumption and replenishment.

  • Credit Types:
    • Paid Credits: Obtained through purchasing credit packages or subscription rewards, typically no expiration
    • Free Credits: System gifts or promotions, supports expiration dates, consumed first
  • Replenishment Models:
    • Subscription Grants: Automatic credit distribution monthly or yearly after subscribing to specific plans
    • One-time Purchase: Independent credit package purchase flow
  • Consumption Logic: Interface-level atomic deduction with concurrency protection

Admin Dashboard

Full-featured management tools for operations staff.

  • Data Overview: Visualization of key business metrics (revenue, user growth, credit consumption)
  • User & Permission Management:
    • User list query, detail view, status banning
    • Flexible Role and Permission system
  • Business Operations:
    • Subscription Management: View all user subscription details, manually trigger refunds or adjustments
    • Credit Intervention: Administrators can manually add or deduct credits for specific users
  • System Settings:
    • Dynamic configuration of payment gateway switches, email service parameters, security validation strategies
    • Maintenance mode toggle
  • Audit Logs: Detailed recording of all administrator sensitive operations with automatic log cleanup

AI Capabilities

Multi-modal AI service layer built on LangChain, supporting chat, image generation, and video generation.

LangChain Service Architecture

  • Multi-Provider Support: Unified wrapper for OpenAI, Anthropic, Google Gemini, OpenRouter and other mainstream LLM providers
  • Model Coverage:
    • OpenAI: GPT-5 series, GPT-4.1, o3 reasoning models, etc.
    • Anthropic: Claude 4.5 series (Opus/Sonnet/Haiku)
    • Google: Gemini 3/2.5 series
    • OpenRouter: Aggregates multiple providers, supports DeepSeek, Meta Llama 4, Mistral and other open-source models
  • Core Capabilities:
    • Streaming output
    • Token counting and usage statistics
    • Custom API Base URL (proxy support)
    • Agent tool calling and memory management
    • Text embedding and document splitting

AI Chat

AI Image Generation

AI Video Generation

Blog System

Modern multilingual blog system based on MDX.

  • Content Management: Supports MDX format, allowing React components directly in Markdown
  • Multilingual Support: Each article can provide en, zh-CN, ja and other language versions
  • Features:
    • Auto-generated Table of Contents (TOC) and heading IDs
    • Syntax highlighting (Highlight.js)
    • Automatic reading time estimation
    • Responsive rendering with Tailwind Typography support
  • Landing Page: Beautiful blog list page with article card display and category filtering

Documentation System

Structured documentation system based on MDX, designed for product documentation and technical manuals.

  • Directory Structure:
    • Support for multi-level categories (e.g., Introduction, Guides, Deployment, Reference)
    • Configure category order, titles, and icons via _config.json
  • Multilingual Support: Each document can provide multiple language versions, automatically switching based on URL language prefix
  • Reading Experience:
    • Left sidebar: Category directory tree with search support
    • Right sidebar: Auto-extracted headings for TOC with scroll highlighting
    • Previous/Next navigation: Automatic calculation of adjacent documents for continuous reading
  • Landing Page: Documentation homepage displays all categories and document cards with quick navigation
  • Mobile Adaptation: Responsive design with drawer navigation for mobile devices

AI Landing Pages

Professional marketing landing page component library for AI features.

  • Unified Architecture: AIUnifiedPageContent component supports three modes:
    • chat: Display AI chat functionality only
    • image: Display AI image generation functionality only
    • video: Display AI video generation functionality only
    • all: Tab switching to display all features
  • Component Modules:
    • Hero Section: Feature introduction and CTA buttons
    • Social Proof: User reviews and trust endorsements
    • Features: Feature cards display
    • Gallery: Work showcase (image/video gallery)
    • How It Works: Usage flow explanation
    • FAQ: Frequently asked questions

Internationalization (i18n)

Site-wide multilingual support based on i18next.

  • Route Integration: Automatic language switching based on URL prefix (e.g., /zh, /en)
  • Hybrid Rendering Support: Smooth translation for both Server Components and Client Components
  • Multilingual Dictionaries: Structured JSON configuration files located in public/locales/

SEO & Analytics

  • Dynamic Metadata: Each page supports dynamic generation of title, description, and OpenGraph tags based on current language and content
  • Sitemap Generation: Automatic multilingual sitemap generation based on routes and blog posts
  • Analytics Plugin Support: System variables support dynamic insertion of analytics scripts (e.g., Google Analytics, Microsoft Clarity)
  • Structured Data: Pre-configured JSON-LD support for improved search engine understanding

Scheduled Tasks

Built-in automated background task logic, triggerable via Cron services.

  • Automatic Credit Replenishment: Regular credit distribution for eligible yearly subscription users monthly/daily
  • System Cleanup: Automatic cleanup of expired admin audit logs
  • Automated Refunds: Processing automatic refund flows for specific states
  • Newsletter Resend: Automated email subscription list management

UI Themes & Interactions

  • Dark Mode: Support for light, dark, tech, WeChat green, and other modes with built-in system preference following
  • Semantic Variables: Based on Tailwind CSS 4, using full CSS variable color control (e.g., bg-main, text-primary) for consistent custom theming
  • Animation Library: Integrated Framer Motion and AOS for smooth page entry and interaction animations

Communication & Notifications

  • Email Service: Integrated Resend service with multilingual email templates
  • In-App Messages: User center integrated notification center supporting system notification publishing and reading
  • Newsletter: Integrated email subscription functionality

Infrastructure & Tools

  • Database ORM: Drizzle ORM with multi-database adaptation (SQLite/PostgreSQL)
  • Storage Service: Support for R2/S3 compatible object storage with universal file upload API
  • Common Hooks:
    • useAuth: Global user authentication state management
    • usePermissions: Fine-grained page/component level permission validation
    • useAdminFetch: API request wrapper optimized for admin dashboard
    • useDateFormat: Multilingual date formatting tool
  • Utilities & Services:
    • Auth Helpers: auth-helpers.ts encapsulates common permission and login validation logic
    • Payment Factory: GatewayFactory implements decoupling of different payment gateways (Stripe/Creem)
    • Cache Utils: Unified cache-utils.ts for server-side caching logic
    • Security Audit: log-cleanup-service.ts for automated sensitive operation log handling
  • Security:
    • Built-in Cloudflare Turnstile firewall support
    • Registration fingerprint tracking and conflict interception
    • API-level Zod parameter validation
  • Engineering:
    • Unified fetch wrapper
    • Rigorous admin audit log flow