Folder Structure

sample-app/
├── app/
│   ├── _layout.tsx              # Root layout (AppProvider + Stack)
│   ├── index.tsx                # Entry redirect (auth check)
│   ├── auth/
│   │   ├── login.tsx            # Sign in screen
│   │   ├── signup.tsx           # Sign up screen
│   │   └── adapter.tsx          # Adapter picker screen
│   ├── (tabs)/
│   │   ├── _layout.tsx          # Tab navigator (Blog + Profile)
│   │   ├── index.tsx            # Blog list with FAB
│   │   └── profile.tsx          # Profile editor + avatar upload
│   └── blog/
│       ├── create.tsx           # Create new post
│       └── [id].tsx             # View / edit / delete post
├── components/
│   └── BlogCard.tsx             # Reusable blog post card
├── lib/
│   ├── client.ts                # SDK client factory + mock seeding
│   └── context.tsx              # React context (client, auth, adapter)
├── global.css                   # Tailwind directives
├── tailwind.config.js           # NativeWind preset + content paths
├── babel.config.js              # jsxImportSource: "nativewind"
├── metro.config.js              # withNativeWind + SDK symlink config
├── nativewind-env.d.ts          # TypeScript className types
├── app.json                     # Expo config
├── tsconfig.json
└── package.json

Key Files

lib/client.ts - Client Factory

Creates the SDK client for the selected adapter. For Mock, it seeds sample data:

import { createClient } from '@vibecode-db/client';
import { MockAdapter } from '@vibecode-db/client/adapters/mock';

function createSeededMockClient() {
  const adapter = new MockAdapter();

  adapter.seed('profiles', [
    { id: 'user-1', name: 'Alice Johnson', ... },
  ]);

  adapter.seed('posts', [
    { id: 1, title: 'Getting Started with vibecode-db', ... },
    { id: 2, title: 'Building Mobile Apps with Expo', ... },
    { id: 3, title: 'Why Adapter Patterns Matter', ... },
  ]);

  return createClient('', '', { adapter });
}

lib/context.tsx - App Context

Provides the SDK client, auth state, and adapter switching to the entire app via React context:

const { client, auth, adapterType, switchAdapter, signIn, signUp, signOut } = useApp();

metro.config.js - Metro Configuration

Configures Metro to resolve the linked SDK package and its subpath exports:

config.watchFolders = [sdkRoot];
config.resolver.unstable_enablePackageExports = true;