DevDex

The OAuth token is exchanged server-side (the client secret never leaves the Worker), then handed to the browser through the URL hash — which browsers never send to a server. From that moment on, the token lives only in localStorage and talks directly to api.github.com from the client.

That means:

• ✅ We never store, log, or even receive your access token after the redirect.
• ✅ Every write is your browser → GitHub. There's no middleman to compromise.
• ✅ There are no sessions to expire, no session store to run.
• ✅ You are "the owner" of a page purely because your token's login matches the username in the URL.

The trade-off is honest: a localStorage token is readable by any XSS on the origin, which is why the app ships no third-party scripts.

One file. .devstore.json, in the repo <your-username>/devstore, created on your first save.

{
  "theme": "terminal",
  "featured": ["proj-X", "arcade"],        // pinned to the top, animated border
  "hidden":   ["dotfiles", "test-repo"],   // never rendered
  "folders": {
    "Web apps": ["proj-X", "og-vercel"],   // tabs on the /repos page
    "Experiments": ["arcade"]
  },
  "overrides": {
    "proj-X": {
      "title": "DevDex",                                   // display name
      "description": "Game-style GitHub portfolios.",      // replaces repo description
      "demo": "https://devdex.tech",                       // replaces homepage
      "image": "https://i.imgur.com/cover.png"             // card cover art
    }
  }
}

mergeConfigWithRepos() in src/lib/github.js folds this over the live repo list and sorts featured first, then by stars. Anything not mentioned in the file just falls through to GitHub's own values — so the file stays tiny, and deleting it resets you to a clean default rather than an empty page.

{
  "key": "terminal",
  "name": "Terminal",
  "tagline": "Green-phosphor CRT — ...",
  "fonts":  { "url": "https://fonts.googleapis.com/...", "primary": "'DM Mono', monospace" },
  "colors": { "bgBase": "#050705", "accentPrimary": "#3dff7a", /* ...24 tokens */ },
  "featuredBorder": { "type": "conic-rotate", "duration": "3s", "stops": [ /* ... */ ] },
  "character": { "frameSize": 16, "frameCount": 7,
                 "rows": ["idle", "hover", "sleep", "jump", "crown", "spin"] },
  "frame":  { "size": 112, "frameCount": 10 },
  "banner": { "frameWidth": 340, "frameHeight": 120, "frameCount": 8 }
}

theme.js writes every colour token onto document.documentElement as a CSS custom property. Components never receive theme props — they just consume var(--accent-primary) and friends, which is why switching a theme repaints the entire app instantly with zero re-renders.

The character / frame / banner blocks tell the sprite components how to step through their sheets, so a new theme can ship a totally different animation without touching a line of Svelte.

[!CAUTION]
Never name your PAT VITE_GITHUB_TOKEN. Vite inlines every VITE_-prefixed variable as a string literal into the browser bundle — that would ship your token to every visitor on the internet. The VITE_ prefix is a publication decision, not a naming convention.

To create the OAuth app: GitHub → Settings → Developer settings → OAuth Apps → New, with the callback URL set to http://localhost:5173/api/oauth/callback for local dev.

Browsing works fully without any OAuth setup — you just can't sign in and edit.

There is intentionally no test suite, linter, or type-checker configured in this project.

devstore/
├── src/
│   ├── lib/
│   │   ├── github.js        ← 🔑 the ONLY file that talks to the GitHub API
│   │   ├── xp.js            ← XP / level / tier / streak math
│   │   ├── radar.js         ← radar chart geometry + language colours
│   │   ├── theme.js         ← theme registry, loader, CSS-var applier
│   │   ├── theme-store.js   ← Svelte stores wrapping the above
│   │   ├── store.js         ← auth token + authUser stores
│   │   ├── backgrounds.js   ← per-theme animated canvas backgrounds
│   │   ├── config-cache.js  ← optimistic local config so saves feel instant
│   │   ├── img.js           ← image URL normalising / proxying
│   │   └── youtube.js       ← demo-link YouTube embed parsing
│   ├── components/
│   │   ├── CharacterSprite.svelte   ← the animated pixel character
│   │   ├── Background.svelte        ← themed canvas backdrop
│   │   ├── QROverlay.svelte         ← shareable QR poster
│   │   ├── ThemeSwitcher.svelte     ├── TopBar.svelte
│   │   ├── FollowListOverlay.svelte ├── SignInDialog.svelte
│   │   ├── PixelLogo.svelte         └── Seo.svelte
│   ├── routes/              ← see the route map above
│   └── service-worker.js
├── static/themes/<key>/     ← theme.json + character.png + frame.png + banner.png
├── devstore-colors.md       ← canonical palette reference
└── wrangler.jsonc           ← local KV emulation for the explore index

Rendering a PNG with satori + resvg costs far more than the 10 ms CPU per request allowed on the Cloudflare free plan. So image generation lives in the companion og-vercel/ project, and the Cloudflare route proxies it — deliberately proxies rather than redirects, because WhatsApp's link-preview crawler won't reliably follow a redirect for og:image.

Proxying is pure I/O, so it fits the CPU budget comfortably. The finished image is then stored in the edge cache keyed by the upstream URL (which includes the theme), so a theme change mints a new URL and busts every scraper's preview cache for free.