page Tutorial {
  seo {
    title = "Tutorial"
    description = "Build a secure task application with WRNexusJS preview APIs."
    canonical = "https://wrnexusjs.dev/tutorial"
  }
  view {
    <SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
    <div class="docs-shell">
      <header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="https://component.wrnexusjs.dev/">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.5.1</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
      <div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="https://component.wrnexusjs.dev/">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
      <main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Documentation</span><span aria-hidden="true">/</span><span aria-current="page">Tutorial</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview · runnable-project extraction pending</span><h1>Secure task board</h1><p>This tutorial connects the installed 0.5.1 APIs into one design. Snippets are limited to declarations and README patterns verified in the installed packages; a CI-compiled standalone fixture remains on the roadmap.</p><h2>Application shape</h2><p>A <code>.wrn</code> page renders tasks from an SSR API binding. A shared validation schema protects mutations. Session middleware identifies users, authorization policies gate updates, and a realtime room broadcasts changes.</p><h2>Schema and create route</h2><pre><code>import &#123; v, parseBody &#125; from "@wrnexus/validation";
const task = v.object(&#123; title: v.string().trim().min(3).max(120) &#125;);
export const POST = async (ctx) =&gt; &#123;
  const parsed = await parseBody(task, ctx.req);
  if (!parsed.ok) return parsed.response;
  return Response.json(&#123; ok: true, task: parsed.value &#125;, &#123; status: 201 &#125;);
&#125;;</code></pre><h2>Server-rendered list</h2><pre><code>page Tasks &#123;
  ssr &#123; api tasks GET /api/tasks &#123; return tasks &#125; &#125;
  view &#123;
    &lt;main&gt;&lt;h1&gt;Tasks&lt;/h1&gt;&lt;ul&gt;
      &#123;#each tasks as task&#125;&lt;li&gt;&#123;task.title&#125;&lt;/li&gt;&#123;:empty&#125;&lt;li&gt;No tasks yet.&lt;/li&gt;&#123;/each&#125;
    &lt;/ul&gt;&lt;/main&gt;
  &#125;
&#125;</code></pre><h2>Production checklist</h2><ul><li>Choose SQLite for local development or configure the supported PostgreSQL driver.</li><li>Run migrations before accepting traffic.</li><li>Enable session authentication and enforce authorization on every mutation.</li><li>Validate upload types and sizes; keep private objects behind authenticated routes.</li><li>Use Redis pub/sub when realtime rooms span processes.</li><li>Treat the default queue as non-durable until a production driver is selected.</li></ul><p>Follow the focused <a href="/guides/database">database</a>, <a href="/guides/authentication">authentication</a>, <a href="/guides/authorization">authorization</a>, <a href="/guides/realtime">realtime</a>, and <a href="/guides/uploads">upload</a> guides.</p></article></main>
      <footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.1</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
      <BackToTop />
    </div>
  }
}