Designing TikTok: Short-Form Video Platform

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

interface LikeRequest {
  user_id: string;
  video_id: string;
  action: 'like' | 'unlike';
  request_id: string;  // For idempotency
  timestamp: number;
}
 
interface LikeResponse {
  success: boolean;
  new_state: 'liked' | 'not_liked';
  like_count: number;  // New count (may be approximate)
}
 
class LikeService {
  // Idempotency cache: request_id -> result
  private idempotencyCache: RedisCluster;
  // User-video relationship store
  private userLikesStore: CassandraCluster;
  // Video counter store
  private counterStore: RedisCluster;
  // Event stream
  private eventStream: KafkaProducer;
  
  async processLike(request: LikeRequest): Promise<LikeResponse> {
    // 1. Idempotency check
    const cached = await this.idempotencyCache.get(request.request_id);
    if (cached) {
      return JSON.parse(cached);  // Return cached result
    }
    
    // 2. Check current state
    const currentState = await this.userLikesStore.get({
      user_id: request.user_id,
      video_id: request.video_id
    });
    
    // 3. Determine if state change needed
    const isLiked = currentState?.is_active ?? false;
    const wantsLiked = request.action === 'like';
    
    if (isLiked === wantsLiked) {
      // No change needed (idempotent)
      return {
        success: true,
        new_state: isLiked ? 'liked' : 'not_liked',
        like_count: await this.getApproxCount(request.video_id)
      };
    }
    
    // 4. Update relationship
    await this.userLikesStore.upsert({
      user_id: request.user_id,
      video_id: request.video_id,
      is_active: wantsLiked,
      timestamp: request.timestamp
    });
    
    // 5. Update counter (async, fire-and-forget for speed)
    const delta = wantsLiked ? 1 : -1;
    this.counterStore.incrBy(`video:${request.video_id}:likes`, delta);
    
    // 6. Emit event for downstream processing
    await this.eventStream.send({
      topic: 'engagement-events',
      key: request.video_id,  // Partition by video for ordering
      value: {
        type: 'like',
        user_id: request.user_id,
        video_id: request.video_id,
        action: request.action,
        timestamp: request.timestamp
      }
    });
    
    // 7. Cache result for idempotency
    const response: LikeResponse = {
      success: true,
      new_state: wantsLiked ? 'liked' : 'not_liked',
      like_count: await this.getApproxCount(request.video_id)
    };
    
    await this.idempotencyCache.setex(
      request.request_id,
      300,  // 5 minute TTL
      JSON.stringify(response)
    );
    
    return response;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

interface Comment {
  comment_id: string;
  video_id: string;
  user_id: string;
  parent_comment_id?: string;  // null for top-level comments
  text: string;
  timestamp: number;
  like_count: number;
  reply_count: number;
  status: 'pending' | 'approved' | 'hidden' | 'deleted';
  entities: CommentEntity[];  // @mentions, #hashtags
}
 
interface CommentEntity {
  type: 'mention' | 'hashtag' | 'url';
  start: number;
  end: number;
  value: string;  // user_id for mentions, tag for hashtags
}
 
class CommentService {
  async createComment(request: CreateCommentRequest): Promise<Comment> {
    // 1. Rate limit check (max 10 comments/minute per user)
    await this.rateLimiter.check(request.user_id, 'comment', 10, 60);
    
    // 2. Content validation
    if (request.text.length > 150) {
      throw new ValidationError('Comment too long');
    }
    
    // 3. Parse entities (mentions, hashtags)
    const entities = this.entityParser.parse(request.text);
    
    // 4. Spam/toxicity check (fast ML model)
    const toxicityScore = await this.toxicityModel.score(request.text);
    const initialStatus = toxicityScore > 0.8 ? 'pending' : 'approved';
    
    // 5. Generate comment ID (time-based for ordering)
    const commentId = this.generateTimeBasedId();
    
    // 6. Create comment object
    const comment: Comment = {
      comment_id: commentId,
      video_id: request.video_id,
      user_id: request.user_id,
      parent_comment_id: request.parent_comment_id,
      text: request.text,
      timestamp: Date.now(),
      like_count: 0,
      reply_count: 0,
      status: initialStatus,
      entities
    };
    
    // 7. Write to primary store
    await this.commentStore.insert(comment);
    
    // 8. Update parent reply count if this is a reply
    if (comment.parent_comment_id) {
      await this.incrementReplyCount(comment.parent_comment_id);
    }
    
    // 9. Update video comment count
    await this.counterService.increment(
      `video:${request.video_id}:comments`
    );
    
    // 10. Emit for downstream processing
    await this.eventStream.send({
      topic: 'comment-events',
      key: request.video_id,
      value: { type: 'new_comment', comment }
    });
    
    // 11. Send notifications (async)
    this.notificationService.queueCommentNotifications(comment, entities);
    
    return comment;
  }
  
  async getComments(
    videoId: string,
    sortBy: 'top' | 'recent' = 'top',
    cursor?: string,
    limit: number = 20
  ): Promise<CommentPage> {
    // Fetch top-level comments with pagination
    const comments = await this.commentStore.query({
      video_id: videoId,
      parent_comment_id: null,  // Top-level only
      status: 'approved'
    }, {
      sort: sortBy === 'top' ? 'like_count:desc' : 'timestamp:desc',
      cursor,
      limit
    });
    
    // Batch-fetch preview replies for each comment
    const commentIds = comments.map(c => c.comment_id);
    const previewReplies = await this.batchFetchPreviewReplies(
      commentIds, 
      2  // Show 2 preview replies per comment
    );
    
    return {
      comments: comments.map(c => ({
        ...c,
        preview_replies: previewReplies[c.comment_id] || []
      })),
      next_cursor: this.generateCursor(comments)
    };
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

// React hook for optimistic like state
function useLikeButton(videoId: string) {
  const [isLiked, setIsLiked] = useState(false);
  const [likeCount, setLikeCount] = useState(0);
  const [pending, setPending] = useState(false);
  
  const toggleLike = async () => {
    // 1. Optimistic update (immediate UI change)
    const newLikedState = !isLiked;
    setIsLiked(newLikedState);
    setLikeCount(prev => newLikedState ? prev + 1 : prev - 1);
    
    // 2. Haptic feedback (physical confirmation)
    HapticFeedback.impact('light');
    
    // 3. Queue the request
    setPending(true);
    try {
      const result = await api.toggleLike({
        videoId,
        action: newLikedState ? 'like' : 'unlike',
        requestId: generateRequestId()  // For idempotency
      });
      
      // 4. Reconcile with server state
      setIsLiked(result.new_state === 'liked');
      setLikeCount(result.like_count);
      
    } catch (error) {
      // 5. Rollback on failure
      setIsLiked(!newLikedState);
      setLikeCount(prev => newLikedState ? prev - 1 : prev + 1);
      
      // 6. Retry queue for network errors
      if (isNetworkError(error)) {
        RetryQueue.enqueue({ type: 'like', videoId, action });
      } else {
        showToast('Could not update like');
      }
    } finally {
      setPending(false);
    }
  };
  
  return { isLiked, likeCount, toggleLike, pending };
}