ThreadCraft

A production-ready web application for crafting and posting daily LeetCode solutions to X/Twitter threads. Features both a modern web interface and CLI tools.

Table of Contents

• Features
• Demo
• Quick Start
• Installation
• Configuration
• Usage
• Deployment
• API Reference
• CLI Tools
• Project Structure
• Security
• Contributing
• Troubleshooting
• License

Features

Web Interface

• Modern, responsive UI built with React and Mantine
• Settings page for secure API key configuration
• Dashboard with progress tracking and statistics
• Live tweet preview with character count
• Dark/light mode with system preference detection
• User-friendly error messages and notifications

Core Functionality

• Automatic day counter for tracking progress
• Thread management (start new threads, continue existing ones)
• GitHub Gist URL integration
• Progress persistence across sessions

Security

• API credentials encrypted using Fernet encryption
• Credentials stored only in browser session (not on server)
• Automatic session expiry after 24 hours
• No third-party credential storage

Demo

See an example thread: Daily LeetCode Thread

Quick Start

Prerequisites

• Node.js 18 or higher
• Python 3.9 or higher
• X/Twitter Developer Account with Elevated access

Running the Application

Terminal 1 - Backend:

cd backend
python -m venv venv
venv\Scripts\activate  # Windows
# source venv/bin/activate  # macOS/Linux
pip install -r requirements.txt
python app.py

Terminal 2 - Frontend:

cd frontend
npm install
npm run dev

Open http://localhost:3000 in your browser.

Installation

Backend Setup

1. Navigate to the backend directory:

   cd backend

2. Create and activate a virtual environment:

   python -m venv venv
   
   # Windows
   venv\Scripts\activate
   
   # macOS/Linux
   source venv/bin/activate

3. Install dependencies:

   pip install -r requirements.txt

4. Start the server:

   python app.py

The backend runs on http://localhost:5000.

Frontend Setup

1. Navigate to the frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

The frontend runs on http://localhost:3000.

Production Build

cd frontend
npm run build

Built files are output to frontend/dist/.

Configuration

Obtaining X/Twitter API Keys

1. Go to the Twitter Developer Portal

2. Create a new project and app

3. Navigate to "Keys and tokens"

4. Generate the following credentials:

   • API Key (Consumer Key)
   • API Secret (Consumer Secret)
   • Access Token
   • Access Token Secret
   • Bearer Token

5. Configure app permissions:

   • Go to Settings > User authentication settings
   • Set App permissions to "Read and Write"
   • Set Type of App to "Web App, Automated App or Bot"

Note: Elevated access or higher is required to post tweets via the API.

Web Interface Configuration

1. Open the application at http://localhost:3000
2. Navigate to Settings
3. Enter your API credentials
4. Click "Connect to X/Twitter"

CLI Configuration (Alternative)

1. Copy the environment template:

   cp .env.example .env

2. Edit .env with your credentials:

   TWITTER_API_KEY=your_api_key
   TWITTER_API_SECRET=your_api_secret
   TWITTER_ACCESS_TOKEN=your_access_token
   TWITTER_ACCESS_TOKEN_SECRET=your_access_token_secret
   TWITTER_BEARER_TOKEN=your_bearer_token
   

Usage

Web Interface

1. Configure API Keys: Navigate to Settings and enter your credentials
2. Start a Thread: Go to "Start Thread" and create an introduction tweet
3. Post Solutions: Use "Post Solution" to add daily entries with problem name and Gist URL

CLI Tools

Start a new thread:

python start_thread.py

Post a daily solution:

python post_leetcode.py

Creating Solution Gists

Create your Gist at https://gist.github.com with this recommended structure:

# Problem Name

[Question Link](https://leetcode.com/problems/...)

## Approach

Explain your approach...

## Implementation

```python
class Solution:
    def solve(self, params):
        pass
```

Results

• Runtime: X ms (Beats Y%)
• Memory: X MB (Beats Y%)

Complexity

• Time: O(n)
• Space: O(1)

## Deployment

Ready to share your app with others? Deploy to production!

### Quick Deploy (5 minutes)

See [DEPLOY_QUICKSTART.md](DEPLOY_QUICKSTART.md) for the fastest way to get your app live.

### Full Deployment Guide

For detailed deployment options and configurations, see [DEPLOYMENT.md](DEPLOYMENT.md).

**Supported Platforms:**
- ✅ Render.com (Recommended - easiest)
- ✅ Railway
- ✅ Fly.io
- ✅ Vercel + Render (Best performance)
- ✅ Docker + VPS

**Quick Start:**
1. Push your code to GitHub
2. Connect to Render.com
3. Deploy backend and frontend
4. Set environment variables
5. Done! 🎉

For step-by-step instructions, see the deployment guides above.

## API Reference

| Endpoint | Method | Description |
|----------|--------|-------------|
| `/api/health` | GET | Health check |
| `/api/session/create` | POST | Create session with credentials |
| `/api/session/validate` | GET | Validate current session |
| `/api/session/destroy` | DELETE | End session |
| `/api/progress` | GET | Get posting progress |
| `/api/progress/reset` | POST | Reset progress |
| `/api/thread/start` | POST | Start new thread |
| `/api/solution/post` | POST | Post solution to thread |
| `/api/tweet/preview` | POST | Preview tweet content |
| `/api/user/info` | GET | Get authenticated user info |

## CLI Tools

### start_thread.py

Initializes a new thread with an introduction tweet.

```bash
python start_thread.py

post_leetcode.py

Posts a solution to the existing thread.

python post_leetcode.py

test_credentials.py

Validates your API credentials.

python test_credentials.py

Project Structure

lc-thread-posts/
├── backend/
│   ├── app.py                  # Flask API server
│   └── requirements.txt        # Python dependencies
├── frontend/
│   ├── src/
│   │   ├── components/         # React components
│   │   ├── pages/              # Page components
│   │   ├── services/           # API service layer
│   │   ├── store/              # State management
│   │   ├── utils/              # Utilities
│   │   ├── App.tsx             # Main app component
│   │   └── main.tsx            # Entry point
│   ├── package.json
│   └── vite.config.ts
├── post_leetcode.py            # CLI posting script
├── start_thread.py             # CLI thread starter
├── test_credentials.py         # Credential validator
├── progress.json               # Progress tracking
├── .env.example                # Environment template
├── CONTRIBUTING.md             # Contribution guidelines
├── CHANGELOG.md                # Version history
├── SECURITY.md                 # Security policy
├── LICENSE                     # MIT License
└── README.md

Security

• API credentials are encrypted using Fernet (symmetric encryption)
• Credentials are stored only in browser local session
• No server-side credential storage
• Sessions expire automatically after 24 hours
• Users can disconnect at any time to remove credentials

For security concerns, see SECURITY.md.

Contributing

Contributions are welcome. Please read CONTRIBUTING.md for guidelines.

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

Troubleshooting

"pip is not recognized"

python -m pip install -r requirements.txt

"401 Unauthorized"

• Verify app has "Read and Write" permissions
• Regenerate Access Token and Access Token Secret
• Update credentials in Settings or .env

"Module not found"

python -m pip install --upgrade -r requirements.txt

Test credentials:

python test_credentials.py

Reset progress: Delete progress.json to start a new thread.

Rate Limits

Twitter Free tier limits:

• 1,500 tweets per month
• 50 tweets per day

Daily posting is well within these limits.

License

This project is licensed under the MIT License. See LICENSE for details.

Acknowledgments

Inspired by @Ifihan_'s daily LeetCode thread.

---

Resources:

• X Developer Portal
• LeetCode
• GitHub Gist