Skip to main content

Web Module Specifications

Frontend module development specification documents for Viben Web application (apps/web).


Overview

This directory contains frontend development specifications for various functional modules of the Viben Web application, covering core modules such as UI Shell, authentication, user profile, and admin dashboard.


Module Index

ModuleDescriptionStatus
UI ShellApplication shell: layout, navigation, themingComplete
Auth UIAuthentication UI: login, registration, OAuthComplete
Profile UIUser profile: settings, API key managementComplete
Admin UIAdmin dashboard: content moderation, user managementComplete

Architecture Decisions

Tech Stack

TechnologyPurpose
Next.js 15React framework, App Router
shadcn/uiUI component library
Tailwind CSSStyling system
ZustandClient-side state management
react-hook-formForm handling
zodForm validation

Design Principles

  1. Server Components First: Use server components for data fetching
  2. Progressive Enhancement: Use client components for forms and interactions
  3. Type Safety: TypeScript throughout, zod validation
  4. Consistent Experience: Follow Viben Design System