Frontend

​

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.