Kiro Twitter API: Build Twitter Apps with Kiro AI IDE

twitter-app/
├── src/
│   ├── api/
│   ├── components/
│   └── utils/
├── tests/
├── docs/
└── config/

I want to build a Twitter analytics dashboard using TwitterAPI.io. The app should:
1. Fetch user profiles by username
2. Display user's recent tweets
3. Show follower/following statistics
4. Include rate limiting and error handling
5. Use React for the frontend with a modern design

Base API URL: https://api.twitterapi.io
apikey: {your_api_key}

# Twitter Analytics Dashboard Specifications

## User Stories
- As a user, I want to search for Twitter profiles by username
- As a user, I want to view detailed user statistics
- As a user, I want to see recent tweets with engagement metrics
- As a user, I want the app to handle API errors gracefully

## Technical Requirements
- React 18+ with TypeScript
- TwitterAPI.io integration with proper authentication
- Responsive design for mobile and desktop
- Rate limiting compliance (20 requests per second on a paid account)
- Error boundaries and loading states

// src/api/twitterService.ts - Generated by Kiro
class TwitterAPIService {
  private baseURL = 'https://api.twitterapi.io';
  private apiKey: string;

  constructor(apiKey: string) {
    this.apiKey = apiKey;
  }

  private async makeRequest<T>(endpoint: string, params?: Record<string, any>): Promise<T> {
    const url = new URL(`${this.baseURL}${endpoint}`);
    if (params) {
      Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));
    }
    const response = await fetch(url.toString(), {
      headers: {
        'X-API-Key': this.apiKey,
        'Content-Type': 'application/json'
      }
    });
    if (!response.ok) {
      throw new Error(`Twitter API Error: ${response.status}`);
    }
    return response.json();
  }

  // Get user info by username - maps to TwitterAPI.io endpoint
  async getUserInfo(username: string) {
    return this.makeRequest('/twitter/user/info', { userName: username });
  }

  // Get user's recent tweets - uses TwitterAPI.io's user tweets endpoint
  // (20 tweets per page; pass the returned next_cursor as cursor for more)
  async getUserTweets(userId: string, cursor: string = '') {
    return this.makeRequest('/twitter/user/last_tweets', { userId, cursor });
  }

  // Get user followers - leverages TwitterAPI.io's follower endpoint
  async getUserFollowers(username: string, pageSize: number = 100) {
    return this.makeRequest('/twitter/user/followers', { userName: username, pageSize });
  }
}

export default TwitterAPIService;

// src/components/TwitterDashboard.tsx - AI-generated
import React, { useState, useCallback } from 'react';
import { TwitterAPIService } from '../api/twitterService';

// ... (interfaces for UserProfile, Tweet)

const TwitterDashboard: React.FC = () => {
  const [username, setUsername] = useState('');
  const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
  const [tweets, setTweets] = useState<Tweet[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const twitterAPI = new TwitterAPIService(process.env.REACT_APP_TWITTER_API_KEY!);

  const searchUser = useCallback(async () => {
    // ... (search logic)
  }, [username, twitterAPI]);

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
      {/* ... (JSX for dashboard UI) */}
    </div>
  );
};

export default TwitterDashboard;

// .kiro/hooks/api-validation.js - Auto-generated validation hook
module.exports = {
  name: 'TwitterAPI Validation',
  trigger: 'on_file_save',
  pattern: 'src/api/**/*.ts',
  action: async (file, context) => {
    const content = await context.readFile(file);
    
    // Check for proper rate limiting
    if (content.includes('makeRequest') && !content.includes('rate-limit')) {
      context.warn('Consider implementing rate limiting for API calls');
    }
    
    // Validate API key security
    if (content.includes('apiKey') && content.includes('console.log')) {
      context.error('API key should not be logged to console');
    }
  }
};

// src/utils/rateLimiter.ts - Generated by Kiro
class RateLimiter {
  // ... (implementation)
}

// src/webhooks/twitterWebhook.ts - Kiro-generated
import express from 'express';
const app = express();

app.post('/webhook/twitter', (req, res) => {
  const { event_type, data } = req.body;
  // ... (handle different event types)
  res.status(200).send('OK');
});

# Dockerfile - Generated by Kiro
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]