create-pnpm-custom-app 1.0.0

package/templates/apps/web/app/globals.css

@@ -0,0 +1,104 @@
+@import 'tailwindcss';
+
+/* ==================================================
+   TAILWIND THEME CONFIGURATION
+   ================================================== */
+
+@theme {
+  /* ==================================================
+     CUSTOM COLORS
+     ================================================== */
+  --color-primary: #3b82f6;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #10b981;
+  --color-secondary-foreground: #ffffff;
+
+  /* ==================================================
+     LIGHT MODE COLORS
+     ================================================== */
+  --color-background: #ffffff;
+  --color-foreground: #0a0a0a;
+  --color-card: #ffffff;
+  --color-card-foreground: #0a0a0a;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #0a0a0a;
+  --color-muted: #f1f5f9;
+  --color-muted-foreground: #64748b;
+  --color-accent: #f1f5f9;
+  --color-accent-foreground: #0f172a;
+  --color-destructive: #ef4444;
+  --color-destructive-foreground: #fafafa;
+  --color-border: #e2e8f0;
+  --color-input: #e2e8f0;
+  --color-ring: #3b82f6;
+
+  /* ==================================================
+     BORDER RADIUS
+     ================================================== */
+  --radius: 0.5rem;
+
+  /* ==================================================
+     CUSTOM SPACING (if needed)
+     ================================================== */
+  /* --spacing-section: 4rem; */
+}
+
+/* ==================================================
+   DARK MODE CONFIGURATION
+   ================================================== */
+
+:root {
+  color-scheme: light dark;
+}
+
+.dark {
+  color-scheme: dark;
+
+  --color-primary: #60a5fa;
+  --color-secondary: #34d399;
+
+  --color-background: #0a0a0a;
+  --color-foreground: #fafafa;
+  --color-card: #0a0a0a;
+  --color-card-foreground: #fafafa;
+  --color-popover: #0a0a0a;
+  --color-popover-foreground: #fafafa;
+  --color-muted: #1e293b;
+  --color-muted-foreground: #94a3b8;
+  --color-accent: #1e293b;
+  --color-accent-foreground: #fafafa;
+  --color-destructive: #7f1d1d;
+  --color-border: #1e293b;
+  --color-input: #1e293b;
+  --color-ring: #60a5fa;
+}
+
+/* ==================================================
+   BASE STYLES
+   ================================================== */
+
+* {
+  border-color: var(--color-border);
+}
+
+body {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+/* ==================================================
+   UTILITY CLASSES (optional custom utilities)
+   ================================================== */
+
+/* Example: Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Example: Focus visible styling */
+:focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}

package/templates/apps/web/app/icon.svg

@@ -0,0 +1,5 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="512" height="512" rx="128" fill="#3b82f6"/>
+  <path d="M256 128C238.3 128 224 142.3 224 160V256C224 273.7 238.3 288 256 288C273.7 288 288 273.7 288 256V160C288 142.3 273.7 128 256 128Z" fill="white"/>
+  <circle cx="256" cy="352" r="32" fill="white"/>
+</svg>

package/templates/apps/web/app/layout.tsx

@@ -0,0 +1,37 @@
+import type { Metadata } from 'next';
+import { Providers } from './providers';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: '{{PROJECT_NAME}}',
+  description: 'A professional full-stack monorepo with Next.js, Fastify, and pnpm workspaces',
+  metadataBase: new URL('https://your-domain.com'),
+  keywords: ['nextjs', 'fastify', 'monorepo', 'pnpm', 'typescript'],
+  authors: [{ name: 'Your Name' }],
+  openGraph: {
+    title: '{{PROJECT_NAME}}',
+    description: 'A professional full-stack monorepo',
+    type: 'website',
+    locale: 'es_ES',
+    alternateLocale: 'en_US',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: '{{PROJECT_NAME}}',
+    description: 'A professional full-stack monorepo',
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html suppressHydrationWarning>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

package/templates/apps/web/app/manifest.json

@@ -0,0 +1,22 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "short_name": "{{PROJECT_NAME}}",
+  "description": "A professional full-stack monorepo",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#3b82f6",
+  "icons": [
+    {
+      "src": "/icon.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/apple-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    }
+  ]
+}

package/templates/apps/web/app/providers.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { ReactNode } from 'react';
+
+/**
+ * Providers component
+ *
+ * This component wraps the application with context providers.
+ * Add your theme providers, state management providers, etc. here.
+ *
+ * @example
+ * // Add a theme provider:
+ * import { ThemeProvider } from 'next-themes';
+ *
+ * export function Providers({ children }: { children: ReactNode }) {
+ *   return (
+ *     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+ *       {children}
+ *     </ThemeProvider>
+ *   );
+ * }
+ */
+export function Providers({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

package/templates/apps/web/app/robots.ts

@@ -0,0 +1,12 @@
+import type { MetadataRoute } from 'next';
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: '/api/',
+    },
+    sitemap: 'https://your-domain.com/sitemap.xml',
+  };
+}

package/templates/apps/web/app/sitemap.ts

@@ -0,0 +1,18 @@
+import type { MetadataRoute } from 'next';
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: 'https://your-domain.com',
+      lastModified: new Date(),
+      changeFrequency: 'yearly',
+      priority: 1,
+    },
+    {
+      url: 'https://your-domain.com/about',
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 0.8,
+    },
+  ];
+}

package/templates/apps/web/eslint.config.mjs

@@ -0,0 +1,16 @@
+import nextPlugin from 'eslint-config-next';
+
+const config = [
+  {
+    ignores: [
+      'node_modules/**',
+      '.next/**',
+      'out/**',
+      'build/**',
+      'next-env.d.ts',
+    ],
+  },
+  ...nextPlugin,
+];
+
+export default config;

package/templates/apps/web/gitignore

@@ -0,0 +1,56 @@
+# Dependencies
+node_modules/
+.pnp
+.pnp.js
+
+# Next.js
+.next/
+out/
+*.tsbuildinfo
+next-env.d.ts
+
+# Production
+build/
+dist/
+
+# Environment variables
+.env
+.env*.local
+!.env.example
+!.env.local.example
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# OS
+.DS_Store
+*.pem
+Thumbs.db
+
+# IDE
+.vscode/*
+!.vscode/settings.json
+!.vscode/extensions.json
+.idea/
+*.swp
+*.swo
+*~
+
+# Testing
+coverage/
+.nyc_output
+
+# Turbopack
+.turbopack/
+
+# Vercel
+.vercel
+
+# Temporary files
+*.tmp
+.cache

package/templates/apps/web/hooks/README.md

@@ -0,0 +1,25 @@
+# Hooks
+
+Custom React hooks for reusable logic across components.
+
+## Examples
+
+```ts
+// useMediaQuery.ts
+import { useState, useEffect } from 'react';
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    setMatches(media.matches);
+
+    const listener = () => setMatches(media.matches);
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [query]);
+
+  return matches;
+}
+```

package/templates/apps/web/i18n/config.ts

@@ -0,0 +1,9 @@
+export const locales = ['es', 'en'] as const;
+export type Locale = (typeof locales)[number];
+
+export const defaultLocale: Locale = 'es';
+
+export const localeNames: Record<Locale, string> = {
+  es: 'Español',
+  en: 'English',
+};

package/templates/apps/web/i18n/request.ts

@@ -0,0 +1,15 @@
+import { getRequestConfig } from 'next-intl/server';
+import { locales, Locale } from './config';
+
+export default getRequestConfig(async ({ requestLocale }) => {
+  let locale = await requestLocale;
+
+  if (!locale || !locales.includes(locale as Locale)) {
+    locale = 'es';
+  }
+
+  return {
+    locale,
+    messages: (await import(`../messages/${locale}.json`)).default,
+  };
+});

package/templates/apps/web/interfaces/README.md

@@ -0,0 +1,5 @@
+# Interfaces
+
+TypeScript interfaces and types specific to the frontend.
+
+Shared types between frontend and backend should go in `packages/shared`.

package/templates/apps/web/lib/README.md

@@ -0,0 +1,45 @@
+# Lib Folder
+
+This folder contains utility functions, API clients, and helper modules.
+
+## Purpose
+
+- **API Clients**: Functions to interact with the backend API
+- **Utilities**: Helper functions used across the application
+- **Constants**: Shared constants and configuration
+- **Helpers**: Common helper functions
+
+## Example Structure
+
+```txt
+lib/
+├── api.ts           # Generic API client
+├── utils.ts         # Utility functions
+├── constants.ts     # App constants
+└── services/
+    ├── auth.ts      # Authentication service
+    └── users.ts     # Users service
+```
+
+## Example API Client
+
+```typescript
+// api.ts
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3002';
+
+export async function fetcher<T>(endpoint: string, options?: RequestInit): Promise<T> {
+  const response = await fetch(`${API_URL}${endpoint}`, {
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      ...options?.headers,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`API Error: ${response.statusText}`);
+  }
+
+  return response.json();
+}
+```

package/templates/apps/web/lib/utils.ts

@@ -0,0 +1,18 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Utility function to merge Tailwind CSS classes
+ * 
+ * @param inputs - Class values to merge
+ * @returns Merged class string
+ * 
+ * @example
+ * ```typescript
+ * cn('px-2 py-1', 'bg-primary') // 'px-2 py-1 bg-primary'
+ * cn('px-2', someCondition && 'bg-primary') // 'px-2 bg-primary' if someCondition is true
+ * ```
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/apps/web/messages/en.json

@@ -0,0 +1,34 @@
+{
+  "common": {
+    "loading": "Loading...",
+    "error": "An error occurred",
+    "success": "Success!",
+    "cancel": "Cancel",
+    "save": "Save",
+    "delete": "Delete",
+    "edit": "Edit",
+    "create": "Create",
+    "update": "Update",
+    "search": "Search",
+    "filter": "Filter",
+    "clear": "Clear",
+    "close": "Close",
+    "back": "Back",
+    "next": "Next",
+    "previous": "Previous",
+    "submit": "Submit",
+    "confirm": "Confirm"
+  },
+  "nav": {
+    "home": "Home",
+    "about": "About",
+    "contact": "Contact"
+  },
+  "home": {
+    "title": "Welcome to {{PROJECT_NAME}}",
+    "description": "A professional full-stack monorepo with Next.js, Fastify, and pnpm workspaces"
+  },
+  "footer": {
+    "copyright": "© {year} {{PROJECT_NAME}}. All rights reserved."
+  }
+}

package/templates/apps/web/messages/es.json

@@ -0,0 +1,34 @@
+{
+  "common": {
+    "loading": "Cargando...",
+    "error": "Ocurrió un error",
+    "success": "¡Éxito!",
+    "cancel": "Cancelar",
+    "save": "Guardar",
+    "delete": "Eliminar",
+    "edit": "Editar",
+    "create": "Crear",
+    "update": "Actualizar",
+    "search": "Buscar",
+    "filter": "Filtrar",
+    "clear": "Limpiar",
+    "close": "Cerrar",
+    "back": "Atrás",
+    "next": "Siguiente",
+    "previous": "Anterior",
+    "submit": "Enviar",
+    "confirm": "Confirmar"
+  },
+  "nav": {
+    "home": "Inicio",
+    "about": "Acerca de",
+    "contact": "Contacto"
+  },
+  "home": {
+    "title": "Bienvenido a {{PROJECT_NAME}}",
+    "description": "Un monorepo profesional full-stack con Next.js, Fastify y pnpm workspaces"
+  },
+  "footer": {
+    "copyright": "© {year} {{PROJECT_NAME}}. Todos los derechos reservados."
+  }
+}

package/templates/apps/web/next.config.ts

@@ -0,0 +1,50 @@
+import type { NextConfig } from 'next';
+import createNextIntlPlugin from 'next-intl/plugin';
+
+const withNextIntl = createNextIntlPlugin('./i18n/request.ts');
+
+const nextConfig: NextConfig = {
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          {
+            key: 'X-DNS-Prefetch-Control',
+            value: 'on',
+          },
+          {
+            key: 'X-Frame-Options',
+            value: 'SAMEORIGIN',
+          },
+          {
+            key: 'X-Content-Type-Options',
+            value: 'nosniff',
+          },
+          {
+            key: 'Referrer-Policy',
+            value: 'origin-when-cross-origin',
+          },
+          {
+            key: 'Permissions-Policy',
+            value: 'camera=(), microphone=(), geolocation=()',
+          },
+        ],
+      },
+    ];
+  },
+  poweredByHeader: false,
+  reactStrictMode: true,
+  logging: {
+    fetches: {
+      fullUrl: true,
+    },
+  },
+  experimental: {
+    serverActions: {
+      bodySizeLimit: '2mb',
+    },
+  },
+};
+
+export default withNextIntl(nextConfig);

package/templates/apps/web/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@{{PROJECT_NAME}}/web",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "next": "^16.1.1",
+    "next-intl": "^4.7.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.4.0",
+    "@{{PROJECT_NAME}}/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.14",
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.9",
+    "@types/react-dom": "^19.0.4",
+    "eslint": "^9.18.0",
+    "eslint-config-next": "^16.1.1",
+    "prettier": "^3.4.2",
+    "tailwindcss": "^4.1.14",
+    "typescript": "^5.7.3"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/templates/apps/web/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;

package/templates/apps/web/proxy.ts

@@ -0,0 +1,17 @@
+import createMiddleware from 'next-intl/middleware';
+import { NextRequest } from 'next/server';
+import { locales, defaultLocale } from './i18n/config';
+
+const intlMiddleware = createMiddleware({
+  locales,
+  defaultLocale,
+  localePrefix: 'always',
+});
+
+export default async function middleware(request: NextRequest) {
+  return intlMiddleware(request);
+}
+
+export const config = {
+  matcher: ['/', '/(es|en)/:path*', '/((?!_next|_vercel|.*\\..*).*)'],
+};

package/templates/apps/web/public/README.md

@@ -0,0 +1,7 @@
+# Public Assets
+
+Static files like images, fonts, and other assets.
+
+Place your static files here. They will be served from the root path `/`.
+
+Example: `public/logo.svg` → Available at `/logo.svg`

package/templates/apps/web/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/apps/web/types/README.md

@@ -0,0 +1,3 @@
+# Types
+
+TypeScript type definitions and ambient declarations.

package/templates/docs/README.md

@@ -0,0 +1,13 @@
+# Documentation
+
+This folder contains project documentation.
+
+## Suggested Documents
+
+- **API.md** - API endpoints documentation
+- **ARCHITECTURE.md** - System architecture overview
+- **DEPLOYMENT.md** - Deployment guides
+- **TROUBLESHOOTING.md** - Common issues and solutions
+- **CHANGELOG.md** - Version history and changes
+
+Feel free to add any documentation that helps team members understand and work with the project.