Twtxt Feed Viewer

A clean, minimal web application for viewing twtxt.txt feeds in a beautiful card-based timeline format.

Features

  • Enter any twtxt.txt feed URL
  • Remembers the last feed URL entered - automatically loads your most recent feed URL
  • Clean, responsive card-based design
  • Parses RFC3339 timestamps and metadata
  • Mobile-friendly interface using Tailwind CSS

Project Structure

├── backend/
│   └── index.ts             # Main HTTP server with CORS proxy
├── frontend/
│   ├── index.html           # Main HTML template
│   ├── index.tsx            # React frontend entry point
│   └── components/
│       ├── App.tsx          # Main app component
│       ├── FeedInput.tsx    # URL input component
│       └── TweetCard.tsx    # Individual tweet card component
├── shared/
│   └── types.ts             # Shared TypeScript types
└── README.md

Usage

  1. Visit the application URL
  2. The input field will automatically populate with your last used feed URL (if any)
  3. Enter a twtxt.txt feed URL in the input field (defaults to https://nicobaier.com/twtxt.txt for first-time users)
  4. Click "Load Feed" to fetch and display the timeline
  5. View posts in a clean, card-based format with timestamps and metadata
  6. Your feed URL will be remembered for next time

Features Implemented

  • ✅ Clean, responsive card-based design using Tailwind CSS
  • ✅ URL input with validation and loading states
  • Last feed URL persistence - remembers your most recent feed URL using localStorage
  • ✅ Twtxt feed parsing with RFC3339 timestamp support
  • ✅ Metadata extraction (nickname, avatar, description)
  • ✅ Relative time formatting (e.g., "2h ago", "3d ago")
  • ✅ Link detection and formatting in posts
  • ✅ Error handling for invalid URLs or malformed feeds
  • ✅ CORS proxy to handle cross-origin requests
  • ✅ Mobile-friendly responsive layout

Twtxt Format

Supports the standard twtxt format:

  • RFC3339 timestamps followed by TAB character
  • UTF-8 encoded with LF line separators
  • Metadata parsing (nickname, avatar, description)
  • One status update per line