​
Architecture

  • We have two panels: client and admin.
  • The client panel is built with SvelteKit, Next.js, or Vue.js.
  • The admin panel is built with Go + HTMX.
  • The client panel communicates with the main server using HTTP.
  • The admin panel communicates with the main server using gRPC.

​
Framework-Specific Guidelines

  • TailwindCSS: Standard across all frameworks.
  • Go + HTMX: Uses Templ, Alpine.js, Morph plugin, and SSE plugin.
  • SvelteKit: Focus on SSR, Form Actions, and Runes.
  • Next.js: Emphasizes SSR, App Router, and Server Actions.
  • Vue.js: Primarily for simple client-side rendering.

​
Philosophy

  • Keep It Simple: The frontend should be a thin layer, handling only UI and interactions.
  • Reusability First: Build components that are modular and composable.
  • Consistency Matters: Follow a unified design and behavior across components.
  • Optimized for Speed: Prioritize fast, responsive UI performance.
  • Minimal Dependencies: Use only essential libraries to reduce bloat.

​
Validation

  • Start with Native HTML: Use built-in validation (required, pattern, min, max, etc.) whenever possible.
  • Server-Side When Needed: Offload complex validation to the backend.
  • Clear User Feedback: Show meaningful error messages, not just generic alerts.