Multi-Session Web Clipboard

A modern web application that syncs clipboard content across multiple devices in real-time. Built with Next.js, TypeScript, and Tailwind CSS.

✨ Features

• 🔄 Real-time synchronization - Content syncs instantly across all connected devices
• 📱 Multi-device support - Works on desktop, tablet, and mobile devices
• 🎨 Rich text editor - Built with TipTap for rich text formatting
• 🎯 Modern UI - Clean, responsive design with Tailwind CSS
• 🔌 Socket.io integration - WebSocket-based real-time communication
• 📋 Clipboard history - View and manage previous clipboard items
• 🔍 Device management - See all connected devices and their status

🛠️ Tech Stack

• Frontend: Next.js 14, React 18, TypeScript
• Styling: Tailwind CSS
• Real-time: Socket.io
• Rich Text: TipTap editor
• State Management: React hooks

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/damianczer/Multi-Session-Web-Clipboard.git
cd Multi-Session-Web-Clipboard

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

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

Environment Variables

Create a .env.local file:

NEXT_PUBLIC_SERVER_URL=http://localhost:3001

📁 Project Structure

src/
├── app/                  # Next.js App Router
│   ├── layout.tsx       # Root layout
│   └── page.tsx         # Home page
├── components/          # React components
│   ├── ui/              # Reusable UI components
│   ├── editor/          # Rich text editor
│   ├── clipboard/       # Clipboard-related components
│   └── devices/         # Device management components
├── hooks/               # Custom React hooks
├── lib/                 # Utility functions
├── server/              # Socket.io server code
├── styles/              # Global styles
└── types/               # TypeScript type definitions

🎯 How It Works

1. Open the app on multiple devices (computer, phone, tablet)
2. Add content using the rich text editor on any device
3. Content syncs instantly across all connected devices
4. Copy items to your local clipboard with one click
5. View device status and manage clipboard history

🔧 Development

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run type-check - Run TypeScript type checking

📦 Deployment

The app can be deployed to Vercel, Netlify, or any platform that supports Next.js.

For Socket.io server, you'll need to deploy it separately (e.g., Railway, Heroku, DigitalOcean).

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js - React framework
• Tailwind CSS - Utility-first CSS framework
• Socket.io - Real-time communication
• TipTap - Rich text editor