DemoBuy

Social Trading

Last updated on 2026-05-31

The social trading module provides four screens for community-driven trading features. It includes a social feed for sharing trade ideas, a performance leaderboard, copy trading management, and a strategy marketplace. All screens are in the (app) route group.

Social Feed

Route: /social/feed

A social media-style feed where traders share ideas, analysis, and trade activity.

  • Post composer -- PostComposer component at the top of the feed with a textarea input, ticker tag input, and submit button for creating new posts
  • Filter tabs -- pill-style tabs for All, Ideas, Analysis, and Trades to narrow the feed by post type
  • Post cards -- PostCard components displaying each post with:
    • Author info -- avatar, display name, handle, verification badge (blue checkmark for verified traders), and pro badge
    • Post content -- text body with inline ticker tags (e.g., $AAPL) highlighted in the primary color
    • Ticker tags -- associated stock tickers displayed as clickable badges
    • Sentiment badge -- Bullish (green), Bearish (red), or Neutral (gray) indicator
    • Engagement actions -- like button (with count), comment button (with count), repost button (with count), and bookmark toggle
    • Timestamp -- relative time (e.g., "2h ago", "Yesterday")
  • Staggered animation -- posts animate in with increasing delay for a cascading entrance effect
import { PostCard } from "@/components/social/post-card"
import { PostComposer } from "@/components/social/post-composer"

Post Types

Type Tag Filter Description
Idea Ideas Trade idea with ticker and sentiment
Analysis Analysis Technical or fundamental analysis
Trade Trades Executed trade with entry/exit details

Data Sources

Data Source Location
Social posts socialPosts data/seed-social.ts

Leaderboard

Route: /social/leaderboard

A ranked leaderboard of top-performing traders with detailed performance metrics.

  • Podium -- Podium component displaying the top 3 traders with medal icons (gold, silver, bronze), avatars, display names, and total return percentages; the first-place trader is elevated in the center
  • Period selector -- tabs or dropdown for Daily, Weekly, Monthly, Quarterly, Yearly, and All-Time rankings
  • Leaderboard table -- LeaderboardTable showing all ranked traders with columns for:
    • Rank -- current rank with change indicator (arrow up/down with number of positions moved)
    • Trader -- avatar, display name, and handle
    • Return % -- total return percentage (color-coded green/red)
    • Win Rate -- percentage of winning trades
    • Total Trades -- number of trades in the period
    • Sharpe Ratio -- risk-adjusted return metric
    • Max Drawdown -- worst peak-to-trough decline percentage
    • Followers -- follower count
    • Badges -- earned achievement badges (Top Performer, Streak Winner, Risk Manager, etc.)
import { Podium } from "@/components/social/podium"
import { LeaderboardTable } from "@/components/social/leaderboard-table"

Leaderboard Layout

┌───────────────────────────────────────────┐
│              ┌──────────┐                │
│    ┌────┐    │  #1 GOLD │    ┌────┐      │
│    │ #2 │    │  Avatar  │    │ #3 │      │
│    │SLVR│    │ +45.2%   │    │BRNZ│      │
│    └────┘    └──────────┘    └────┘      │
├───────────────────────────────────────────┤
│ [Daily] [Weekly] [Monthly] [All-Time]    │
├────┬────────┬────────┬──────┬──────┬─────┤
│ #  │ Trader │ Return │ Win% │ Trades│Shp │
│ 4  │ Jane D │ +32.1% │ 68%  │ 142  │ 1.8│
│ 5  │ Bob K  │ +28.7% │ 65%  │ 98   │ 1.6│
└────┴────────┴────────┴──────┴──────┴─────┘

Trader Badges

Badge Icon Earned For
Top Performer Trophy Top 10 in monthly leaderboard
Streak Winner Flame 5+ consecutive winning trades
High Volume Zap 100+ trades in a month
Risk Manager Shield Max drawdown under 10%
Early Adopter Star Among first 100 users
Verified Check Identity verified
Mentor GraduationCap Active in helping others
Analyst BarChart Regular analysis posts

Data Sources

Data Source Location
Leaderboard entries leaderboardEntries data/seed-social.ts

Copy Trading

Route: /social/copy-trading

Management interface for copy trading configurations -- following other traders' strategies.

  • Copy trading cards -- CopyCard components showing each copy trading subscription:
    • Trader info -- avatar, name, handle, and performance summary
    • Status badge -- Active (green), Paused (amber), or Stopped (gray)
    • Configuration -- allocation amount, max position size, stop loss percentage, and copy percentage (what portion of their trades to replicate)
    • Performance -- total copied trades, total return, and return percentage since starting
    • Actions -- Pause/Resume toggle, Edit configuration, and Stop buttons
  • Add trader -- button to browse the leaderboard and select a trader to copy
  • Risk controls -- each copy configuration includes stop loss, max position size, and excluded tickers
import { CopyCard } from "@/components/social/copy-card"

Copy Trading Status

Status Badge Color Description
Active green Actively copying trades
Paused amber Temporarily paused
Stopped gray Permanently stopped

Data Sources

Data Source Location
Copy configurations copyTradingConfigs data/seed-social.ts

Strategy Marketplace

Route: /social/marketplace

A marketplace for browsing and subscribing to trading strategies created by top traders.

  • Strategy cards -- StrategyCard grid displaying trading strategies with:
    • Strategy name and description -- title and brief description of the strategy approach
    • Author -- creator's avatar, name, and verification status
    • Category badge -- Momentum, Mean Reversion, Trend Following, Breakout, Dividend, Value, Growth, Scalping, Swing, or Options
    • Performance metrics -- 1-year backtest return, max drawdown, Sharpe ratio, and win rate
    • Pricing -- monthly subscription price (or "Free" badge)
    • Subscribers -- number of active subscribers
    • Tags -- strategy tags for search and filtering
    • Risk level -- Conservative, Moderate, or Aggressive indicator
  • Category filter -- dropdown to filter strategies by category
  • Sort options -- sort by return, Sharpe ratio, subscribers, or price
import { StrategyCard } from "@/components/social/strategy-card"

Strategy Categories

Category Description
Momentum Follows price momentum signals
Mean Reversion Bets on price returning to the mean
Trend Following Follows established trends
Breakout Trades breakouts from consolidation
Dividend Focuses on dividend-paying stocks
Value Seeks undervalued stocks
Growth Targets high-growth companies
Scalping Short-term rapid trades
Swing Multi-day position trades
Options Options-based strategies

Data Sources

Data Source Location
Strategies strategies data/seed-social.ts

Next Steps

Previous

Research & Analysis

Next

Analytics & Risk