create-velox-app 0.4.2 → 0.4.4

package/src/templates/source/root/CLAUDE.auth.md

@@ -0,0 +1,148 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code and other AI assistants.
+
+## Project Overview
+
+**__PROJECT_NAME__** is a VeloxTS full-stack application with:
+- **Backend**: Fastify + VeloxTS (apps/api)
+- **Frontend**: React + Vite + TanStack Router (apps/web)
+- **Database**: Prisma with SQLite
+- **Auth**: JWT authentication with guards
+
+## Commands
+
+```bash
+__RUN_CMD__ dev          # Start both API (__API_PORT__) and Web (__WEB_PORT__)
+__RUN_CMD__ build        # Build both apps
+__RUN_CMD__ db:push      # Push database schema
+__RUN_CMD__ db:studio    # Open Prisma Studio
+```
+
+## Architecture
+
+### Workspace Structure
+
+```
+apps/
+├── api/               # Backend (VeloxTS + Fastify)
+│   ├── src/
+│   │   ├── procedures/  # API procedures
+│   │   ├── schemas/     # Zod schemas
+│   │   └── config/      # App configuration
+│   └── prisma/
+│       └── schema.prisma
+│
+└── web/               # Frontend (React + Vite)
+    └── src/
+        ├── routes/      # TanStack Router pages
+        ├── components/  # React components
+        └── styles/      # CSS modules
+```
+
+### API Development (apps/api)
+
+**Creating a new procedure:**
+
+```typescript
+// apps/api/src/procedures/posts.ts
+import { defineProcedures, procedure, z } from '@veloxts/velox';
+
+export const postProcedures = defineProcedures('posts', {
+  // GET /api/posts/:id
+  getPost: procedure()
+    .input(z.object({ id: z.string().uuid() }))
+    .output(PostSchema)
+    .query(async ({ input, ctx }) => {
+      return ctx.db.post.findUnique({ where: { id: input.id } });
+    }),
+
+  // POST /api/posts
+  createPost: procedure()
+    .input(CreatePostSchema)
+    .output(PostSchema)
+    .mutation(async ({ input, ctx }) => {
+      return ctx.db.post.create({ data: input });
+    }),
+});
+```
+
+Then register in `src/procedures/index.ts` and add to collections in `src/index.ts`.
+
+### Frontend Development (apps/web)
+
+**Creating a new route:**
+
+```typescript
+// apps/web/src/routes/posts.tsx
+import { createFileRoute } from '@tanstack/react-router';
+import { useQuery } from '@veloxts/client';
+
+export const Route = createFileRoute('/posts')({
+  component: PostsPage,
+});
+
+function PostsPage() {
+  const { data: posts, isLoading } = useQuery(['posts'], '/posts');
+
+  if (isLoading) return <p>Loading...</p>;
+
+  return (
+    <ul>
+      {posts?.data.map(post => (
+        <li key={post.id}>{post.title}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+### Type Safety
+
+VeloxTS provides end-to-end type safety without code generation:
+
+1. **Define schemas** in `apps/api/src/schemas/`
+2. **Use in procedures** with `.input()` and `.output()`
+3. **Import in frontend** via `@veloxts/client` hooks
+4. Types flow automatically from backend to frontend
+
+## Authentication
+
+This project includes full JWT authentication:
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/api/auth/register` | POST | Create new account |
+| `/api/auth/login` | POST | Login and get tokens |
+| `/api/auth/refresh` | POST | Refresh access token |
+| `/api/auth/logout` | POST | Revoke current token |
+| `/api/auth/me` | GET | Get current user (protected) |
+
+### Environment Variables (Required for Production)
+
+```bash
+JWT_SECRET=<64+ chars>           # Generate: openssl rand -base64 64
+JWT_REFRESH_SECRET=<64+ chars>   # Generate: openssl rand -base64 64
+```
+
+## Procedure Naming Conventions
+
+| Procedure Name | HTTP Method | Route |
+|----------------|-------------|-------|
+| `getUser` | GET | `/users/:id` |
+| `listUsers` | GET | `/users` |
+| `createUser` | POST | `/users` |
+| `updateUser` | PUT | `/users/:id` |
+| `patchUser` | PATCH | `/users/:id` |
+| `deleteUser` | DELETE | `/users/:id` |
+
+## Database
+
+After schema changes:
+
+```bash
+__RUN_CMD__ db:push      # Apply changes
+__RUN_CMD__ db:generate  # Regenerate client
+```
+
+Access via context: `ctx.db.user.findMany()`

package/src/templates/source/root/CLAUDE.default.md

@@ -0,0 +1,128 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code and other AI assistants.
+
+## Project Overview
+
+**__PROJECT_NAME__** is a VeloxTS full-stack application with:
+- **Backend**: Fastify + VeloxTS (apps/api)
+- **Frontend**: React + Vite + TanStack Router (apps/web)
+- **Database**: Prisma with SQLite
+
+## Commands
+
+```bash
+__RUN_CMD__ dev          # Start both API (__API_PORT__) and Web (__WEB_PORT__)
+__RUN_CMD__ build        # Build both apps
+__RUN_CMD__ db:push      # Push database schema
+__RUN_CMD__ db:studio    # Open Prisma Studio
+```
+
+## Architecture
+
+### Workspace Structure
+
+```
+apps/
+├── api/               # Backend (VeloxTS + Fastify)
+│   ├── src/
+│   │   ├── procedures/  # API procedures
+│   │   ├── schemas/     # Zod schemas
+│   │   └── config/      # App configuration
+│   └── prisma/
+│       └── schema.prisma
+│
+└── web/               # Frontend (React + Vite)
+    └── src/
+        ├── routes/      # TanStack Router pages
+        ├── components/  # React components
+        └── styles/      # CSS modules
+```
+
+### API Development (apps/api)
+
+**Creating a new procedure:**
+
+```typescript
+// apps/api/src/procedures/posts.ts
+import { defineProcedures, procedure, z } from '@veloxts/velox';
+
+export const postProcedures = defineProcedures('posts', {
+  // GET /api/posts/:id
+  getPost: procedure()
+    .input(z.object({ id: z.string().uuid() }))
+    .output(PostSchema)
+    .query(async ({ input, ctx }) => {
+      return ctx.db.post.findUnique({ where: { id: input.id } });
+    }),
+
+  // POST /api/posts
+  createPost: procedure()
+    .input(CreatePostSchema)
+    .output(PostSchema)
+    .mutation(async ({ input, ctx }) => {
+      return ctx.db.post.create({ data: input });
+    }),
+});
+```
+
+Then register in `src/procedures/index.ts` and add to collections in `src/index.ts`.
+
+### Frontend Development (apps/web)
+
+**Creating a new route:**
+
+```typescript
+// apps/web/src/routes/posts.tsx
+import { createFileRoute } from '@tanstack/react-router';
+import { useQuery } from '@veloxts/client';
+
+export const Route = createFileRoute('/posts')({
+  component: PostsPage,
+});
+
+function PostsPage() {
+  const { data: posts, isLoading } = useQuery(['posts'], '/posts');
+
+  if (isLoading) return <p>Loading...</p>;
+
+  return (
+    <ul>
+      {posts?.data.map(post => (
+        <li key={post.id}>{post.title}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+### Type Safety
+
+VeloxTS provides end-to-end type safety without code generation:
+
+1. **Define schemas** in `apps/api/src/schemas/`
+2. **Use in procedures** with `.input()` and `.output()`
+3. **Import in frontend** via `@veloxts/client` hooks
+4. Types flow automatically from backend to frontend
+
+## Procedure Naming Conventions
+
+| Procedure Name | HTTP Method | Route |
+|----------------|-------------|-------|
+| `getUser` | GET | `/users/:id` |
+| `listUsers` | GET | `/users` |
+| `createUser` | POST | `/users` |
+| `updateUser` | PUT | `/users/:id` |
+| `patchUser` | PATCH | `/users/:id` |
+| `deleteUser` | DELETE | `/users/:id` |
+
+## Database
+
+After schema changes:
+
+```bash
+__RUN_CMD__ db:push      # Apply changes
+__RUN_CMD__ db:generate  # Regenerate client
+```
+
+Access via context: `ctx.db.user.findMany()`

package/src/templates/source/root/README.md

@@ -0,0 +1,72 @@
+# __PROJECT_NAME__
+
+A VeloxTS full-stack application - TypeScript from backend to frontend.
+
+## Getting Started
+
+### Install Dependencies
+
+```bash
+__PACKAGE_MANAGER__ install
+```
+
+### Setup Database
+
+```bash
+__RUN_CMD__ db:push
+```
+
+### Start Development
+
+```bash
+__RUN_CMD__ dev
+```
+
+This starts both:
+- **API** at http://localhost:__API_PORT__
+- **Web** at http://localhost:__WEB_PORT__
+
+## Project Structure
+
+```
+__PROJECT_NAME__/
+├── apps/
+│   ├── api/                 # Backend API (Fastify + VeloxTS)
+│   │   ├── src/
+│   │   │   ├── procedures/  # API endpoints
+│   │   │   ├── schemas/     # Zod validation
+│   │   │   └── index.ts     # Entry point
+│   │   └── prisma/          # Database schema
+│   │
+│   └── web/                 # React Frontend (Vite + TanStack)
+│       └── src/
+│           ├── routes/      # File-based routing
+│           └── main.tsx     # Entry point
+│
+├── package.json             # Workspace root
+└── pnpm-workspace.yaml      # Workspace config
+```
+
+## Available Scripts
+
+| Command | Description |
+|---------|-------------|
+| `__RUN_CMD__ dev` | Start both API and Web in development |
+| `__RUN_CMD__ build` | Build both apps for production |
+| `__RUN_CMD__ db:push` | Push database schema changes |
+| `__RUN_CMD__ db:studio` | Open Prisma Studio |
+
+## Type Safety
+
+VeloxTS provides end-to-end type safety:
+
+1. **Backend**: Define procedures with Zod schemas
+2. **Frontend**: Import types directly, use type-safe hooks
+3. **No code generation** - types flow automatically
+
+## Learn More
+
+- [VeloxTS Documentation](https://veloxts.dev)
+- [React](https://react.dev/)
+- [TanStack Router](https://tanstack.com/router)
+- [Prisma](https://www.prisma.io/)

package/src/templates/source/root/gitignore

@@ -0,0 +1,37 @@
+# Dependencies
+node_modules/
+
+# Build output
+dist/
+*.tsbuildinfo
+
+# Environment variables
+.env
+.env.local
+
+# Database
+*.db
+*.db-journal
+
+# Generated Prisma client
+**/generated/
+
+# Logs
+logs/
+*.log
+
+# OS
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Turbo
+.turbo/
+
+# Vite
+apps/web/.vite/

package/src/templates/source/root/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "__PROJECT_NAME__",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "__RUN_CMD__ --parallel -r dev",
+    "build": "__RUN_CMD__ -r build",
+    "type-check": "__RUN_CMD__ -r type-check",
+    "db:push": "__RUN_CMD__ -F api db:push",
+    "db:generate": "__RUN_CMD__ -F api db:generate",
+    "db:studio": "__RUN_CMD__ -F api db:studio"
+  },
+  "devDependencies": {
+    "typescript": "5.9.3"
+  }
+}

package/src/templates/source/root/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - 'apps/*'

package/src/templates/source/root/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  }
+}

package/src/templates/source/web/App.module.css

@@ -0,0 +1,282 @@
+/* App Styles */
+
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Navigation */
+.nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem;
+  background: #111;
+  border-bottom: 1px solid #222;
+}
+
+.navBrand {
+  display: flex;
+  align-items: center;
+}
+
+.logo {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #00d9ff;
+  text-decoration: none;
+}
+
+.logo:hover {
+  opacity: 1;
+  color: #00d9ff;
+}
+
+.navLinks {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.navLink {
+  color: #888;
+  font-weight: 500;
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.navLink:hover {
+  color: #fff;
+  opacity: 1;
+}
+
+.navLinkActive {
+  color: #fff;
+}
+
+/* Main Content */
+.main {
+  flex: 1;
+  padding: 2rem;
+}
+
+.container {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+/* Hero Section */
+.hero {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.title {
+  font-size: 3rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  background: linear-gradient(135deg, #fff 0%, #888 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.subtitle {
+  color: #888;
+  font-size: 1.25rem;
+}
+
+/* Cards Grid */
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+  margin-top: 2rem;
+}
+
+.card {
+  background: #111;
+  border: 1px solid #222;
+  border-radius: 12px;
+  padding: 1.5rem;
+  transition: border-color 0.2s, transform 0.2s;
+}
+
+.card:hover {
+  border-color: #333;
+  transform: translateY(-2px);
+}
+
+.card h2 {
+  font-size: 1.1rem;
+  color: #fff;
+  margin-bottom: 1rem;
+}
+
+.card p {
+  color: #888;
+  font-size: 0.95rem;
+  margin-bottom: 0.5rem;
+}
+
+.card a {
+  display: inline-block;
+  margin-top: 0.25rem;
+}
+
+/* Status Indicators */
+.loading {
+  color: #888;
+}
+
+.success {
+  color: #00d9ff;
+  font-weight: 600;
+}
+
+.error {
+  color: #ff4444;
+  font-weight: 600;
+}
+
+.meta {
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: 0.5rem;
+}
+
+/* Auth Card */
+.authCard {
+  background: #111;
+  border: 1px solid #222;
+  border-radius: 12px;
+  padding: 2rem;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.authTabs {
+  display: flex;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid #222;
+}
+
+.authTab {
+  flex: 1;
+  padding: 0.75rem;
+  background: transparent;
+  border: none;
+  color: #666;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.authTab:hover {
+  color: #888;
+}
+
+.authTabActive {
+  color: #fff;
+  border-bottom: 2px solid #00d9ff;
+  margin-bottom: -1px;
+}
+
+/* Forms */
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.input {
+  padding: 0.875rem 1rem;
+  background: #0a0a0a;
+  border: 1px solid #333;
+  border-radius: 8px;
+  color: #fff;
+  font-size: 1rem;
+  transition: border-color 0.2s;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #00d9ff;
+}
+
+.input::placeholder {
+  color: #555;
+}
+
+.button {
+  padding: 0.875rem 1.5rem;
+  background: #00d9ff;
+  color: #000;
+  border: none;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s, transform 0.1s;
+}
+
+.button:hover {
+  opacity: 0.9;
+}
+
+.button:active {
+  transform: scale(0.98);
+}
+
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.formError {
+  color: #ff4444;
+  font-size: 0.9rem;
+  text-align: center;
+}
+
+.formHint {
+  color: #666;
+  font-size: 0.85rem;
+  text-align: center;
+  margin-top: 0.5rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .nav {
+    padding: 1rem;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .navLinks {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .main {
+    padding: 1rem;
+  }
+
+  .title {
+    font-size: 2rem;
+  }
+
+  .subtitle {
+    font-size: 1rem;
+  }
+
+  .cards {
+    grid-template-columns: 1fr;
+  }
+
+  .authCard {
+    padding: 1.5rem;
+  }
+}

package/src/templates/source/web/favicon.svg

@@ -0,0 +1,12 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="128" height="128" rx="20" fill="url(#paint0_linear_8_2)"/>
+    <path d="M29 62L64 113L99 62" stroke="white" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M38 39L64 77L90 39" stroke="white" stroke-opacity="0.5" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M45 13L64 41L83 13" stroke="white" stroke-opacity="0.2" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>
+    <defs>
+        <linearGradient id="paint0_linear_8_2" x1="0" y1="0" x2="128" y2="128" gradientUnits="userSpaceOnUse">
+            <stop offset="0.336538" stop-color="#3178C6"/>
+            <stop offset="1" stop-color="#3297B1"/>
+        </linearGradient>
+    </defs>
+</svg>