dynamic

| Action | Description | Example |

|--------|-------------|---------|

| init | Project initialization (/init-dynamic feature) | /dynamic init my-saas |

| guide | Display development guide | /dynamic guide |

| help | BaaS integration help | /dynamic help |

init (Project Initialization)

1. Create Next.js + Tailwind project structure
2. Configure bkend.ai MCP (.mcp.json)
3. Create CLAUDE.md (Level: Dynamic specified)
4. Create docs/ folder structure
5. src/lib/bkend.ts client template
6. Initialize .bkit-memory.json

guide (Development Guide)

• bkend.ai auth/data configuration guide
• Phase 1-9 full Pipeline guide
• API integration patterns

help (BaaS Help)

• Explain bkend.ai basic concepts
• Auth, database, file storage usage
• MCP integration methods

• Frontend developers
• Solo entrepreneurs
• Those who want to build fullstack services quickly

```

Frontend:

• React / Next.js 14+
• TypeScript
• Tailwind CSS
• TanStack Query (data fetching)
• Zustand (state management)

Backend (BaaS):

• bkend.ai

- Auto REST API

- MongoDB database

- Built-in authentication (JWT)

- Real-time features (WebSocket)

Deployment:

• Vercel (frontend)
• bkend.ai (backend)

```

Language Tier Guidance (v1.3.0)

> Recommended: Tier 1-2 languages

>

> Dynamic level supports full-stack development with strong AI compatibility.

| Tier | Allowed | Reason |

|------|---------|--------|

| Tier 1 | ✅ Primary | Full AI support |

| Tier 2 | ✅ Yes | Mobile (Flutter/RN), Modern web (Vue, Astro) |

| Tier 3 | ⚠️ Limited | Platform-specific needs only |

| Tier 4 | ❌ No | Migration recommended |

Mobile Development:

• React Native (Tier 1 via TypeScript) - Recommended
• Flutter (Tier 2 via Dart) - Supported

```

project/

├── src/

│ ├── app/ # Next.js App Router

│ │ ├── (auth)/ # Auth-related routes

│ │ │ ├── login/

│ │ │ └── register/

│ │ ├── (main)/ # Main routes

│ │ │ ├── dashboard/

│ │ │ └── settings/

│ │ ├── layout.tsx

│ │ └── page.tsx

│ │

│ ├── components/ # UI components

│ │ ├── ui/ # Basic UI (Button, Input...)

│ │ └── features/ # Feature-specific components

│ │

│ ├── hooks/ # Custom hooks

│ │ ├── useAuth.ts

│ │ └── useQuery.ts

│ │

│ ├── lib/ # Utilities

│ │ ├── bkend.ts # bkend.ai client

│ │ └── utils.ts

│ │

│ ├── stores/ # State management (Zustand)

│ │ └── auth-store.ts

│ │

│ └── types/ # TypeScript types

│ └── index.ts

│

├── docs/ # PDCA documents

│ ├── 01-plan/

│ ├── 02-design/

│ │ ├── data-model.md # Data model

│ │ └── api-spec.md # API specification

│ ├── 03-analysis/

│ └── 04-report/

│

├── .mcp.json # bkend.ai MCP config

├── .env.local # Environment variables

├── package.json

└── README.md

```

bkend.ai Client Setup

```typescript

// lib/bkend.ts

import { createClient } from '@bkend/client';

export const bkend = createClient({

apiKey: process.env.NEXT_PUBLIC_BKEND_API_KEY!,

projectId: process.env.NEXT_PUBLIC_BKEND_PROJECT_ID!,

});

```

Authentication Hook

```typescript

// hooks/useAuth.ts

import { create } from 'zustand';

import { persist } from 'zustand/middleware';

import { bkend } from '@/lib/bkend';

interface AuthState {

user: User | null;

isLoading: boolean;

login: (email: string, password: string) => Promise;

logout: () => void;

}

export const useAuth = create()(

persist(

(set) => ({

user: null,

isLoading: false,

login: async (email, password) => {

set({ isLoading: true });

const { user, token } = await bkend.auth.login({ email, password });

set({ user, isLoading: false });

},

logout: () => {

bkend.auth.logout();

set({ user: null });

},

}),

{ name: 'auth-storage' }

)

);

```

Data Fetching (TanStack Query)

```typescript

// List query

const { data, isLoading, error } = useQuery({

queryKey: ['items', filters],

queryFn: () => bkend.collection('items').find(filters),

});

// Single item query

const { data: item } = useQuery({

queryKey: ['items', id],

queryFn: () => bkend.collection('items').findById(id),

enabled: !!id,

});

// Create/Update (Mutation)

const mutation = useMutation({

mutationFn: (newItem) => bkend.collection('items').create(newItem),

onSuccess: () => {

queryClient.invalidateQueries(['items']);

},

});

```

Protected Route

```typescript

// components/ProtectedRoute.tsx

'use client';

import { useAuth } from '@/hooks/useAuth';

import { redirect } from 'next/navigation';

export function ProtectedRoute({ children }: { children: React.ReactNode }) {

const { user, isLoading } = useAuth();

if (isLoading) return ;

if (!user) redirect('/login');

return <>{children};

}

```

```typescript

// Base fields (auto-generated)

interface BaseDocument {

_id: string;

createdAt: Date;

updatedAt: Date;

}

// User reference

interface Post extends BaseDocument {

userId: string; // Author ID (reference)

title: string;

content: string;

tags: string[]; // Array field

metadata: { // Embedded object

viewCount: number;

likeCount: number;

};

}

```

```json

{

"mcpServers": {

"bkend": {

"command": "npx",

"args": ["@bkend/mcp-server"],

"env": {

"BKEND_API_KEY": "${BKEND_API_KEY}",

"BKEND_PROJECT_ID": "${BKEND_PROJECT_ID}"

}

}

}

}

```

```

❌ Complex backend logic (serverless function limits)

❌ Large-scale traffic (within BaaS limits)

❌ Custom infrastructure control

❌ Microservices architecture

```

Move to Enterprise Level if you need:

```

→ "Traffic will increase significantly"

→ "I want to split into microservices"

→ "I need my own server/infrastructure"

→ "I need complex backend logic"

```

| Mistake | Solution |

|---------|----------|

| CORS error | Register domain in bkend.ai console |

| 401 Unauthorized | Token expired, re-login or refresh token |

| Data not showing | Check collection name, query conditions |

| Type error | Sync TypeScript type definitions with schema |