# Popup Studio AI Bkit Codex Bkend Cookbook

> bkend.ai Cookbook

- Skill: `tomevault-io/popup-studio-ai-bkit-codex-bkend-cookbook` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/popup-studio-ai-bkit-codex-bkend-cookbook`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/popup-studio-ai-bkit-codex-bkend-cookbook/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/popup-studio-ai-bkit-codex-bkend-cookbook

---


# bkend.ai Cookbook

> Step-by-step tutorials and ready-to-use project templates.

## Actions

| Action | Description | Example |
|--------|-------------|---------|
| `list` | List all recipes | `$bkend-cookbook list` |
| `todo` | Build a todo app | `$bkend-cookbook todo` |
| `blog` | Build a blog | `$bkend-cookbook blog` |

## Available Recipes

| Recipe | Difficulty | Features Used |
|--------|-----------|---------------|
| Todo App | Beginner | Data CRUD |
| Blog | Beginner | Data + Auth |
| User Dashboard | Intermediate | Auth + Data + Storage |
| E-commerce | Intermediate | All features |
| SaaS MVP | Advanced | All + RBAC |

## Recipe 1: Todo App (15 minutes)

### Schema
```
Table: todos
- title (string, required)
- completed (boolean, default: false)
- user_id (reference to users)
- created_at (datetime, auto)
```

### Frontend

```typescript
// hooks/useTodos.ts
export function useTodos() {
  return useQuery({
    queryKey: ['todos'],
    queryFn: () => bkend.data.list('todos', { sort: '-created_at' }),
  });
}

export function useCreateTodo() {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: (title: string) => bkend.data.create('todos', { title, completed: false }),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['todos'] }),
  });
}

export function useToggleTodo() {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: ({ id, completed }: { id: string; completed: boolean }) =>
      bkend.data.update('todos', id, { completed: !completed }),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['todos'] }),
  });
}

export function useDeleteTodo() {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: (id: string) => bkend.data.delete('todos', id),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['todos'] }),
  });
}
```

```typescript
// components/TodoList.tsx
'use client';
import { useTodos, useCreateTodo, useToggleTodo, useDeleteTodo } from '@/hooks/useTodos';
import { useState } from 'react';

export function TodoList() {
  const [newTitle, setNewTitle] = useState('');
  const { data: todos, isLoading } = useTodos();
  const createTodo = useCreateTodo();
  const toggleTodo = useToggleTodo();
  const deleteTodo = useDeleteTodo();

  const handleAdd = (e: React.FormEvent) => {
    e.preventDefault();
    if (!newTitle.trim()) return;
    createTodo.mutate(newTitle);
    setNewTitle('');
  };

  if (isLoading) return <p>Loading...</p>;

  return (
    <div className="max-w-md mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Todo App</h1>
      <form onSubmit={handleAdd} className="flex gap-2 mb-4">
        <input value={newTitle} onChange={(e) => setNewTitle(e.target.value)}
          placeholder="Add a todo..." className="flex-1 border rounded px-3 py-2" />
        <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded">Add</button>
      </form>
      <ul className="space-y-2">
        {todos?.map((todo: any) => (
          <li key={todo.id} className="flex items-center gap-2 p-2 border rounded">
            <input type="checkbox" checked={todo.completed}
              onChange={() => toggleTodo.mutate({ id: todo.id, completed: todo.completed })} />
            <span className={todo.completed ? 'line-through text-gray-400 flex-1' : 'flex-1'}>
              {todo.title}
            </span>
            <button onClick={() => deleteTodo.mutate(todo.id)}
              className="text-red-500 text-sm">Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}
```

## Recipe 2: Blog with Authentication

### Schema
```
Table: users (built-in via bkend auth)

Table: posts
- title (string, required)
- slug (string, unique)
- body (text, required)
- status (enum: draft/published, default: draft)
- author_id (reference to users)
- created_at (datetime, auto)
- updated_at (datetime, auto)

Table: comments
- body (text, required)
- post_id (reference to posts)
- author_id (reference to users)
- created_at (datetime, auto)
```

### Key Patterns
```typescript
// Create post with auth
const { user } = useAuth();
await bkend.data.create('posts', {
  title, slug: title.toLowerCase().replace(/\s+/g, '-'),
  body, status: 'draft', author_id: user.id,
});

// List published posts (public)
const posts = await bkend.data.list('posts', { status: 'published', sort: '-created_at' });

// Get post with comments
const post = await bkend.data.get('posts', postId);
const comments = await bkend.data.list('comments', { post_id: postId, sort: 'created_at' });
```

## Recipe 3: User Dashboard with File Upload

### Key Patterns
```typescript
// Profile with avatar upload
async function updateAvatar(file: File) {
  const { url } = await bkend.storage.upload(file, 'avatars');
  await bkend.data.update('users', user.id, { avatar_url: url });
}

// Dashboard stats
async function getDashboardStats(userId: string) {
  const [posts, comments] = await Promise.all([
    bkend.data.list('posts', { author_id: userId }),
    bkend.data.list('comments', { author_id: userId }),
  ]);
  return { postCount: posts.length, commentCount: comments.length };
}
```

## Project Template

For any recipe, start with:

```bash
npx create-next-app@latest my-app --typescript --tailwind --app
cd my-app
npm install @tanstack/react-query zustand
```

Then:
1. Set up bkend client (`lib/bkend.ts`)
2. Create auth store (`stores/auth-store.ts`)
3. Add QueryClientProvider
4. Build features following recipe patterns

## Reference

See `references/bkend-patterns.md` for complete API client and pattern reference.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/popup-studio-ai) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->