d9k/citations-supabase-demo

citations-supabase-demo

Demo

Techologies used

• React, React query
• Deno instead of Node.js
• Ultra as web framework
• Supabase (PostgreSQL) + custom claims, RLS, triggers
• FELA for CSS-in-JS
• Mantine for UI components and hooks
• FSD as architecture methodology
• Storybook
• VS Code (see IDE configuration section below)

Warnings

• Because of simple SSR renderer demo conflicts with Chrome extensions which injects anything to the DOM tree (for example, Stylus) Please disable these extensions for demo web domain name.

Run

deno task dev

Check

deno task check

Requirements

Deno

deno 1.37+ required

• Install Deno
• Upgrade deno: deno upgrade

Development notes

• fela css-in-js sticked to version 11.4.0 because there are no styles on the saved pages on newer versions.

Storybook

Storybook isn't compatible wuth Deno yet so Node + pnpm are requirements for it:

pnpm install
pnpm run serve

VSCode configuration

• 🧩 Extensions

  • VSCode Deno plugin
    • Hightlight & autocompletion for Deno TypeScript
  • Run on Save
    • Run deno fmt on file save
    • settings: .vscode/settings.json: "emeraldwalk.runonsave"
    • extension logs: cmd-shift-p -> Search Developer: Show Logs -> Extension Host, then select Run on Save in drop-down list on upper-right ↗️ corner

• deno task config is required to run when you add new Storybook story because Storybook runs in different env and need to be excluded from VSCode Deno plugin.

Database

See README-supabase