Twitter Frontend Coding Challenge

Approach: Implement a React component with optimistic UI updates for the like functionality, proper error handling, and Twitter-like UI patterns.

Key Twitter Frontend Patterns to Demonstrate:

• Optimistic UI updates for immediate feedback
• Error handling with graceful fallbacks
• Accessibility considerations
• Performance optimization
• Clean, maintainable component structure

Implementation:

import React, { useState } from 'react';
import { formatDistanceToNow } from 'date-fns';
import './Tweet.css';

// Mock API call - in a real app, this would be a real API call
const likeTweetAPI = async (tweetId, liked) => {
  // Simulate network delay
  await new Promise(resolve => setTimeout(resolve, 500));
  
  // Simulate random API failure (10% chance)
  if (Math.random() < 0.1) {
    throw new Error('Failed to update like status');
  }
  
  return { success: true };
};

const Tweet = ({ tweet }) => {
  const [isLiked, setIsLiked] = useState(tweet.liked);
  const [likeCount, setLikeCount] = useState(tweet.likeCount);
  const [isUpdating, setIsUpdating] = useState(false);
  const [error, setError] = useState(null);
  
  const handleLikeToggle = async () => {
    // Clear any previous errors
    setError(null);
    
    // Optimistic UI update
    const newLikedState = !isLiked;
    const newLikeCount = newLikedState ? likeCount + 1 : likeCount - 1;
    
    setIsLiked(newLikedState);
    setLikeCount(newLikeCount);
    setIsUpdating(true);
    
    try {
      // Make API call to update like status
      await likeTweetAPI(tweet.id, newLikedState);
      
      // API call succeeded, no need to do anything as we've already updated the UI
    } catch (err) {
      // API call failed, revert the optimistic update
      setIsLiked(!newLikedState);
      setLikeCount(newLikedState ? newLikeCount - 1 : newLikeCount + 1);
      setError('Failed to update like status. Please try again.');
      
      // In a real app, you might want to log this error
      console.error('Like update failed:', err);
    } finally {
      setIsUpdating(false);
    }
  };
  
  const formattedDate = formatDistanceToNow(new Date(tweet.createdAt), { addSuffix: true });
  
  return (
    

      

        
        

          

            {tweet.author.name}
            {tweet.author.verified && (
              ✓
            )}
          
          @{tweet.author.handle}
        
        
          {formattedDate}
        
      
      
      

        {tweet.content}
      
      
      {tweet.mediaUrl && (
        

          
        
      )}
      
      

        
          💬
          {tweet.replyCount}
        
        
        
          🔄
          {tweet.retweetCount}
        
        
        
          {isLiked ? '❤️' : '🤍'}
          {likeCount}
        
        
        
          🔗
        
      
      
      {error && (
        

          {error}
        
      )}
    
  );
};

export default Tweet;

CSS (Tweet.css):

.tweet {
  border: 1px solid #2f3336;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  background-color: #15202b;
  transition: background-color 0.2s;
}

.tweet:hover {
  background-color: #1a2734;
}

.tweet-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.tweet-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 12px;
}

.tweet-author-info {
  flex: 1;
}

.tweet-author-name {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #e7e9ea;
}

.verified-badge {
  margin-left: 4px;
  color: #1d9bf0;
  font-size: 14px;
}

.tweet-author-handle {
  color: #71767b;
  font-size: 14px;
}

.tweet-time {
  color: #71767b;
  font-size: 14px;
}

.tweet-content {
  margin-bottom: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: #e7e9ea;
  font-size: 16px;
  line-height: 1.5;
}

.tweet-media {
  margin-bottom: 12px;
  border-radius: 16px;
  overflow: hidden;
}

.tweet-image {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}

.tweet-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.tweet-action {
  background: none;
  border: none;
  color: #71767b;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  border-radius: 50px;
  transition: all 0.2s;
}

.tweet-action:hover {
  background-color: rgba(29, 155, 240, 0.1);
}

.action-icon {
  margin-right: 4px;
}

.action-count {
  font-size: 14px;
}

.like-button.liked {
  color: #f91880;
}

.like-button:hover {
  color: #f91880;
  background-color: rgba(249, 24, 128, 0.1);
}

.tweet-error {
  margin-top: 12px;
  padding: 8px;
  background-color: rgba(244, 33, 46, 0.1);
  color: #f4212e;
  border-radius: 8px;
  font-size: 14px;
}

Key Points to Discuss:

• Optimistic UI updates for immediate feedback
• Error handling with graceful fallbacks
• Accessibility features (aria attributes, semantic HTML)
• Performance considerations (memoization opportunities, event handling)
• Twitter-specific UI patterns and interactions
• Potential improvements like animation, internationalization, or additional features