Content Remixer

A retro DOS-style web application that helps you transform longer content into tweetable chunks. Built with React, Vite, and Supabase, featuring a nostalgic DOS interface with modern functionality.

Features

Core Functionality

• Transform long-form content into tweet-sized chunks
• Auto-generated tweet suggestions
• Character count for each tweet
• Direct Twitter posting integration

Save & Management

• Save tweets for later use
• Edit saved tweets with dynamic text area
• Delete unwanted saved tweets
• Persistent storage with Supabase

Retro UI/UX

• DOS-style interface with ASCII art
• Retro sound effects for actions:
  • Tweet generation
  • Saving tweets
  • Editing completion
  • Tweet deletion
• Blinking cursor
• Collapsible sidebar for saved tweets

Keyboard Shortcuts

• Ctrl+Enter - Save changes while editing
• Esc - Cancel editing
• ? - Toggle keyboard shortcuts help

Responsive Design

• Mobile-friendly layout
• Adaptive sidebar behavior
• Responsive text sizing
• Touch-optimized buttons

Setup

1. Clone the repository:

git clone https://github.com/your-username/remixer.git
cd remixer

2. Install dependencies:

npm install

3. Create a Supabase project and set up the database:
   • Create a new project at Supabase
   • Run the following SQL in Supabase SQL editor:

create table saved_tweets (
  id bigint generated by default as identity primary key,
  content text not null,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null
);

-- Enable Row Level Security (RLS)
alter table saved_tweets enable row level security;

-- Create a policy that allows all operations
create policy "Allow anonymous access" on saved_tweets for all using (true);

4. Create a .env file with your credentials:

VITE_API_URL=http://localhost:3001
VITE_SUPABASE_URL=your-project-url
VITE_SUPABASE_ANON_KEY=your-anon-key

5. Start the development server:

# Terminal 1 - Frontend
npm run dev

# Terminal 2 - Backend
node server.js

Technologies Used

• React
• Vite
• Tailwind CSS
• Supabase
• Web Audio API
• Node.js

License

MIT