Build a web application that allows live poker players to manually input their hand history and generate shareable video replays. The target audience is recreational and serious live poker players who want to review, share, and discuss hands from their sessions without the auto-export features available in online poker.
Live poker players have no easy way to visualize and share their hands. They currently resort to:
- Typing out hand histories in text (hard to follow)
- Drawing on napkins or whiteboards
- Using clunky desktop software not designed for mobile
We're building a mobile-first, fast input tool that outputs professional-looking video replays optimized for sharing on social media, Discord, and poker forums.
- Setup → Configure the table (blinds, player count, positions, stack sizes)
- Hero Cards → Input your hole cards
- Action Entry → Log the hand action-by-action (who did what, for how much)
- Community Cards → Input flop/turn/river as they come
- Replay → Watch the animated replay
- Export → Download as video (MP4/WebM) or share directly
- Frontend: React (single-page app)
- Styling: Tailwind CSS or CSS-in-JS (keep it minimal)
- Video Export: Client-side preferred (
html2canvas
+ ffmpeg.wasm
or MediaRecorder
API)
- No backend required for MVP — all processing happens in browser
- Mobile-first: Must work well on phones since players input hands at the table
/components
/Table — Poker table visualization (SVG or Canvas)
/Card — Playing card component
/PlayerSeat — Player position with stack, cards, action badge
/ActionTimeline — Visual timeline of the hand
/InputForm — Manual entry forms for setup/actions
/ReplayControls — Play/pause/step/speed controls
/ExportModal — Video export options and progress
interface HandHistory {
id: string;
blinds: { sb: number; bb: number; ante?: number };
players: Player[];
heroPosition: Position;
communityCards: Card[];
actions: Action[];
createdAt: Date;
}
interface Player {
position: Position;
stack: number;
cards: [Card | null, Card | null];
name?: string;
isHero: boolean;
}
interface Action {
street: 'preflop' | 'flop' | 'turn' | 'river';
player: Position;
type: 'fold' | 'check' | 'call' | 'bet' | 'raise' | 'all-in';
amount?: number;
isAllIn?: boolean;
}
interface Card {
rank: 'A' | 'K' | 'Q' | 'J' | 'T' | '9' | '8' | '7' | '6' | '5' | '4' | '3' | '2';
suit: '♠' | '♥' | '♦' | '♣';
}
type Position = 'BTN' | 'SB' | 'BB' | 'UTG' | 'UTG+1' | 'MP' | 'MP+1' | 'HJ' | 'CO';
- Theme: Dark background (#0a0a0a), subtle borders, no gradients except table felt
- Typography: Monospace for numbers/cards (JetBrains Mono), clean sans-serif for UI (Inter)
- Colors:
- Background:
#0a0a0a
- Surface:
#111111
, #1a1a1a
- Border:
#222222
, #333333
- Primary accent:
#2563eb
(blue)
- Card red:
#dc2626
- Card black:
#171717
- Bet/raise:
#22c55e
(green)
- Fold:
#ef4444
(red)
- All-in:
#f59e0b
(amber)
- Pot:
#fbbf24
(gold)
- Oval felt with subtle gradient (dark green)
- Simple wood-tone rail
- Clean player boxes with position labels
- No skeuomorphic chips — just numbers
- Cards: Clean, flat design with clear rank/suit
- Smooth but fast — players want to get to the export quickly
- Key animations:
- Card dealing (slide in)
- Community cards (flip reveal)
- Action badges (fade in)
- Pot updates (number tick up)
- No excessive flourishes
- Minimize taps/clicks to log an action
- Smart defaults (auto-advance to next player, remember common bet sizes)
- Support swipe gestures for common actions on mobile
- Visual card picker (tap suit, then rank)
- Or keyboard shortcut: type "Ah" for A♥, "Ks" for K♠
- Recent cards shown for quick re-selection
- Big touch targets for fold/check/call/bet/raise
- Number pad for bet amounts
- Quick buttons for common sizes (1/3 pot, 1/2 pot, pot, 2x)
- Format: MP4 (H.264) primary, WebM fallback
- Resolution: 1080x1080 (square, optimal for Instagram/Twitter) or 1920x1080 (landscape)
- Duration: ~1-2 seconds per action, user-adjustable speed
- File size: Target under 10MB for easy sharing
- Playback speed (0.5x, 1x, 1.5x, 2x)
- Include/exclude hero cards reveal at end
- Add title card with hand summary
- Watermark toggle (for branding if productized)
- Render each frame to canvas using the table component
- Use
MediaRecorder
API to capture canvas as video stream
- Or use
ffmpeg.wasm
to encode frames into MP4
- Provide download link when complete
- Hand sharing: Generate shareable links (requires backend)
- Hand library: Save and organize hands locally (IndexedDB)
- Equity calculator: Show winning percentages at each street
- Range visualization: Display opponent ranges based on actions
- Voice input: "Button raises to 15" → auto-logs action
- Multi-hand sessions: Log entire sessions, tag interesting hands
- Social features: Comments, likes, follows (requires backend)
- Embed widget: Embed replays on forums/blogs
poker-hand-replay/
├── src/
│ ├── components/
│ │ ├── Table/
│ │ │ ├── Table.tsx
│ │ │ ├── Felt.tsx
│ │ │ ├── PlayerSeat.tsx
│ │ │ └── CommunityCards.tsx
│ │ ├── Card/
│ │ │ ├── Card.tsx
│ │ │ └── CardPicker.tsx
│ │ ├── Input/
│ │ │ ├── SetupForm.tsx
│ │ │ ├── ActionInput.tsx
│ │ │ └── QuickBetButtons.tsx
│ │ ├── Replay/
│ │ │ ├── ReplayView.tsx
│ │ │ ├── ReplayControls.tsx
│ │ │ └── ActionTimeline.tsx
│ │ └── Export/
│ │ ├── ExportModal.tsx
│ │ └── VideoRenderer.tsx
│ ├── hooks/
│ │ ├── useHandHistory.ts
│ │ ├── useReplay.ts
│ │ └── useVideoExport.ts
│ ├── utils/
│ │ ├── poker.ts # Pot calculations, hand evaluation
│ │ ├── positions.ts # Position logic for N players
│ │ └── export.ts # Video encoding utilities
│ ├── types/
│ │ └── index.ts
│ ├── App.tsx
│ └── main.tsx
├── public/
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── README.md
-
Fast input > pretty input: Players are at the table, possibly between hands. Every tap counts.
-
Replay clarity > realism: The goal is to communicate what happened, not simulate a real table. Keep it clean and readable.
-
Shareable by default: Every design decision should consider how it looks when shared on social media.
-
Offline-first: Works without internet. All processing client-side.
-
No account required: Users can start using immediately. Accounts only needed for cloud features later.
Blinds: $1/$2
Players: 6-handed
Hero: BTN with A♠K♥
Preflop:
- UTG folds
- MP raises to $6
- HJ folds
- CO folds
- BTN (Hero) raises to $18
- SB folds
- BB folds
- MP calls $12
Flop: K♠ 7♦ 2♣
- MP checks
- BTN bets $22
- MP calls $22
Turn: 5♥
- MP checks
- BTN bets $55
- MP folds
Hero wins $85 pot
Use this hand to test the full flow from input to video export.
This app is built around No-Limit Texas Hold'em (NLHE), the most common live poker format.
Win the pot by either:
- making the best 5-card poker hand at showdown, or
- getting all opponents to fold before showdown.
- Each player receives 2 private hole cards.
- Up to 5 community cards are dealt face up on the board.
- Your final hand is the best 5-card combination made from any of your 2 hole cards + the 5 board cards.
- Royal Flush (A-K-Q-J-T same suit)
- Straight Flush
- Four of a Kind
- Full House
- Flush
- Straight
- Three of a Kind
- Two Pair
- One Pair
- High Card
A hand is played across up to four streets:
- Preflop: hole cards are dealt, then betting starts
- Flop: 3 community cards dealt, then betting
- Turn: 1 community card dealt, then betting
- River: 1 community card dealt, then final betting
If multiple players remain after the river betting round, the hand goes to showdown.
-
Before cards are dealt:
- Small Blind (SB) posts the small blind amount
- Big Blind (BB) posts the big blind amount
- Optional: Ante may be posted by all players (or BB ante format, depending on game)
-
These forced bets create the initial pot.
Depending on the situation:
- Fold: give up the hand (cannot win the pot)
- Check: bet 0 (only allowed if no bet has been made in the current round)
- Call: match the current bet
- Bet: put chips in when no bet exists yet in this round
- Raise: increase the current bet amount
- All-in: wager all remaining chips (treated as a bet/raise/call depending on context)
- Preflop: action starts from the player left of the BB (UTG in 6-max/9-max).
- Postflop (flop/turn/river): action starts from the SB (or the leftmost remaining player) and proceeds clockwise.
- The dealer button (BTN) rotates each hand.
-
Players may bet/raise any amount up to their full stack.
-
A betting round ends when:
- all remaining players have either folded, or
- all remaining players have contributed the same amount for that round (i.e., everyone has called/checked).
-
If two or more players remain after the final betting round:
- hands are revealed (or mucked if allowed)
- the best 5-card hand wins the pot
-
Ties split the pot.
-
If a player goes all-in for less than the full bet:
- they can only win the portion of the pot they are eligible for
- additional chips from other players form one or more side pots
-
Side pots are awarded among players who contributed to them and did not fold.
- The board must contain 5 unique cards maximum (3 flop + 1 turn + 1 river).
- No card can appear more than once anywhere (hero hole cards cannot be re-selected on the board).
- Street order is fixed: preflop → flop → turn → river.
- Actions should be validated by street: e.g., community cards cannot be placed before the flop, and "check" is only allowed if no bet exists in the current betting state.
- The order of action must be clockwise