doo-boilerplate 0.1.0

package/templates/template-nextjs/components.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

package/templates/template-nextjs/docker-compose.yml

@@ -0,0 +1,12 @@
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        - NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL:-http://localhost:8000}
+    container_name: {{PROJECT_NAME}}
+    ports:
+      - "3000:3000"
+    env_file: .env
+    restart: unless-stopped

package/templates/template-nextjs/docs/swagger/api.json

@@ -0,0 +1,77 @@
+{
+  "openapi": "3.0.3",
+  "info": {
+    "title": "{{PROJECT_NAME}} API",
+    "description": "API documentation. Replace this file with your actual OpenAPI spec.",
+    "version": "1.0.0"
+  },
+  "servers": [
+    { "url": "http://localhost:8000", "description": "Local development" }
+  ],
+  "paths": {
+    "/auth/login": {
+      "post": {
+        "tags": ["auth"],
+        "summary": "Login",
+        "requestBody": {
+          "required": true,
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "required": ["email", "password"],
+                "properties": {
+                  "email": { "type": "string", "format": "email" },
+                  "password": { "type": "string", "minLength": 6 }
+                }
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Login successful",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "accessToken": { "type": "string" },
+                    "refreshToken": { "type": "string" },
+                    "user": {
+                      "type": "object",
+                      "properties": {
+                        "id": { "type": "string" },
+                        "email": { "type": "string" },
+                        "name": { "type": "string" }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/auth/me": {
+      "get": {
+        "tags": ["auth"],
+        "summary": "Get current user",
+        "security": [{ "bearerAuth": [] }],
+        "responses": {
+          "200": { "description": "Current user info" }
+        }
+      }
+    }
+  },
+  "components": {
+    "securitySchemes": {
+      "bearerAuth": {
+        "type": "http",
+        "scheme": "bearer",
+        "bearerFormat": "JWT"
+      }
+    }
+  }
+}

package/templates/template-nextjs/eslint.config.ts

@@ -0,0 +1,25 @@
+import js from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import reactHooks from 'eslint-plugin-react-hooks'
+import unusedImports from 'eslint-plugin-unused-imports'
+
+export default tseslint.config(
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    plugins: {
+      'react-hooks': reactHooks,
+      'unused-imports': unusedImports,
+    },
+    rules: {
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      'unused-imports/no-unused-imports': 'error',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+      'no-console': ['warn', { allow: ['warn', 'error'] }],
+    },
+  },
+  {
+    ignores: ['dist/', '.next/', 'src/components/ui/', '*.config.*'],
+  }
+)

package/templates/template-nextjs/knip.config.ts

@@ -0,0 +1,8 @@
+import type { KnipConfig } from 'knip'
+
+const config: KnipConfig = {
+  entry: ['src/app/**/*.{ts,tsx}', 'src/middleware.ts'],
+  project: ['src/**/*.{ts,tsx}'],
+  ignore: ['src/components/ui/**', 'src/features/*/services/gen/**'],
+}
+export default config

package/templates/template-nextjs/messages/en.json

@@ -0,0 +1,14 @@
+{
+  "auth": {
+    "signIn": "Sign In",
+    "signUp": "Sign Up",
+    "signOut": "Sign Out",
+    "email": "Email",
+    "password": "Password"
+  },
+  "nav": {
+    "dashboard": "Dashboard",
+    "settings": "Settings",
+    "profile": "Profile"
+  }
+}

package/templates/template-nextjs/messages/vi.json

@@ -0,0 +1,14 @@
+{
+  "auth": {
+    "signIn": "Đăng nhập",
+    "signUp": "Đăng ký",
+    "signOut": "Đăng xuất",
+    "email": "Email",
+    "password": "Mật khẩu"
+  },
+  "nav": {
+    "dashboard": "Bảng điều khiển",
+    "settings": "Cài đặt",
+    "profile": "Hồ sơ"
+  }
+}

package/templates/template-nextjs/next.config.ts

@@ -0,0 +1,13 @@
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  output: 'standalone',
+  images: {
+    remotePatterns: [
+      { protocol: 'https', hostname: '**.fptcloud.com' },
+      { protocol: 'https', hostname: 'lh3.googleusercontent.com' },
+    ],
+  },
+}
+
+export default nextConfig

package/templates/template-nextjs/optional/charts/deps.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "echarts": "^6.0.0",
+    "echarts-for-react": "^3.0.2",
+    "recharts": "^2.15.1"
+  }
+}

package/templates/template-nextjs/optional/dark-mode/deps.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "next-themes": "^0.4.6"
+  }
+}

package/templates/template-nextjs/optional/dark-mode/files/providers/theme-provider.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import { type ReactNode } from 'react'
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute='class'
+      defaultTheme='system'
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+    </NextThemesProvider>
+  )
+}

package/templates/template-nextjs/optional/dnd/deps.json

@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/utilities": "^3.2.2"
+  }
+}

package/templates/template-nextjs/optional/editor/deps.json

@@ -0,0 +1,10 @@
+{
+  "dependencies": {
+    "@tiptap/react": "^2.11.7",
+    "@tiptap/starter-kit": "^2.11.7",
+    "@tiptap/extension-link": "^2.11.7",
+    "@tiptap/extension-image": "^2.11.7",
+    "@tiptap/extension-placeholder": "^2.11.7",
+    "@tiptap/extension-underline": "^2.11.7"
+  }
+}

package/templates/template-nextjs/optional/i18n/deps.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "next-intl": "^4.3.4"
+  }
+}

package/templates/template-nextjs/optional/sentry/deps.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@sentry/nextjs": "^9.19.0"
+  }
+}

package/templates/template-nextjs/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "type-check": "tsc --noEmit",
+    "format": "prettier --write .",
+    "format:check": "prettier -c .",
+    "knip": "knip",
+    "gen:api": "swagger-typescript-api -p ./docs/swagger/api.json -o ./src/features/auth/services/gen --no-client --modular",
+    "gen:api:watch": "swagger-typescript-api -p ./docs/swagger/api.json -o ./src/features/auth/services/gen --no-client --modular --watch",
+    "docker:build": "bash scripts/build-and-scan.sh",
+    "docker:scan": "bash scripts/trivy-scan.sh"
+  },
+  "dependencies": {
+    "next": "16.0.10",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "next-intl": "^4.3.4",
+    "next-themes": "^0.4.6",
+    "zustand": "^5.0.2",
+    "@tanstack/react-query": "^5.83.0",
+    "@tanstack/react-table": "^8.21.2",
+    "axios": "^1.11.0",
+    "react-hook-form": "^7.54.1",
+    "zod": "^3.24.1",
+    "@hookform/resolvers": "^3.9.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.0.2",
+    "class-variance-authority": "^0.7.1",
+    "lucide-react": "^0.476.0",
+    "date-fns": "^4.1.0",
+    "sonner": "^2.0.7",
+    "jwt-decode": "^4.0.0",
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "cmdk": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5.7.2",
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "postcss": "^8.4.49",
+    "eslint": "^9",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "typescript-eslint": "^8.31.1",
+    "@eslint/js": "^9.25.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.2.11",
+    "knip": "^5.45.0",
+    "swagger-typescript-api": "^13.2.7",
+    "@tanstack/react-query-devtools": "^5.83.0"
+  },
+  "lint-staged": {
+    "*.{js,ts,tsx,css}": ["eslint --fix", "prettier --write"]
+  }
+}

package/templates/template-nextjs/postcss.config.js

@@ -0,0 +1 @@
+module.exports = { plugins: { '@tailwindcss/postcss': {} } }

package/templates/template-nextjs/scripts/build-and-scan.sh

@@ -0,0 +1,13 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+PROJECT_NAME=$(node -p "require('./package.json').name")
+IMAGE_TAG="${PROJECT_NAME}:latest"
+
+echo "Building Docker image: $IMAGE_TAG"
+docker build -t "$IMAGE_TAG" .
+
+echo "Scanning with Trivy..."
+bash "$(dirname "$0")/trivy-scan.sh" "$IMAGE_TAG"
+
+echo "Build and scan complete: $IMAGE_TAG"

package/templates/template-nextjs/scripts/trivy-scan.sh

@@ -0,0 +1,24 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+IMAGE_NAME="${1:-app:latest}"
+SEVERITY="${TRIVY_SEVERITY:-HIGH,CRITICAL}"
+
+echo "Running Trivy security scan on: $IMAGE_NAME"
+
+# Check if trivy is installed
+if ! command -v trivy &> /dev/null; then
+  echo "Trivy not found. Installing via Docker..."
+  docker run --rm \
+    -v /var/run/docker.sock:/var/run/docker.sock \
+    -v "$HOME/.cache/trivy:/root/.cache" \
+    aquasec/trivy:latest image \
+    --severity "$SEVERITY" \
+    --exit-code 1 \
+    "$IMAGE_NAME"
+else
+  trivy image \
+    --severity "$SEVERITY" \
+    --exit-code 1 \
+    "$IMAGE_NAME"
+fi

package/templates/template-nextjs/src/app/(auth)/layout.tsx

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react'
+
+// Centered layout for auth pages
+export default function AuthLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-muted/40 p-4">
+      {children}
+    </div>
+  )
+}

package/templates/template-nextjs/src/app/(auth)/sign-in/page.tsx

@@ -0,0 +1,9 @@
+import { SignInForm } from '@/features/auth/components/sign-in-form'
+
+export const metadata = {
+  title: 'Sign In',
+}
+
+export default function SignInPage() {
+  return <SignInForm />
+}

package/templates/template-nextjs/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react'
+
+import { Header } from '@/components/layout/header'
+import { MobileSidebar, Sidebar } from '@/components/layout/sidebar'
+
+export default function DashboardLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar />
+      <MobileSidebar />
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <Header />
+        <main className="flex-1 overflow-y-auto">{children}</main>
+      </div>
+    </div>
+  )
+}

package/templates/template-nextjs/src/app/(dashboard)/page.tsx

@@ -0,0 +1,27 @@
+import { PageLayout } from '@/components/layout/page-layout'
+
+// Stat card placeholder component
+function StatCard({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-lg border bg-card p-6 text-card-foreground shadow-sm">
+      <p className="text-sm font-medium text-muted-foreground">{label}</p>
+      <p className="mt-2 text-3xl font-bold">{value}</p>
+    </div>
+  )
+}
+
+export default function DashboardPage() {
+  return (
+    <PageLayout
+      title="Dashboard"
+      description="Welcome to your portal. Here's an overview of your account."
+    >
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <StatCard label="Total Users" value="1,024" />
+        <StatCard label="Active Sessions" value="42" />
+        <StatCard label="Requests Today" value="8,390" />
+        <StatCard label="Uptime" value="99.9%" />
+      </div>
+    </PageLayout>
+  )
+}

package/templates/template-nextjs/src/app/(dashboard)/profile/page.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { useAuthStore } from '@/stores/auth-store'
+import { PageLayout } from '@/components/layout/page-layout'
+
+export default function ProfilePage() {
+  const { user } = useAuthStore()
+
+  return (
+    <PageLayout title="Profile" description="View and manage your profile information.">
+      <div className="rounded-lg border bg-card p-6 text-card-foreground shadow-sm">
+        {user ? (
+          <div className="space-y-3">
+            <div>
+              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                Name
+              </p>
+              <p className="mt-1 text-sm font-medium">{user.name}</p>
+            </div>
+            <div>
+              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                Email
+              </p>
+              <p className="mt-1 text-sm font-medium">{user.email}</p>
+            </div>
+            <div>
+              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                Roles
+              </p>
+              <p className="mt-1 text-sm font-medium">{user.roles.join(', ') || 'No roles'}</p>
+            </div>
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground">No profile information available.</p>
+        )}
+      </div>
+    </PageLayout>
+  )
+}

package/templates/template-nextjs/src/app/(dashboard)/settings/page.tsx

@@ -0,0 +1,15 @@
+import { PageLayout } from '@/components/layout/page-layout'
+
+export const metadata = {
+  title: 'Settings',
+}
+
+export default function SettingsPage() {
+  return (
+    <PageLayout title="Settings" description="Manage your application settings and preferences.">
+      <div className="rounded-lg border bg-card p-6 text-card-foreground shadow-sm">
+        <p className="text-sm text-muted-foreground">Settings configuration coming soon.</p>
+      </div>
+    </PageLayout>
+  )
+}

package/templates/template-nextjs/src/app/api/health/route.ts

@@ -0,0 +1,3 @@
+export function GET() {
+  return new Response('ok', { status: 200 })
+}

package/templates/template-nextjs/src/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+
+import { AppProviders } from '@/providers/app-providers'
+import '@/styles/globals.css'
+
+const inter = Inter({ subsets: ['latin'], variable: '--font-sans' })
+
+export const metadata: Metadata = {
+  title: '{{PROJECT_NAME}}',
+  description: 'Portal frontend application',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.variable}>
+        <AppProviders>{children}</AppProviders>
+      </body>
+    </html>
+  )
+}

package/templates/template-nextjs/src/app/not-found.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+
+import { Button } from '@/components/ui/button'
+
+export default function NotFound() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-4 text-center">
+      <h1 className="text-6xl font-bold text-muted-foreground">404</h1>
+      <h2 className="text-2xl font-semibold">Page Not Found</h2>
+      <p className="max-w-md text-muted-foreground">
+        The page you are looking for does not exist or has been moved.
+      </p>
+      <Button asChild>
+        <Link href="/dashboard">Go to Dashboard</Link>
+      </Button>
+    </div>
+  )
+}

package/templates/template-nextjs/src/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation'
+
+export default function RootPage() {
+  redirect('/dashboard')
+}

package/templates/template-nextjs/src/components/common/error-boundary.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import React, { type ErrorInfo } from 'react'
+
+import { Button } from '@/components/ui/button'
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode
+  fallback?: React.ReactNode
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean
+  error?: Error
+}
+
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, info)
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: undefined })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback
+      }
+
+      return (
+        <div className="flex min-h-[400px] flex-col items-center justify-center gap-4 p-6 text-center">
+          <h2 className="text-xl font-semibold">Something went wrong</h2>
+          <p className="max-w-md text-sm text-muted-foreground">
+            {this.state.error?.message ?? 'An unexpected error occurred. Please try again.'}
+          </p>
+          <Button variant="outline" onClick={this.handleReset}>
+            Try again
+          </Button>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}

package/templates/template-nextjs/src/components/common/loading-spinner.tsx

@@ -0,0 +1,28 @@
+import { Loader2 } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+const sizeMap = {
+  sm: 'h-4 w-4',
+  md: 'h-6 w-6',
+  lg: 'h-10 w-10',
+}
+
+export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
+  return (
+    <Loader2 className={cn('animate-spin text-muted-foreground', sizeMap[size], className)} />
+  )
+}
+
+export function FullPageSpinner() {
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <LoadingSpinner size="lg" />
+    </div>
+  )
+}