Prediction markets implementation example: Allowing users to browse events, view market odds and place fake trades.
- Event Browsing - Browse active prediction events
- Market Trading - Each event has markets that are available for trading
- Real-time Odds - View current ask/bid prices displayed as percentages
- Responsive Design - Mobile-friendly UI that adapts to all screen sizes
- Order Form - Interactive order placement with buy/sell toggles
- Solana Wallet Adapter - Connect with your solana wallet
| Route | Description |
|---|---|
/ |
Home page with event listings and category filters |
/event/[id] |
Event detail page with all markets and order form |
The app integrates with the DFlow API to fetch (Kalshi) prediction market data: https://pond.dflow.net/quickstart/discover-prediction-tokens
GET /api/v1/events- Fetch paginated list of active events with nested marketsGET /api/v1/event/:id- Fetch single event details by ticker
- In order to trade, real solana transactions need to be added (see DFlow API)
- Real categories can be added
- Event filters
- Display chart data (Airbnb library has low bundle size charts which are recommended https://visx.airbnb.tech/)
- Order book data
- Overal general information for each market, rules i.e.
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.