parqet.beer Svelte Themes

Parqet.beer

Convert your Parqet portfolio value into beers, coffees, or smoothies.

parqet.beer

A humorous web app that converts a Parqet user's portfolio value into beers, coffees, or smoothies. Community fun project — not an official Parqet product.

"Finally a meaningful metric."

Features

  • šŸŗ Portfolio value converted live into beer / coffee / smoothie
  • šŸ” Parqet Connect OAuth 2.0 (PKCE, read-only)
  • šŸ’° EUR / CHF toggle
  • šŸŒ™ Dark mode
  • šŸ‡©šŸ‡Ŗ šŸ‡¬šŸ‡§ German / English
  • šŸ“Š Fun stats, beverage of the day, milestone badges, dividends in beer
  • šŸ“ø Shareable image export

Tech Stack

  • Framework: SvelteKit (Svelte 5, SSR on Cloudflare Pages)
  • Adapter: @sveltejs/adapter-cloudflare
  • Styling: Tailwind CSS v4
  • Auth: Parqet Connect OAuth 2.0 + PKCE, sessions via jose JWE (httpOnly cookie)
  • Storage: Cloudflare KV (PARQET_KV)
  • Validation: Zod
  • Testing: Vitest, Playwright (E2E)

Setup

Prerequisites: DDE.

# 1. Clone the repository
git clone https://github.com/sbaerlocher/parqet.beer.git
cd parqet.beer

# 2. Copy and fill in environment variables
cp .dev.vars.example .dev.vars
# Set PARQET_CLIENT_ID and SESSION_SECRET

# 3. Start the project (installs dependencies automatically)
dde project:up

Then open https://parqet-beer.test in your browser.

Without DDE

Prerequisites: Node.js (see .nvmrc), pnpm.

# 1. Clone the repository
git clone https://github.com/sbaerlocher/parqet.beer.git
cd parqet.beer

# 2. Install dependencies
pnpm install

# 3. Copy and fill in environment variables
cp .dev.vars.example .dev.vars
# Set PARQET_CLIENT_ID and SESSION_SECRET

# 4. Start the dev server
pnpm dev

Then open http://localhost:5173 in your browser.

Environment Variables

Variable Description
PARQET_CLIENT_ID OAuth App Client ID from the Parqet Developer Portal
SESSION_SECRET 32+ byte random secret for JWE session cookies

Parqet Connect runs as a public client with PKCE — no client secret required.

In production, secrets are set via the Cloudflare dashboard, not through wrangler.jsonc.

Scripts

With DDE, prefix commands with dde exec:

dde exec pnpm build            # Build for Cloudflare Pages
dde exec pnpm check            # TypeScript + Svelte check
dde exec pnpm test             # Vitest (unit tests)
dde exec pnpm lint             # Prettier check
dde exec pnpm format           # Prettier write

Without DDE:

pnpm dev              # Vite dev server (localhost:5173)
pnpm build            # Build for Cloudflare Pages
pnpm preview          # Local Cloudflare Pages preview via wrangler
pnpm check            # TypeScript + Svelte check
pnpm test             # Vitest (unit tests)
pnpm lint             # Prettier check
pnpm format           # Prettier write
pnpm generate:assets  # SVG → PNG (favicon, OG image) re-render

Deployment (Cloudflare Pages)

Fork note: wrangler.jsonc contains only placeholder IDs. Before you can deploy, you need to create your own Cloudflare resources (KV namespace, Secrets Store) and fill in the IDs. The setup script automates this flow.

./scripts/setup-fork.sh

The script creates KV namespaces (preview + production), a Secrets Store, and a session secret, then patches wrangler.jsonc with the generated IDs.

Manual flow

For a step-by-step approach, see the individual commands in scripts/setup-fork.sh or scripts/README.md.

Then replace the Parqet Client ID in wrangler.jsonc under vars.PARQET_CLIENT_ID with your own OAuth app ID from the Parqet Developer Portal. The redirect URI configured in your Parqet app must match your deploy domain.

Deploy via Git integration (push to main) or manually:

pnpm build
pnpm exec wrangler pages deploy .svelte-kit/cloudflare

Project Structure

src/
ā”œā”€ā”€ app.html                  # Root HTML with meta tags
ā”œā”€ā”€ app.css                   # Tailwind + colour scheme
ā”œā”€ā”€ hooks.server.ts           # Session check, rate limiting
ā”œā”€ā”€ lib/
│   ā”œā”€ā”€ calculator.ts         # Portfolio → beverage logic
│   ā”œā”€ā”€ components/           # Svelte components
│   ā”œā”€ā”€ data/                 # Beverages & badges (JSON)
│   ā”œā”€ā”€ fun.ts                # Fun stats, beverage of the day
│   ā”œā”€ā”€ i18n.ts               # DE/EN translations
│   ā”œā”€ā”€ server/               # Server-only: auth, parqet-client, kv-cache
│   └── stores/               # Svelte stores (locale, theme)
└── routes/
    ā”œā”€ā”€ +layout.svelte
    ā”œā”€ā”€ +page.svelte          # Landing
    ā”œā”€ā”€ +error.svelte         # 404/500
    ā”œā”€ā”€ api/                  # OAuth, portfolios, performance, preferences
    ā”œā”€ā”€ dashboard/            # Auth-protected
    └── privacy/
tests/                        # Vitest unit & integration tests
static/                       # Favicon, OG image, etc.

Data Sources

  • Beer prices: Coop.ch, Rewe, Edeka, supermarktcheck.de — maintained in src/lib/data/beer.json
  • Coffee & smoothies: cafe / shop prices, manually curated
  • All prices are community-curated. Pull requests welcome!

Further Documentation

Community

This project is an independent, community-driven tool and is not affiliated with, endorsed by, or in any way officially connected to:

  • Parqet Fintech GmbH or its subsidiaries
  • any of the breweries, cafes, or beverage brands mentioned

All trademarks and product names are the property of their respective owners and are used here for illustrative purposes only.

Not financial advice. No warranty.

License

MIT — see LICENSE.

Top categories

Loading Svelte Themes