Back to Product

Frontend Guideline Document

Frontend Guideline Document: Creation King - One-Stop Intelligent Creation Platform

Version: 1.0
Date: 2023-10-15

1. Introduction

Creation King is an AI-driven multi-scenario content creation platform supporting tools for social media (Weibo, Xiaohongshu), blogs (WeChat Official Account), analytical frameworks (SWOT), and creative utilities (Tarot, Dream Interpretation). This document defines frontend architecture standards, ensuring scalability, security, and performance across diverse user workflows.

2. Technology Stack

  • Core Framework: React 18.2 (with hooks and concurrent mode)
  • State Management: Redux Toolkit 1.9 + RTK Query 1.9 (for API caching)
  • Routing: React Router 6.14
  • Styling: Tailwind CSS 3.3 + CSS Modules (for component isolation)
  • UI Components: Headless UI 1.7 + Radix Primitives 1.0 (accessible, unstyled)
  • Form Handling: React Hook Form 7.43 + Yup 1.2 (validation)
  • Internationalization: i18next 23.2
  • Testing: Jest 29.6 + React Testing Library 14.0 + Cypress 12.15 (E2E)
  • Build Tool: Vite 4.4 (with SWC for fast compilation)
  • Monitoring: Sentry 7.66 (error tracking)

3. Project Structure

src/
├── assets/          # Static resources
├── components/      # Reusable UI components (atomic design)
├── features/        # Feature modules (e.g., `swot-editor`, `tarot-predictor`)
├── hooks/           # Custom hooks (e.g., `useContentGenerator`)
├── lib/             # Utilities (API clients, formatters)
├── pages/           # Route-based page components
├── store/           # Redux slices and API endpoints
├── styles/          # Global Tailwind config + CSS Modules
├── i18n/            # Translation files
└── App.tsx          # Root component

4. Implementation Guidelines

4.1 Component Design
  • Atomic Design Principles: Build components as isolated units (Atoms → Molecules → Organisms).
  • Example: A ContentEditor organism integrates:
    • TextArea (Atom)
    • AIRecommendationBar (Molecule with real-time suggestions)
    • StyleSelector (Molecule for platform-specific templates).
4.2 State Management
  • Global State: Use RTK Query for API data (e.g., cached AI responses).
  • Local State: React useState/useReducer for UI interactions (e.g., editor draft state).
  • Persistence: Save unsaved drafts to localStorage via custom hook useAutoSave.
4.3 API Integration
  • Communication: RESTful APIs via Axios 1.4, with JWT authentication.
  • Error Handling: Global interceptor for 401/429 errors; retry failed AI requests (max 2 retries).
  • Example Endpoint: 
    // store/api/contentApi.ts
createContent: builder.mutation({
  query: (prompt) => ({
    url: '/ai/generate',
    method: 'POST',
    body: { prompt, platform: 'xiaohongshu' },
  }),
}),

5. Styling & Theming

  • Tailwind Configuration:
    • Extend theme for brand colors (primary: #4F46E5).
    • Use @apply in CSS Modules for complex components.
  • Dark Mode: Toggle via ThemeContext and CSS variables.
  • Responsiveness: Mobile-first breakpoints (sm:, md:, lg:).

6. Performance Optimization

  • Code Splitting: Route-based lazy loading with React.lazy().
  • Asset Optimization: Compress images via Vite plugin vite-plugin-imagemin.
  • AI Response Handling: Debounce user input (Lodash 4.17) to reduce API calls.
  • Bundle Analysis: rollup-plugin-visualizer for tracking bundle size.

7. Security

  • XSS Protection: Sanitize AI-generated HTML with DOMPurify 3.0.
  • Authentication: Store JWT in httpOnly cookies; refresh tokens via /auth/refresh.
  • CSP: Nonce-based Content Security Policy for inline scripts.

8. Internationalization (i18n)

  • Setup: Use i18next-browser-languagedetector to auto-detect locale.
  • Workflow:
    1. Wrap app in I18nextProvider.
    2. Load JSON translations dynamically.
    3. Use t() function for UI strings: 
      <h1>{t('tarotPredictor.title')}</h1>

9. Testing Strategy

  • Unit Tests: Jest for components/hooks (coverage ≥ 80%).
  • Integration Tests: React Testing Library for feature workflows (e.g., form submission).
  • E2E Tests: Cypress for critical paths (e.g., "Generate Xiaohongshu post").
  • AI Mocking: Mock RTK Query endpoints with msw 1.3 for deterministic testing.

10. Deployment

  • CI/CD: GitHub Actions:
    • Lint (ESLint 8.45 + Prettier 3.0) → Test → Build → Deploy to AWS S3 + CloudFront.
  • Environment Variables: Load via .env (Vite import.meta.env).
  • CDN: Cache static assets with 1-year TTL; AI responses with 5-minute TTL.

11. Scalability & Extensibility

  • Micro-Frontends: Future-proof with Module Federation (Vite plugin) for adding tools (e.g., video-script module).
  • Plugin Architecture: Expose registerTool() API to inject new creation utilities dynamically.
  • Load Balancing: Horizontal scaling behind NGINX; monitor with Datadog RUM.

References

Document Length: 3,850 characters
Review Cycle: Quarterly updates for dependencies and security audits.