Next.js web client for Gasless Gossip — a gamified, on-chain messaging app where gossip meets Web3. Chat, tip friends, join exclusive rooms, and level up, all with near-zero fees on Stellar.
This is the browser client: it talks to the whisper-backend API for auth/data, and to a Stellar wallet (e.g. Freighter, xBull) for anything that needs a signature — sending tips, joining paid rooms, sending messages that get anchored on-chain.
The product only works if chatting, tipping, and joining rooms feel free and instant, not like paying gas on every message. Stellar's fee model (fractions of a cent, ~3–5s finality) and the Soroban smart contract platform make that viable. Concretely, this means the frontend:
- Connects to a Stellar wallet (not a MetaMask-style EVM wallet) for signing.
- Reads room/message/XP state that is ultimately backed by the
messagingSoroban contract, via the backend API. - Can show on-chain XP/levels as a real reputation signal, since it's tracked in the contract, not just a database column.
See whspr_stellar for the contract source, and whisper-backend for the API this client consumes.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS 4 |
| Fonts | Geist / Geist Mono via next/font |
Not yet added, but part of the intended architecture: a Stellar wallet connector (e.g. @stellar/freighter-api or Stellar Wallets Kit) and an API client for whisper-backend.
whisper-frontend/
├── app/
│ ├── layout.tsx # Root layout: fonts + <html>/<body> shell
│ ├── page.tsx # Default create-next-app landing page
│ ├── globals.css # Tailwind import + light/dark CSS variables
│ └── favicon.ico
├── public/ # Static assets (default Next.js/Vercel icons)
└── next.config.ts, tsconfig.json, postcss.config.mjs, eslint.config.mjs
app/
├── (auth)/ # Wallet connect / login flow
├── rooms/
│ ├── [id]/ # Room view — messages, tip, XP
│ └── new/ # Create room
├── profile/[address]/ # User profile — XP, level, badges
└── layout.tsx, page.tsx (landing/dashboard)
lib/
├── api.ts # Typed client for whisper-backend
└── stellar.ts # Wallet connection + transaction signing helpers
No .env.example exists in this repo yet — set these in a .env.local you create yourself:
| Variable | Purpose |
|---|---|
NEXT_PUBLIC_API_URL |
Base URL of the whisper-backend API (e.g. http://localhost:3001) |
NEXT_PUBLIC_STELLAR_NETWORK |
testnet or mainnet — determines which network the wallet connector targets |
Both are NEXT_PUBLIC_* because they're needed client-side for API calls and wallet/network selection. Nothing secret (private keys, JWT secrets) belongs in this repo — those live server-side in whisper-backend.
This app doesn't call Stellar/Soroban directly for anything sensitive — it goes through whisper-backend, which owns the Stellar SDK integration and the deployed messaging contract. See whisper-backend's README for the planned REST surface (/rooms, /rooms/:id/messages, /rooms/:id/tips, /users/:address/xp, /users/:address/level, etc.). The one exception is wallet signing (transactions get built/returned by the backend or constructed here, then signed in-browser via the user's wallet extension — never with a private key held by this app).
npm install
npm run devOpen http://localhost:3000 to view it.
npm run dev # start dev server
npm run build # production build
npm run start # run production build
npm run lint # lintwhisper-backend— the NestJS API this client callswhspr_stellar— the Sorobanmessagingcontract backing the app's on-chain state