docs(examples): add expense splitter README, demo, and docs (#827)

## Summary

- Add a full-featured expense splitter example (React + Vite + Tailwind)
demonstrating `allocate()`, balance tracking, and optimal debt
settlement
- Add README and docs entry for the example
- Deploy the example on Vercel at
`v2.dinerojs.com/examples/expense-splitter/`
- Rename "Sandboxes" to "Demos" across the docs site

## Test plan

- [ ] Run `npm run build -w @dinero.js/example-expense-splitter` and
verify it builds
- [ ] Run `npm run dev -w @dinero.js/example-expense-splitter` and
verify the app works locally
- [ ] Verify the base path (`/examples/expense-splitter/`) is reflected
in the built assets
- [ ] Verify the docs site builds with `npm run docs:build`
- [ ] Verify `/sandboxes` redirects to `/demos`

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: sarahdayan

docs/.vitepress/config.ts

@@ -268,7 +268,7 @@ export default defineConfig({
           text: 'Resources',
           items: [
             { text: 'About', link: '/about' },
-            { text: 'Sandboxes', link: '/sandboxes' },
+            { text: 'Demos', link: '/demos' },
           ],
         },
       ],

docs/demos.md

@@ -0,0 +1,46 @@
+---
+title: Demos
+description: Check out Dinero.js in action in working demos.
+---
+
+# Demos
+
+If you learn better by seeing code in action, or want to start from an existing project, check out the Dinero.js demos.
+
+## Shopping cart with React
+
+This demo showcases Dinero.js in action in a [React](https://reactjs.org/)-powered shopping cart.
+
+[![Shopping cart with React](/images/examples/cart-react.png)](https://codesandbox.io/s/github/dinerojs/dinero.js/tree/main/examples/cart-react)
+
+[View demo](https://codesandbox.io/s/github/dinerojs/dinero.js/tree/main/examples/cart-react)
+
+## Shopping cart with Vue.js
+
+This demo showcases Dinero.js in action in a [Vue.js](https://vuejs.org/)-powered shopping cart.
+
+[![Shopping cart with Vue.js](/images/examples/cart-vue.png)](https://codesandbox.io/s/github/dinerojs/dinero.js/tree/main/examples/cart-vue)
+
+[View demo](https://codesandbox.io/s/github/dinerojs/dinero.js/tree/main/examples/cart-vue)
+
+## Pricing page with React
+
+This demo showcases Dinero.js in action in a [React](https://reactjs.org/)-powered pricing page.
+
+[![Pricing page with React](/images/examples/pricing-react.png)](https://codesandbox.io/s/github/dinerojs/dinero.js/tree/main/examples/pricing-react)
+
+[View demo](https://codesandbox.io/s/github/dinerojs/dinero.js/tree/main/examples/pricing-react)
+
+## Expense splitter
+
+This demo showcases Dinero.js in action in a [React](https://reactjs.org/)-powered expense splitter. It demonstrates fair bill splitting with `allocate()`, balance tracking, and optimal debt settlement.
+
+[View demo](https://v2.dinerojs.com/examples/expense-splitter/)
+
+## Starter playground
+
+This demo lets you try Dinero.js in a minimal environment. It's ideal to reproduce issues.
+
+[![Starter playground](/images/examples/starter.png)](https://codesandbox.io/s/github/dinerojs/dinero.js/tree/main/examples/starter)
+
+[View demo](https://codesandbox.io/s/github/dinerojs/dinero.js/tree/main/examples/starter)

docs/sandboxes.md

@@ -1,6 +1,6 @@
 {
   "$schema": "https://openapi.vercel.sh/vercel.json",
-  "buildCommand": "npx vitepress build",
+  "buildCommand": "npx vitepress build && cd ../examples/expense-splitter && npm install && npm run build && mkdir -p ../../docs/.vitepress/dist/examples/expense-splitter && cp -r dist/* ../../docs/.vitepress/dist/examples/expense-splitter",
   "outputDirectory": ".vitepress/dist",
   "redirects": [
     {
@@ -37,6 +37,11 @@
       "source": "/docs/:path*",
       "destination": "/:path*",
       "statusCode": 308
+    },
+    {
+      "source": "/sandboxes",
+      "destination": "/demos",
+      "statusCode": 308
     }
   ]
 }

docs/vercel.json

@@ -0,0 +1,2 @@
+node_modules
+dist

examples/expense-splitter/.gitignore

@@ -0,0 +1,37 @@
+# Expense Splitter
+
+A React app that splits expenses between friends and calculates optimal settlements, powered by [Dinero.js](https://v2.dinerojs.com).
+
+## What you'll learn
+
+This example demonstrates how to use Dinero.js to solve real-world money problems:
+
+- **Splitting bills fairly** with `allocate()`, handling remainders so no cent is lost
+- **Tracking balances** with `add()` and `subtract()` to know who owes whom
+- **Simplifying debts** with `compare()`, `greaterThan()`, and `isZero()` to minimize the number of payments
+- **Formatting currency** with `toDecimal()` and `Intl.NumberFormat`
+- **Persisting money objects** with `toSnapshot()` and `dinero()` for LocalStorage serialization
+
+## Getting started
+
+1. Install dependencies from the **repository root**:
+
+   ```sh
+   npm install
+   ```
+
+2. Navigate to the example:
+
+   ```sh
+   cd examples/expense-splitter
+   ```
+
+3. Start the dev server:
+
+   ```sh
+   npm run dev
+   ```
+
+## Learn more
+
+Check out the [Dinero.js documentation](https://v2.dinerojs.com) to explore the full API.

examples/expense-splitter/README.md

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dinero.js &amp; React | Expense Splitter</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/expense-splitter/index.html

@@ -0,0 +1,27 @@
+{
+  "name": "@dinero.js/example-expense-splitter",
+  "version": "2.0.0-alpha.15",
+  "type": "module",
+  "scripts": {
+    "build:clean": "rimraf ./dist",
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "dinero.js": "2.0.0-alpha.16",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}

examples/expense-splitter/package.json

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};