On-chain collectible manuscripts — encrypt, anchor, transfer.
Landing hero art direction: fine-art auction–house aesthetic, full-bleed photography.
Features · Stack · Screenshots · Deploy & env · Local dev
YONDER is a Next.js 14 web application for a discreet digital-asset protocol on Base Sepolia: users encrypt manuscript-class files locally, upload ciphertext and public manifests, mint ERC-721 “Aura” tokens, and browse holdings by tokenId with optional secondary-market flows. The UI follows an editorial, institution-grade visual language (auction-house–inspired layout, serif/display typography, restrained palette).
The production deployment is live at yonderaura.art (Vercel or equivalent).
中文简述： YONDER 是 Base Sepolia 上的链上数字藏品前端：本地加密文稿、IPFS/自建存储上传、铸造 Aura NFT、按编号归档阅览与叙事页展示，界面采用拍卖行式浅色编辑排版。线上站点： yonderaura.art
| Area | Description |
|---|---|
Forge (/atelier) |
Drag-and-drop publishing pipeline: AES-256-GCM encryption in-browser, multi-part upload API, public manifest generation, optional low-res preview, mintAura when a contract is configured. |
Archive (/archive) |
Query getAura by token id, grid of aura cards, per-token detail with public reading panel and marketplace panel (list / Dutch auction / buy) where applicable. |
Lore (/narrative) |
Brand narrative copy (i18n). |
| i18n | Chinese / English via LocaleProvider and message dictionaries. |
| Wallet | ConnectKit + Wagmi + Viem on Base Sepolia. |
| Layer | Choices |
|---|---|
| Framework | Next.js 14 (App Router), React 18 |
| Styling | Tailwind CSS, custom design tokens (paper, surface, line, ink, …) |
| Web3 | wagmi v2, viem v2, ConnectKit |
| Data | @tanstack/react-query |
| Documents | mammoth, pdf.js–based extraction (see src/lib/media/) |
| Smart contracts | Solidity (contracts/YonderAura.sol), Foundry config under contracts/ |
Hero direction — impressionist bridge (wide editorial photography).
 Alternate hero — jewelry vitrine row |
 Atelier strip — monumental floral installation |
 Archive — scholar’s library (collection metaphor) |
 Narrative — bridge & pond (lore strip) |
 Home card — forge (jewelry) |
 Home card — archive (museum vase) |
Production is served at https://www.yonderaura.art/. Configure the same variables in your host (e.g. Vercel → Project → Settings → Environment Variables) for Production (and Preview if you use branch deploys). Never commit .env or .env*.local.
Copy locally from the template when developing:
cp .env.example .env.local| Variable | Role |
|---|---|
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID |
WalletConnect / ConnectKit |
NEXT_PUBLIC_YONDER_CONTRACT_ADDRESS |
Deployed Aura contract (Base Sepolia) |
NEXT_PUBLIC_YONDER_STORAGE_PUBLIC_BASE |
Public gateway base for manifest & assets |
NEXT_PUBLIC_APP_URL |
Canonical site URL — use https://www.yonderaura.art for production (wallet metadata / ConnectKit) |
YONDER_STORAGE_UPLOAD_URL / YONDER_STORAGE_API_KEY |
Server-side upload target (or Pinata JWT if used) |
See .env.example for full comments. Secrets belong only in local .env.local or the host’s encrypted environment settings.
After changing variables on the host, redeploy so NEXT_PUBLIC_* values are baked into the build.
For contributors who run the app on a machine:
- Node.js 18+ (20 LTS recommended)
- npm (or pnpm/yarn with equivalent commands)
- A WalletConnect Project ID (Cloud WalletConnect)
git clone https://github.com/changshenhan/YONDER.git
cd YONDER
npm install
npm run devThen open the dev server URL shown in the terminal (default port 3000). Use .env.local for local overrides; point NEXT_PUBLIC_APP_URL at http://127.0.0.1:3000 (or your tunnel URL) when testing wallets locally.
npm run build
npm start| Command | Description |
|---|---|
npm run dev |
Next.js development server |
npm run build |
Production build |
npm start |
Serve production build locally |
npm run lint |
ESLint |
contracts/ # YonderAura.sol + Foundry
public/images/ # Editorial imagery (hero, cards, inner-page strips)
public/legal/ # Bundled secondary-market legal text
src/app/ # App Router pages & API routes
src/components/ # UI (archive, atelier, layout, legal)
src/i18n/ # Locales
src/lib/ # Contracts, crypto, media, storage helpers
.env.local,.env, API keys, and JWTs are gitignored (see.gitignore).- Client-bundled
NEXT_PUBLIC_*variables are public by definition — do not put secrets behind that prefix. - Legal acknowledgements for trading flows are bundled under
public/legal/and referenced in-app.
This project is marked private in package.json. All rights reserved unless otherwise stated by the author. Add an explicit LICENSE file if you open-source the codebase later.
Live site: yonderaura.art · Repository: github.com/changshenhan/YONDER