my-app/
├── app/                        ← All routes and logic live here
│   ├── models/                 ← RebaseDB local data schemas
│   │   ├── index.ts
│   │   └── user.model.ts
│   ├── sync/                   ← Webhook sync rules and adapters
│   │   ├── index.ts
│   │   └── user.sync.ts
│   ├── globals.css             ← Global styles (Tailwind @import)
│   ├── page.tsx                ← Root route (/)
│   ├── about/
│   │   └── page.tsx            ← /about
│   └── posts/
│       └── [slug]/
│           ├── page.tsx        ← /posts/:slug (client component)
│           └── page.server.ts  ← Server functions for this route
├── public/                     ← Static assets (images, fonts, etc.)
├── package.json
└── tsconfig.json

Flexibility Note: RebaseJS encourages the app/models/ and app/sync/ directory pattern for scalability. However, this is just a convention. You are free to organize your non-route files however you see fit!

Key conventions

• models/*.model.ts — Individual schemas for your local-first database
• sync/*.sync.ts — Webhook sync authorization and routing rules
• page.tsx — React page component
• page.server.ts — Server functions (defineServerFn) for the route
• [param] folders — Dynamic route segments
• globals.css — Imported on every page via the virtual /@rebasejs/client module

Build output

.rebasejs/
├── dist/
│   ├── client/     ← Vite-bundled client assets
│   └── server/     ← Compiled server code