X Client

A custom web client for X (Twitter) built with Next.js. Compose tweets, post threads, and bulk-delete tweets — all from a clean, dark-themed UI.

Features

• Compose — Write and post single tweets with a live character counter
• Thread — Build multi-tweet threads with visual connectors and position indicators
• Delete — Remove tweets by ID, one at a time or in bulk
• Dark UI — Glass-morphism design with gradient accents and smooth animations

Prerequisites

• Node.js 18+
• A Twitter/X Developer account with API v2 credentials (Free tier works)

Setup

1. Clone the repo

   git clone https://github.com/your-username/custom-twitter-client.git
   cd custom-twitter-client

2. Install dependencies

   npm install

3. Configure environment variables

   Copy the example env file and fill in your credentials:

   cp .env.example .env.local

   Variable	Description
   TWITTER_API_KEY	API key from your Twitter app
   TWITTER_API_SECRET	API secret from your Twitter app
   TWITTER_ACCESS_TOKEN	User access token
   TWITTER_ACCESS_SECRET	User access token secret

   You can generate these at developer.x.com/en/portal/dashboard. Make sure your app has Read and Write permissions.

4. Start the dev server

   npm run dev

   Open http://localhost:3000.

Scripts

Command	Description
npm run dev	Start development server
npm run build	Create production build
npm start	Start production server

API Routes

Method	Endpoint	Description
POST	/api/tweet	Post a single tweet
POST	/api/thread	Post a thread (linked replies)
DELETE	/api/delete-tweet	Delete a tweet by ID
GET	/api/my-tweets	Fetch your recent tweets

Tech Stack

• Framework — Next.js 16 (App Router)
• Language — TypeScript
• Styling — Tailwind CSS 4
• Twitter API — twitter-api-v2
• Icons — Lucide React
• Notifications — React Hot Toast

Project Structure

src/
├── app/
│   ├── api/
│   │   ├── tweet/route.ts          # Single tweet endpoint
│   │   ├── thread/route.ts         # Thread endpoint
│   │   ├── delete-tweet/route.ts   # Delete endpoint
│   │   └── my-tweets/route.ts      # Fetch tweets endpoint
│   ├── layout.tsx                  # Root layout
│   ├── page.tsx                    # Main UI (Compose, Thread, Delete tabs)
│   └── globals.css                 # Global styles & animations
└── lib/
    └── twitter.ts                  # Twitter API client wrapper

License

MIT