first commit

.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+apps/*/node_modules
+.git
+uploads
+*.local
+.pnpm-store
+**/.next

.gitignore

@@ -0,0 +1,66 @@
+# === personal ===
+deploy.sh
+uploads/*
+
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+.pnpm-store/
+
+# Testing
+coverage
+.nyc_output
+
+# Build outputs
+dist
+build
+.next
+out
+.nuxt
+.output
+.cache
+.turbo
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Debug logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor directories and files
+.idea
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.DS_Store
+*.pem
+
+# Vercel
+.vercel
+
+# TypeScript
+*.tsbuildinfo
+next-env.d.ts
+
+# Redis
+dump.rdb
+*.rdb
+
+# Misc
+.DS_Store
+*.pem
+.eslintcache

Dockerfile

@@ -0,0 +1,40 @@
+FROM node:20-bookworm
+
+# Install runtime dependencies for the Space: nginx for proxying websockets and redis-server for storage
+RUN apt-get update \ 
+  && apt-get install -y --no-install-recommends nginx redis-server gettext-base \ 
+  && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Enable pnpm
+ENV PNPM_HOME=/root/.local/share/pnpm
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable && corepack prepare pnpm@10.11.0 --activate
+
+# Copy manifests first for better caching
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+COPY apps/backend/package.json apps/backend/pnpm-lock.yaml ./apps/backend/
+COPY apps/frontend/package.json apps/frontend/pnpm-lock.yaml ./apps/frontend/
+
+# Install dependencies for all workspaces
+RUN pnpm install --frozen-lockfile
+
+# Copy the rest of the source
+COPY . .
+
+# Build the applications with sensible defaults for local communication
+ENV NODE_ENV=production \
+    DOCKER_BACKEND_URL=http://127.0.0.1:3001 \
+    NEXT_PUBLIC_URL=http://127.0.0.1:7860 \
+    PUBLIC_SOCKET_URL=
+
+RUN pnpm --filter @myclipboard.online/backend build \
+  && pnpm --filter @myclipboard.online/frontend build
+
+# Clean up nginx defaults
+RUN rm -f /etc/nginx/sites-enabled/default /etc/nginx/sites-available/default || true
+
+EXPOSE 7860
+
+CMD ["bash", "deploy/hf/start.sh"]

README.md

@@ -1,10 +1,75 @@
----
-title: Clip
-emoji: 👀
-colorFrom: indigo
-colorTo: purple
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# MyClipboard.online
+
+<p>
+  <img src="https://myclipboard.online/logo.png" alt="MyClipboard.online Logo" width="100">
+</p>
+
+A real-time shared clipboard application that allows users to easily share text snippets and files across devices.
+
+**Live Demo**: [https://myclipboard.online](https://myclipboard.online)
+
+## 🚀 Features
+
+- **Real-time Synchronization**: All clipboard entries are instantly synced across all connected devices
+- **Room-based Sharing**: Create or join rooms with simple 4-character codes
+- **Password Protection**: Optionally secure your clipboard rooms with passwords
+- **File Sharing**: Upload and share files up to 10MB in size
+- **Expiration**: Clipboards automatically expire after 24 hours of inactivity
+- **User-friendly Interface**: Clean, responsive design that works on all devices
+- **No Registration Required**: Start sharing instantly without creating an account
+
+## 🚀 Installation
+
+Currently only docker is supported.
+
+- Clone the repository
+```bash
+git clone git@github.com:bilodev7/myclipboard.online.git
+
+cd myclipboard.online
+```
+
+- Start Development Server
+```bash
+docker compose up
+```
+
+- Start Production Server
+```bash
+docker compose -f docker-compose.prod.yml up
+```
+
+## 🚀 Deploying to Hugging Face Spaces
+
+The repository includes a `Dockerfile` tailored for the **Container** runtime in Hugging Face Spaces. It builds both the Next.js frontend and the NestJS backend, bundles an internal Redis instance, and uses Nginx to proxy Socket.IO traffic on the public port.
+
+1. Create a new **Container Space** and select this repository as the source.
+2. No custom `run` command is required—the Space will execute `deploy/hf/start.sh` defined in the Dockerfile.
+3. Optional environment variables (set them in **Settings → Variables and secrets** in your Space):
+   - `ADMIN_TOKEN` — token for the admin dashboard (defaults to `admin-token`).
+   - `PUBLIC_SOCKET_URL` — override the default of using the current origin for WebSocket connections.
+   - `REDIS_HOST`, `REDIS_PORT`, `REDIS_PASSWORD`, or `REDIS_URL` — point the app at an external Redis instance. When these are set, the Space skips starting the in-container Redis and will wait for the provided endpoint to be ready before launching the app.
+   - Example external Redis configuration (Zeabur):
+
+```
+REDIS_HOST=<your-zeabur-host>
+REDIS_PORT=<your-port>
+REDIS_PASSWORD=<your-password>
+ADMIN_TOKEN=<your-admin-token>
+```
+
+4. Files uploaded through the app are stored inside the Space container; if the Space restarts, uploads are cleared. For persistence, mount external storage.
+
+
+## 🛠️ Admin management
+
+An admin surface is available to inspect and manage clipboards.
+
+- **Authentication**: backend admin routes require the `ADMIN_TOKEN` environment variable (defaults to `admin-token` if unset). Supply the token via the `x-admin-token` header or a `Bearer` token.
+- **API endpoints**:
+  - `GET /admin/clipboards` — list clipboards with entry/file counts, password flag, and TTL.
+  - `GET /admin/clipboards/:roomCode` — fetch clipboard details including files and TTL.
+  - `POST /admin/clipboards/:roomCode/password` — set or clear a room password with `{ "password": "new" }` or `{ "password": null }`.
+  - `POST /admin/clipboards/:roomCode/ttl` — set or clear expiration in seconds with `{ "ttl": 3600 }` or `{ "ttl": null }`.
+  - `DELETE /admin/clipboards/:roomCode` — delete a clipboard and its files.
+- **Admin UI**: visit `/admin` in the frontend, enter the admin token once, then browse clipboards and perform updates from the dashboard and detail pages.

apps/backend/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@myclipboard.online/backend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "nest build",
+    "format": "prettier --write \"src/**/*.ts\"",
+    "start": "nest start",
+    "dev": "nest start --watch",
+    "start:debug": "nest start --debug --watch",
+    "start:prod": "node dist/main",
+    "lint": "eslint \"{src,apps,libs}/**/*.ts\" --fix"
+  },
+  "dependencies": {
+    "@nestjs/common": "^10.2.7",
+    "@nestjs/core": "^10.2.7",
+    "@nestjs/platform-express": "^10.2.7",
+    "@nestjs/platform-socket.io": "^10.2.7",
+    "@nestjs/websockets": "^10.2.7",
+    "@types/mime-types": "^2.1.4",
+    "ioredis": "^5.3.2",
+    "mime-types": "^3.0.1",
+    "multer": "1.4.5-lts.2",
+    "redis": "^4.6.10",
+    "reflect-metadata": "^0.1.13",
+    "rxjs": "^7.8.1",
+    "socket.io": "^4.8.1",
+    "uuid": "^9.0.1"
+  },
+  "devDependencies": {
+    "@nestjs/cli": "^10.2.1",
+    "@nestjs/schematics": "^10.0.3",
+    "@types/express": "^4.17.20",
+    "@types/multer": "^1.4.9",
+    "@types/node": "^20.8.9",
+    "@types/uuid": "^9.0.6",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
+    "eslint": "^8.52.0",
+    "prettier": "^3.0.3",
+    "source-map-support": "^0.5.21",
+    "ts-loader": "^9.5.0",
+    "ts-node": "^10.9.1",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "^5.2.2"
+  }
+}

apps/backend/src/admin/admin.controller.ts

@@ -0,0 +1,41 @@
+import { Body, Controller, Delete, Get, Param, Post, UseGuards } from '@nestjs/common';
+import { AdminService } from './admin.service';
+import { AdminAuthGuard } from './admin.guard';
+
+@Controller('admin')
+@UseGuards(AdminAuthGuard)
+export class AdminController {
+  constructor(private readonly adminService: AdminService) { }
+
+  @Get('clipboards')
+  listClipboards() {
+    return this.adminService.listClipboards();
+  }
+
+  @Get('clipboards/:roomCode')
+  getClipboard(@Param('roomCode') roomCode: string) {
+    return this.adminService.getClipboard(roomCode);
+  }
+
+  @Post('clipboards/:roomCode/password')
+  updatePassword(
+    @Param('roomCode') roomCode: string,
+    @Body() body: { password?: string | null },
+  ) {
+    return this.adminService.setPassword(roomCode, body.password);
+  }
+
+  @Post('clipboards/:roomCode/ttl')
+  updateTTL(
+    @Param('roomCode') roomCode: string,
+    @Body() body: { ttl?: number | null },
+  ) {
+    const ttl = body.ttl === null || body.ttl === undefined ? null : Number(body.ttl);
+    return this.adminService.setTTL(roomCode, isNaN(ttl) ? null : ttl);
+  }
+
+  @Delete('clipboards/:roomCode')
+  deleteClipboard(@Param('roomCode') roomCode: string) {
+    return this.adminService.deleteClipboard(roomCode);
+  }
+}

apps/backend/src/admin/admin.guard.ts

@@ -0,0 +1,23 @@
+import { CanActivate, ExecutionContext, Injectable, UnauthorizedException } from '@nestjs/common';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class AdminAuthGuard implements CanActivate {
+  private readonly expectedToken = process.env.ADMIN_TOKEN || 'admin-token';
+
+  canActivate(
+    context: ExecutionContext,
+  ): boolean | Promise<boolean> | Observable<boolean> {
+    const request = context.switchToHttp().getRequest();
+    const headerToken = request.headers['x-admin-token'] || request.headers['authorization'];
+    const token = typeof headerToken === 'string' && headerToken.startsWith('Bearer ')
+      ? headerToken.slice(7)
+      : headerToken;
+
+    if (token === this.expectedToken) {
+      return true;
+    }
+
+    throw new UnauthorizedException('Invalid admin token');
+  }
+}

apps/backend/src/admin/admin.module.ts

@@ -0,0 +1,12 @@
+import { Module } from '@nestjs/common';
+import { AdminController } from './admin.controller';
+import { AdminService } from './admin.service';
+import { ClipboardModule } from '../clipboard/clipboard.module';
+import { AdminAuthGuard } from './admin.guard';
+
+@Module({
+  imports: [ClipboardModule],
+  controllers: [AdminController],
+  providers: [AdminService, AdminAuthGuard],
+})
+export class AdminModule {}

apps/backend/src/admin/admin.service.ts

@@ -0,0 +1,54 @@
+import { Injectable, Logger, NotFoundException } from '@nestjs/common';
+import { ClipboardService } from '../clipboard/clipboard.service';
+
+@Injectable()
+export class AdminService {
+  private readonly logger = new Logger(AdminService.name);
+
+  constructor(private readonly clipboardService: ClipboardService) { }
+
+  async listClipboards() {
+    return this.clipboardService.listClipboards();
+  }
+
+  async getClipboard(roomCode: string) {
+    const clipboard = await this.clipboardService.getClipboard(roomCode);
+    const ttl = await this.clipboardService.getClipboardTTL(roomCode);
+
+    if (!clipboard) {
+      throw new NotFoundException(`Clipboard ${roomCode} not found`);
+    }
+
+    return { ...clipboard, ttl };
+  }
+
+  async setPassword(roomCode: string, password?: string | null) {
+    const clipboard = await this.clipboardService.updateClipboardPassword(roomCode, password);
+    if (!clipboard) {
+      throw new NotFoundException(`Clipboard ${roomCode} not found`);
+    }
+
+    this.logger.log(`Updated password for clipboard ${roomCode}`);
+    return clipboard;
+  }
+
+  async setTTL(roomCode: string, ttlSeconds: number | null) {
+    const updated = await this.clipboardService.setClipboardExpiration(roomCode, ttlSeconds);
+    if (!updated) {
+      throw new NotFoundException(`Clipboard ${roomCode} not found`);
+    }
+
+    this.logger.log(`Updated TTL for clipboard ${roomCode} -> ${ttlSeconds ?? 'none'}`);
+    return { success: true, ttl: ttlSeconds };
+  }
+
+  async deleteClipboard(roomCode: string) {
+    const success = await this.clipboardService.deleteClipboard(roomCode);
+    if (!success) {
+      throw new NotFoundException(`Clipboard ${roomCode} not found`);
+    }
+
+    this.logger.log(`Deleted clipboard ${roomCode}`);
+    return { success };
+  }
+}

apps/backend/src/app.module.ts

@@ -0,0 +1,19 @@
+import { Module } from '@nestjs/common';
+import { ClipboardModule } from './clipboard/clipboard.module';
+import { RedisModule } from './common/redis/redis.module';
+import { FileModule } from './file/file.module';
+import { FilesystemModule } from './common/filesystem/filesystem.module';
+import { AdminModule } from './admin/admin.module';
+
+@Module({
+  imports: [
+    ClipboardModule,
+    RedisModule,
+    FileModule,
+    FilesystemModule,
+    AdminModule,
+  ],
+  controllers: [],
+  providers: [],
+})
+export class AppModule {}

apps/backend/src/clipboard/clipboard.controller.ts

@@ -0,0 +1,57 @@
+import { Controller, Post, Body, Get, Param, HttpException, HttpStatus } from '@nestjs/common';
+import { ClipboardService } from './clipboard.service';
+
+@Controller('clipboard')
+export class ClipboardController {
+  constructor(private readonly clipboardService: ClipboardService) { }
+
+  @Post('create')
+  async createClipboard(@Body() body: { password?: string }) {
+    try {
+      const roomCode = await this.clipboardService.createClipboard(body.password);
+      return { roomCode };
+    } catch (error) {
+      throw new HttpException('Failed to create clipboard', HttpStatus.INTERNAL_SERVER_ERROR);
+    }
+  }
+
+  @Get(':roomCode/exists')
+  async clipboardExists(@Param('roomCode') roomCode: string) {
+    const exists = await this.clipboardService.clipboardExists(roomCode);
+
+    if (!exists) {
+      return { exists: false, hasPassword: false };
+    }
+
+    // Get the clipboard to check if it has a password
+    const clipboard = await this.clipboardService.getClipboard(roomCode);
+    const hasPassword = clipboard?.password ? true : false;
+
+    return { exists, hasPassword };
+  }
+
+  @Post(':roomCode/verify')
+  async verifyPassword(
+    @Param('roomCode') roomCode: string,
+    @Body() body: { password: string },
+  ) {
+    const isValid = await this.clipboardService.verifyPassword(roomCode, body.password);
+
+    if (!isValid) {
+      throw new HttpException('Invalid password', HttpStatus.UNAUTHORIZED);
+    }
+
+    return { success: true };
+  }
+
+  @Post(':roomCode/refresh')
+  async refreshExpiration(@Param('roomCode') roomCode: string) {
+    const success = await this.clipboardService.refreshExpiration(roomCode);
+
+    if (!success) {
+      throw new HttpException('Clipboard not found', HttpStatus.NOT_FOUND);
+    }
+
+    return { success };
+  }
+}

apps/backend/src/clipboard/clipboard.gateway.ts

@@ -0,0 +1,287 @@
+import {
+  WebSocketGateway,
+  WebSocketServer,
+  SubscribeMessage,
+  OnGatewayConnection,
+  OnGatewayDisconnect,
+  OnGatewayInit,
+  ConnectedSocket,
+  MessageBody,
+} from '@nestjs/websockets';
+import { Server, Socket } from 'socket.io';
+import { Logger } from '@nestjs/common';
+import { ClipboardService, ClipboardEntry } from './clipboard.service';
+import { FileEntry } from '../file/file.service';
+
+interface RoomUserCount {
+  [roomCode: string]: number;
+}
+
+@WebSocketGateway({
+  cors: {
+    origin: '*',
+    methods: ['GET', 'POST'],
+    credentials: true
+  },
+  transports: ['websocket', 'polling'],
+  namespace: '/',
+})
+export class ClipboardGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
+  private readonly logger = new Logger(ClipboardGateway.name);
+  private roomUserCount: RoomUserCount = {};
+
+  @WebSocketServer()
+  server: Server;
+
+  constructor(private readonly clipboardService: ClipboardService) { }
+
+  afterInit(server: Server) {
+    this.logger.log('WebSocket Gateway initialized');
+  }
+
+  async handleConnection(client: Socket) {
+    const { roomCode } = client.handshake.query;
+
+    if (!roomCode || typeof roomCode !== 'string') {
+      this.logger.warn(`Client ${client.id} connected without a valid room code.`);
+      client.emit('error', { message: 'Room code is required.' });
+      client.disconnect();
+      return;
+    }
+
+    // Check if clipboard exists
+    const exists = await this.clipboardService.clipboardExists(roomCode);
+
+    if (!exists) {
+      this.logger.warn(`Client ${client.id} attempted to connect to non-existent room: ${roomCode}.`);
+      client.emit('error', { message: `Clipboard room ${roomCode} does not exist.` });
+      client.disconnect();
+      return;
+    }
+
+    this.logger.log(`Client connected: ${client.id} to room ${roomCode}`);
+    // Client will join the room upon receiving 'joinRoom' message from frontend
+  }
+
+  async handleDisconnect(client: Socket) {
+    const { roomCode } = client.handshake.query;
+
+    if (roomCode && typeof roomCode === 'string') {
+      // Remove client from room
+      client.leave(roomCode);
+
+      // Update user count
+      if (this.roomUserCount[roomCode]) {
+        this.roomUserCount[roomCode]--;
+
+        // Broadcast updated user count
+        this.server.to(roomCode).emit('userCount', this.roomUserCount[roomCode]);
+      }
+
+      this.logger.log(`Client disconnected: ${client.id} from room ${roomCode}`);
+    }
+  }
+
+  @SubscribeMessage('joinRoom')
+  async handleJoinRoom(
+    @ConnectedSocket() client: Socket,
+    @MessageBody() data: { roomCode: string; clientId: string },
+  ) {
+    const { roomCode, clientId } = data;
+    this.logger.log(`Attempting to join room: ${roomCode}, ClientID: ${clientId}, SocketID: ${client.id}`);
+
+    // Ensure client is connecting to the room specified in handshake
+    const handshakeRoomCode = client.handshake.query.roomCode;
+    if (handshakeRoomCode !== roomCode) {
+      this.logger.warn(`Client ${client.id} (clientId: ${clientId}) room mismatch. Handshake: ${handshakeRoomCode}, JoinRequest: ${roomCode}.`);
+      client.emit('error', { message: 'Room code mismatch. Please refresh.' });
+      client.disconnect(); // Disconnecting on critical mismatch
+      return;
+    }
+
+    this.logger.log(`Fetching clipboard for room ${roomCode}, ClientID: ${clientId}`);
+    const clipboard = await this.clipboardService.getClipboard(roomCode);
+
+    if (!clipboard) {
+      this.logger.warn(`Clipboard ${roomCode} not found for ClientID: ${clientId} during joinRoom.`);
+      client.emit('error', { message: `Clipboard ${roomCode} not found or has expired.` });
+      // Not disconnecting, client might go home or retry based on this error.
+      return;
+    }
+
+    this.logger.log(`Successfully fetched clipboard for room ${roomCode}, ClientID: ${clientId}. Joining socket to room.`);
+    client.join(roomCode);
+
+    if (!this.roomUserCount[roomCode]) {
+      this.roomUserCount[roomCode] = 0;
+    }
+    this.roomUserCount[roomCode]++;
+    this.logger.log(`User count for room ${roomCode} is now ${this.roomUserCount[roomCode]}.`);
+
+    const expiresIn = await this.clipboardService.getExpirationTime(roomCode);
+    this.logger.log(`Expiration for room ${roomCode} is ${expiresIn}. Emitting clipboardData to ClientID: ${clientId}.`);
+
+    client.emit('clipboardData', {
+      entries: clipboard.entries,
+      files: clipboard.files || [], // Include files array
+      connectedUsers: this.roomUserCount[roomCode],
+      expiresIn,
+    });
+
+    this.logger.log(`Emitting userCount to room ${roomCode}.`);
+    this.server.to(roomCode).emit('userCount', this.roomUserCount[roomCode]);
+
+    this.logger.log(`Client ${clientId} (SocketID: ${client.id}) successfully joined room ${roomCode}`);
+  }
+
+  @SubscribeMessage('addEntry')
+  async handleAddEntry(
+    @ConnectedSocket() client: Socket,
+    @MessageBody() data: { roomCode: string; content: string; clientId: string },
+  ) {
+    const { roomCode, content, clientId } = data;
+
+    // Verify client is in the correct room
+    if (!client.rooms.has(roomCode)) {
+      this.logger.warn(`Client ${client.id} (clientId: ${clientId}) attempted to add entry to ${roomCode} without being in it.`);
+      client.emit('error', { message: 'Not authorized for this room.' });
+      return;
+    }
+
+    this.logger.log(`Adding entry to room ${roomCode} from client ${clientId}`);
+
+    // Get all sockets in the room to verify room membership
+    const socketsInRoom = await this.server.in(roomCode).fetchSockets();
+    this.logger.log(`Number of clients in room ${roomCode}: ${socketsInRoom.length}`);
+
+    // Add entry to clipboard
+    const entry = await this.clipboardService.addEntry(roomCode, content, clientId);
+
+    if (!entry) {
+      this.logger.error(`Failed to add entry to room ${roomCode}`);
+      client.emit('error', { message: 'Failed to add entry' });
+      return;
+    }
+
+    // Broadcast new entry to all clients in the room
+    this.logger.log(`Broadcasting new entry to room ${roomCode}`);
+    this.server.to(roomCode).emit('newEntry', entry);
+
+    // Refresh expiration
+    await this.clipboardService.refreshExpiration(roomCode);
+
+    // Update expiration time
+    const expiresIn = await this.clipboardService.getExpirationTime(roomCode);
+    this.server.to(roomCode).emit('expirationUpdate', expiresIn);
+
+    this.logger.log(`New entry added to room ${roomCode}`);
+  }
+
+  @SubscribeMessage('deleteEntry')
+  async handleDeleteEntry(
+    @ConnectedSocket() client: Socket,
+    @MessageBody() data: { roomCode: string; entryId: string; clientId: string },
+  ) {
+    const { roomCode, entryId, clientId } = data;
+
+    // Verify client is in the correct room
+    if (!client.rooms.has(roomCode)) {
+      this.logger.warn(`Client ${client.id} (clientId: ${clientId}) attempted to delete entry from ${roomCode} without being in it.`);
+      client.emit('error', { message: 'Not authorized for this room.' });
+      return;
+    }
+
+    // Delete entry from clipboard
+    const success = await this.clipboardService.deleteEntry(roomCode, entryId);
+
+    if (!success) {
+      client.emit('error', { message: 'Failed to delete entry' });
+      return;
+    }
+
+    // Broadcast deleted entry to all clients in the room
+    this.server.to(roomCode).emit('deleteEntry', entryId);
+
+    // Refresh expiration
+    await this.clipboardService.refreshExpiration(roomCode);
+
+    this.logger.log(`Entry ${entryId} deleted from room ${roomCode}`);
+  }
+
+  @SubscribeMessage('clearClipboard')
+  async handleClearClipboard(
+    @ConnectedSocket() client: Socket,
+    @MessageBody() data: { roomCode: string; clientId: string },
+  ) {
+    const { roomCode, clientId } = data;
+
+    // Verify client is in the correct room
+    if (!client.rooms.has(roomCode)) {
+      this.logger.warn(`Client ${client.id} (clientId: ${clientId}) attempted to clear clipboard ${roomCode} without being in it.`);
+      client.emit('error', { message: 'Not authorized for this room.' });
+      return;
+    }
+
+    // Clear clipboard
+    const success = await this.clipboardService.clearClipboard(roomCode);
+
+    if (!success) {
+      client.emit('error', { message: 'Failed to clear clipboard' });
+      return;
+    }
+
+    // Broadcast clear event to all clients in the room
+    this.server.to(roomCode).emit('clipboardData', {
+      entries: [],
+      connectedUsers: this.roomUserCount[roomCode],
+    });
+
+    // Refresh expiration
+    await this.clipboardService.refreshExpiration(roomCode);
+
+    this.logger.log(`Clipboard ${roomCode} cleared by ${clientId}`);
+  }
+
+  @SubscribeMessage('fileUploaded')
+  async handleFileUploaded(
+    @ConnectedSocket() client: Socket,
+    @MessageBody() data: { roomCode: string; fileEntry: FileEntry; clientId: string },
+  ) {
+    const { roomCode, fileEntry, clientId } = data;
+
+    // Verify client is in the correct room
+    if (!client.rooms.has(roomCode)) {
+      this.logger.warn(`Client ${client.id} (clientId: ${clientId}) attempted to notify about file upload in ${roomCode} without being in it.`);
+      client.emit('error', { message: 'Not authorized for this room.' });
+      return;
+    }
+
+    // Broadcast file upload to all clients in the room
+    this.server.to(roomCode).emit('fileUploaded', fileEntry);
+
+    // Refresh expiration
+    await this.clipboardService.refreshExpiration(roomCode);
+
+    this.logger.log(`File ${fileEntry.id} uploaded to room ${roomCode}`);
+  }
+
+  @SubscribeMessage('deleteFile')
+  async handleDeleteFile(
+    @ConnectedSocket() client: Socket,
+    @MessageBody() data: { roomCode: string; fileId: string; clientId: string },
+  ) {
+    const { roomCode, fileId, clientId } = data;
+
+    // Verify client is in the correct room
+    if (!client.rooms.has(roomCode)) {
+      this.logger.warn(`Client ${client.id} (clientId: ${clientId}) attempted to delete file from ${roomCode} without being in it.`);
+      client.emit('error', { message: 'Not authorized for this room.' });
+      return;
+    }
+
+    // Broadcast file deletion to all clients in the room
+    this.server.to(roomCode).emit('fileDeleted', fileId);
+
+    this.logger.log(`File ${fileId} deleted from room ${roomCode}`);
+  }
+}

apps/backend/src/clipboard/clipboard.module.ts

@@ -0,0 +1,13 @@
+import { Module } from '@nestjs/common';
+import { ClipboardService } from './clipboard.service';
+import { ClipboardGateway } from './clipboard.gateway';
+import { ClipboardController } from './clipboard.controller';
+import { FilesystemModule } from '../common/filesystem/filesystem.module';
+
+@Module({
+  imports: [FilesystemModule],
+  providers: [ClipboardService, ClipboardGateway],
+  controllers: [ClipboardController],
+  exports: [ClipboardService],
+})
+export class ClipboardModule {}

apps/backend/src/clipboard/clipboard.service.ts

@@ -0,0 +1,386 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { RedisService } from '../common/redis/redis.service';
+import { FilesystemService } from '../common/filesystem/filesystem.service';
+import { v4 as uuidv4 } from 'uuid';
+import { FileEntry } from '../file/file.service';
+
+export interface ClipboardEntry {
+  id: string;
+  content: string;
+  createdAt: string;
+  createdBy: string;
+}
+
+export interface Clipboard {
+  id: string;
+  entries: ClipboardEntry[];
+  files?: FileEntry[];
+  password?: string;
+  createdAt: string;
+  lastActivity: string;
+}
+
+@Injectable()
+export class ClipboardService {
+  private readonly logger = new Logger(ClipboardService.name);
+  private readonly CLIPBOARD_PREFIX = 'clipboard:';
+  private readonly CLIPBOARD_INDEX_KEY = 'clipboard:index';
+
+  constructor(
+    private readonly redisService: RedisService,
+    private readonly filesystemService: FilesystemService,
+  ) {}
+
+  /**
+   * Generate a new room code for a clipboard
+   */
+  generateRoomCode(): string {
+    // Generate a 4-character alphanumeric code
+    return Math.random().toString(36).substring(2, 6).toUpperCase();
+  }
+
+  /**
+   * Create a new clipboard
+   */
+  async createClipboard(password?: string): Promise<string> {
+    let roomCode = this.generateRoomCode();
+    let exists = await this.clipboardExists(roomCode);
+    
+    // Ensure we generate a unique room code
+    while (exists) {
+      roomCode = this.generateRoomCode();
+      exists = await this.clipboardExists(roomCode);
+    }
+    
+    const now = new Date().toISOString();
+    const clipboard: Clipboard = {
+      id: roomCode,
+      entries: [],
+      password,
+      createdAt: now,
+      lastActivity: now,
+    };
+
+    await this.saveClipboard(roomCode, clipboard);
+    await this.addClipboardToIndex(roomCode);
+    return roomCode;
+  }
+
+  /**
+   * Create a new clipboard with a specific room code
+   */
+  async createClipboardWithCode(roomCode: string, password?: string): Promise<boolean> {
+    // Check if clipboard already exists
+    const exists = await this.clipboardExists(roomCode);
+    if (exists) {
+      return false; // Cannot create a clipboard that already exists
+    }
+    
+    const now = new Date().toISOString();
+    const clipboard: Clipboard = {
+      id: roomCode,
+      entries: [],
+      password,
+      createdAt: now,
+      lastActivity: now,
+    };
+
+    await this.saveClipboard(roomCode, clipboard);
+    await this.addClipboardToIndex(roomCode);
+    return true;
+  }
+
+  /**
+   * Get a clipboard by room code
+   */
+  async getClipboard(roomCode: string): Promise<Clipboard | null> {
+    const key = this.getClipboardKey(roomCode);
+    const data = await this.redisService.get(key);
+    
+    if (!data) {
+      return null;
+    }
+    
+    return JSON.parse(data);
+  }
+
+  /**
+   * Check if a clipboard exists
+   */
+  async clipboardExists(roomCode: string): Promise<boolean> {
+    const key = this.getClipboardKey(roomCode);
+    return this.redisService.exists(key);
+  }
+
+  /**
+   * Verify clipboard password
+   */
+  async verifyPassword(roomCode: string, password: string): Promise<boolean> {
+    const clipboard = await this.getClipboard(roomCode);
+    
+    if (!clipboard) {
+      return false;
+    }
+    
+    // If no password is set, or passwords match
+    return !clipboard.password || clipboard.password === password;
+  }
+
+  /**
+   * Add an entry to a clipboard
+   */
+  async addEntry(roomCode: string, content: string, clientId: string): Promise<ClipboardEntry | null> {
+    const clipboard = await this.getClipboard(roomCode);
+    
+    if (!clipboard) {
+      return null;
+    }
+    
+    const entry: ClipboardEntry = {
+      id: uuidv4(),
+      content,
+      createdAt: new Date().toISOString(),
+      createdBy: clientId,
+    };
+    
+    clipboard.entries.unshift(entry); // Add to the beginning of the array
+    clipboard.lastActivity = new Date().toISOString();
+    
+    await this.saveClipboard(roomCode, clipboard);
+    return entry;
+  }
+
+  /**
+   * Delete an entry from a clipboard
+   */
+  async deleteEntry(roomCode: string, entryId: string): Promise<boolean> {
+    const clipboard = await this.getClipboard(roomCode);
+    
+    if (!clipboard) {
+      return false;
+    }
+    
+    const initialLength = clipboard.entries.length;
+    clipboard.entries = clipboard.entries.filter(entry => entry.id !== entryId);
+    
+    if (clipboard.entries.length === initialLength) {
+      return false; // No entry was deleted
+    }
+    
+    clipboard.lastActivity = new Date().toISOString();
+    await this.saveClipboard(roomCode, clipboard);
+    return true;
+  }
+
+  /**
+   * Clear all entries from a clipboard
+   */
+  async clearClipboard(roomCode: string): Promise<boolean> {
+    const clipboard = await this.getClipboard(roomCode);
+    
+    if (!clipboard) {
+      return false;
+    }
+    
+    clipboard.entries = [];
+    clipboard.lastActivity = new Date().toISOString();
+    
+    await this.saveClipboard(roomCode, clipboard);
+    return true;
+  }
+
+  /**
+   * Get the time until clipboard expiration
+   */
+  async getExpirationTime(roomCode: string): Promise<string | null> {
+    const key = this.getClipboardKey(roomCode);
+    const ttl = await this.redisService.getTTL(key);
+
+    if (ttl <= 0) {
+      return null;
+    }
+    
+    // Format the expiration time
+    if (ttl < 60 * 60) {
+      // Less than an hour
+      const minutes = Math.ceil(ttl / 60);
+      return `${minutes} ${minutes === 1 ? 'minute' : 'minutes'}`;
+    } else {
+      // Hours
+      const hours = Math.ceil(ttl / (60 * 60));
+      return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
+    }
+  }
+
+  async getClipboardTTL(roomCode: string): Promise<number | null> {
+    const key = this.getClipboardKey(roomCode);
+    const ttl = await this.redisService.getTTL(key);
+
+    if (ttl <= 0) {
+      return null;
+    }
+
+    return ttl;
+  }
+
+  /**
+   * Refresh the expiration time for a clipboard
+   */
+  async refreshExpiration(roomCode: string): Promise<boolean> {
+    const key = this.getClipboardKey(roomCode);
+    const exists = await this.redisService.exists(key);
+    
+    if (!exists) {
+      return false;
+    }
+    
+    await this.redisService.refreshExpiry(key, null);
+    return true;
+  }
+
+  async setClipboardExpiration(
+    roomCode: string,
+    expiryInSeconds: number | null,
+  ): Promise<boolean> {
+    const key = this.getClipboardKey(roomCode);
+    const exists = await this.redisService.exists(key);
+
+    if (!exists) {
+      return false;
+    }
+
+    await this.redisService.refreshExpiry(key, expiryInSeconds);
+    return true;
+  }
+
+  /**
+   * Save a clipboard to Redis
+   */
+  async saveClipboard(
+    roomCode: string,
+    clipboard: Clipboard,
+    expiryInSeconds?: number | null,
+  ): Promise<void> {
+    const key = this.getClipboardKey(roomCode);
+    let ttlToUse: number | null = null;
+
+    if (expiryInSeconds !== undefined) {
+      ttlToUse = expiryInSeconds;
+    } else {
+      const currentTtl = await this.redisService.getTTL(key);
+      ttlToUse = currentTtl > 0 ? currentTtl : null;
+    }
+
+    await this.redisService.setWithExpiry(
+      key,
+      JSON.stringify(clipboard),
+      ttlToUse,
+    );
+  }
+
+  /**
+   * Get the Redis key for a clipboard
+   */
+  private getClipboardKey(roomCode: string): string {
+    return `${this.CLIPBOARD_PREFIX}${roomCode}`;
+  }
+
+  private async addClipboardToIndex(roomCode: string): Promise<void> {
+    await this.redisService.addToSet(this.CLIPBOARD_INDEX_KEY, roomCode);
+  }
+
+  private async removeClipboardFromIndex(roomCode: string): Promise<void> {
+    await this.redisService.removeFromSet(this.CLIPBOARD_INDEX_KEY, roomCode);
+  }
+
+  private async getIndexedClipboards(): Promise<string[]> {
+    const indexed = await this.redisService.getSetMembers(this.CLIPBOARD_INDEX_KEY);
+
+    if (indexed.length > 0) {
+      return indexed.map(id => this.getClipboardKey(id));
+    }
+
+    const scanned = await this.redisService.scanKeys(`${this.CLIPBOARD_PREFIX}*`);
+
+    for (const key of scanned) {
+      const id = key.replace(this.CLIPBOARD_PREFIX, '');
+      await this.addClipboardToIndex(id);
+    }
+
+    return scanned;
+  }
+
+  async listClipboards(): Promise<{
+    id: string;
+    createdAt: string;
+    lastActivity: string;
+    hasPassword: boolean;
+    entryCount: number;
+    fileCount: number;
+    ttl: number | null;
+  }[]> {
+    const keys = await this.getIndexedClipboards();
+
+    if (!keys.length) {
+      return [];
+    }
+
+    const values = await this.redisService.mget(keys);
+    const summaries = [];
+
+    for (let i = 0; i < keys.length; i++) {
+      const value = values[i];
+      if (!value) {
+        continue;
+      }
+
+      try {
+        const clipboard: Clipboard = JSON.parse(value);
+        const ttl = await this.getClipboardTTL(clipboard.id);
+        summaries.push({
+          id: clipboard.id,
+          createdAt: clipboard.createdAt,
+          lastActivity: clipboard.lastActivity,
+          hasPassword: Boolean(clipboard.password),
+          entryCount: clipboard.entries?.length || 0,
+          fileCount: clipboard.files?.length || 0,
+          ttl,
+        });
+      } catch (error) {
+        this.logger.error(`Failed to parse clipboard data for key ${keys[i]}`);
+      }
+    }
+
+    return summaries.sort((a, b) => new Date(b.lastActivity).getTime() - new Date(a.lastActivity).getTime());
+  }
+
+  async updateClipboardPassword(roomCode: string, password?: string | null): Promise<Clipboard | null> {
+    const clipboard = await this.getClipboard(roomCode);
+
+    if (!clipboard) {
+      return null;
+    }
+
+    clipboard.password = password || undefined;
+    clipboard.lastActivity = new Date().toISOString();
+
+    await this.saveClipboard(roomCode, clipboard);
+    return clipboard;
+  }
+
+  async deleteClipboard(roomCode: string): Promise<boolean> {
+    const clipboard = await this.getClipboard(roomCode);
+    const key = this.getClipboardKey(roomCode);
+
+    if (!clipboard) {
+      return false;
+    }
+
+    await this.redisService.delete(key);
+    await this.removeClipboardFromIndex(roomCode);
+
+    await this.filesystemService.deleteRoomFiles(roomCode);
+    this.logger.log(`Deleted clipboard ${roomCode}`);
+    return true;
+  }
+}

apps/backend/src/common/filesystem/filesystem.controller.ts

@@ -0,0 +1,43 @@
+import { Controller, Get, Param, Res, Req, NotFoundException } from '@nestjs/common';
+import { Request, Response } from 'express';
+import { FilesystemService } from './filesystem.service';
+import * as path from 'path';
+import * as mime from 'mime-types';
+
+@Controller('files')
+export class FilesystemController {
+  constructor(private readonly filesystemService: FilesystemService) {}
+
+  @Get(':roomCode/:fileName')
+  async serveFile(
+    @Param('roomCode') roomCode: string,
+    @Param('fileName') fileName: string,
+    @Req() req: Request,
+    @Res() res: Response,
+  ) {
+    try {
+      const fileBuffer = await this.filesystemService.getFile(roomCode, fileName);
+      
+      // Determine content type
+      const contentType = mime.lookup(fileName) || 'application/octet-stream';
+      
+      // Set appropriate headers
+      res.setHeader('Content-Type', contentType);
+      
+      // Get the original filename if provided in the query
+      const originalName = req.query.originalName ? decodeURIComponent(req.query.originalName.toString()) : fileName;
+      
+      // Check if the request has a 'download' query parameter
+      const downloadHeader = req.query.download === 'true' 
+        ? `attachment; filename="${originalName}"` 
+        : `inline; filename="${originalName}"`;
+      
+      res.setHeader('Content-Disposition', downloadHeader);
+      
+      // Send the file
+      return res.send(fileBuffer);
+    } catch (error) {
+      throw new NotFoundException('File not found');
+    }
+  }
+}

apps/backend/src/common/filesystem/filesystem.module.ts

@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+import { FilesystemService } from './filesystem.service';
+import { FilesystemController } from './filesystem.controller';
+
+@Module({
+  providers: [FilesystemService],
+  controllers: [FilesystemController],
+  exports: [FilesystemService],
+})
+export class FilesystemModule {}

apps/backend/src/common/filesystem/filesystem.service.ts

@@ -0,0 +1,82 @@
+import { Injectable, Logger } from '@nestjs/common';
+import * as fs from 'fs';
+import * as path from 'path';
+import { promisify } from 'util';
+
+const writeFileAsync = promisify(fs.writeFile);
+const readFileAsync = promisify(fs.readFile);
+const unlinkAsync = promisify(fs.unlink);
+const mkdirAsync = promisify(fs.mkdir);
+const existsAsync = promisify(fs.exists);
+
+@Injectable()
+export class FilesystemService {
+  private readonly logger = new Logger(FilesystemService.name);
+  private readonly uploadDir: string;
+
+  constructor() {
+    // Create uploads directory in the project root
+    this.uploadDir = process.env.UPLOAD_DIR || path.join(process.cwd(), 'uploads');
+    this.initUploadDir().catch(err => {
+      this.logger.error(`Failed to initialize upload directory: ${err.message}`);
+    });
+  }
+
+  private async initUploadDir(): Promise<void> {
+    if (!await existsAsync(this.uploadDir)) {
+      await mkdirAsync(this.uploadDir, { recursive: true });
+      this.logger.log(`Upload directory '${this.uploadDir}' created successfully`);
+    }
+  }
+
+  async uploadFile(file: Express.Multer.File, roomCode: string, fileName: string): Promise<string> {
+    // Create room directory if it doesn't exist
+    const roomDir = path.join(this.uploadDir, roomCode);
+    if (!await existsAsync(roomDir)) {
+      await mkdirAsync(roomDir, { recursive: true });
+    }
+
+    // Save file to disk
+    const filePath = path.join(roomDir, fileName);
+    await writeFileAsync(filePath, file.buffer);
+    
+    // Return the relative path to the file
+    return `/${roomCode}/${fileName}`;
+  }
+
+  async getFile(roomCode: string, fileName: string): Promise<Buffer> {
+    const filePath = path.join(this.uploadDir, roomCode, fileName);
+    return await readFileAsync(filePath);
+  }
+
+  async deleteFile(roomCode: string, fileName: string): Promise<boolean> {
+    try {
+      const filePath = path.join(this.uploadDir, roomCode, fileName);
+      await unlinkAsync(filePath);
+      return true;
+    } catch (error) {
+      this.logger.error(`Failed to delete file: ${error.message}`);
+      return false;
+    }
+  }
+
+  async deleteRoomFiles(roomCode: string): Promise<boolean> {
+    try {
+      const roomDir = path.join(this.uploadDir, roomCode);
+      if (await existsAsync(roomDir)) {
+        // Delete all files in the directory
+        const files = fs.readdirSync(roomDir);
+        for (const file of files) {
+          await unlinkAsync(path.join(roomDir, file));
+        }
+        
+        // Remove the directory itself
+        fs.rmdirSync(roomDir);
+      }
+      return true;
+    } catch (error) {
+      this.logger.error(`Failed to delete room files: ${error.message}`);
+      return false;
+    }
+  }
+}

apps/backend/src/common/filesystem/init-uploads.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+
+// Create uploads directory in the project root
+const uploadDir = process.env.UPLOAD_DIR || path.join(process.cwd(), 'uploads');
+
+if (!fs.existsSync(uploadDir)) {
+  fs.mkdirSync(uploadDir, { recursive: true });
+  console.log(`Upload directory '${uploadDir}' created successfully`);
+} else {
+  console.log(`Upload directory '${uploadDir}' already exists`);
+}

apps/backend/src/common/redis/redis.module.ts

@@ -0,0 +1,9 @@
+import { Module, Global } from '@nestjs/common';
+import { RedisService } from './redis.service';
+
+@Global()
+@Module({
+  providers: [RedisService],
+  exports: [RedisService],
+})
+export class RedisModule {}

apps/backend/src/common/redis/redis.service.ts

@@ -0,0 +1,125 @@
+import { Injectable, OnModuleInit, OnModuleDestroy, Logger } from '@nestjs/common';
+import { Redis } from 'ioredis';
+
+@Injectable()
+export class RedisService implements OnModuleInit, OnModuleDestroy {
+  private readonly logger = new Logger(RedisService.name);
+  private redisClient: Redis;
+
+  constructor() {
+    // Initialize Redis client
+    // Prefer REDIS_URL if provided, otherwise fall back to host/port/password envs
+    const redisUrl = process.env.REDIS_URL;
+
+    if (redisUrl) {
+      const url = new URL(redisUrl);
+
+      this.redisClient = new Redis({
+        host: url.hostname,
+        port: Number(url.port) || 6379,
+        password: url.password || process.env.REDIS_PASSWORD,
+        db: url.pathname ? Number(url.pathname.replace('/', '')) || 0 : 0,
+        ...(url.protocol === 'rediss:' ? { tls: {} } : {}),
+      });
+      return;
+    }
+
+    const redisHost = process.env.REDIS_HOST || 'localhost';
+    const redisPort = parseInt(process.env.REDIS_PORT || '6379', 10);
+
+    this.redisClient = new Redis({
+      host: redisHost,
+      port: redisPort,
+      password: process.env.REDIS_PASSWORD,
+    });
+  }
+
+  async onModuleInit() {
+    try {
+      await this.redisClient.ping();
+      this.logger.log('Successfully connected to Redis');
+    } catch (error) {
+      this.logger.error('Failed to connect to Redis', error);
+      throw error;
+    }
+  }
+
+  async onModuleDestroy() {
+    await this.redisClient.quit();
+    this.logger.log('Redis connection closed');
+  }
+
+  getClient(): Redis {
+    return this.redisClient;
+  }
+
+  // Helper methods for clipboard operations
+
+  async setWithExpiry(key: string, value: string, expiryInSeconds?: number | null): Promise<void> {
+    if (expiryInSeconds && expiryInSeconds > 0) {
+      await this.redisClient.set(key, value, 'EX', expiryInSeconds);
+      return;
+    }
+
+    await this.redisClient.set(key, value);
+  }
+
+  async get(key: string): Promise<string | null> {
+    return this.redisClient.get(key);
+  }
+
+  async delete(key: string): Promise<void> {
+    await this.redisClient.del(key);
+  }
+
+  async exists(key: string): Promise<boolean> {
+    const result = await this.redisClient.exists(key);
+    return result === 1;
+  }
+
+  async getTTL(key: string): Promise<number> {
+    return this.redisClient.ttl(key);
+  }
+
+  async refreshExpiry(key: string, expiryInSeconds?: number | null): Promise<void> {
+    if (expiryInSeconds && expiryInSeconds > 0) {
+      await this.redisClient.expire(key, expiryInSeconds);
+      return;
+    }
+
+    // Remove expiration to make the key persistent
+    await this.redisClient.persist(key);
+  }
+
+  async addToSet(key: string, value: string): Promise<void> {
+    await this.redisClient.sadd(key, value);
+  }
+
+  async removeFromSet(key: string, value: string): Promise<void> {
+    await this.redisClient.srem(key, value);
+  }
+
+  async getSetMembers(key: string): Promise<string[]> {
+    return this.redisClient.smembers(key);
+  }
+
+  async mget(keys: string[]): Promise<(string | null)[]> {
+    if (!keys.length) {
+      return [];
+    }
+    return this.redisClient.mget(...keys);
+  }
+
+  async scanKeys(pattern: string): Promise<string[]> {
+    const keys: string[] = [];
+    let cursor = '0';
+
+    do {
+      const [nextCursor, results] = await this.redisClient.scan(cursor, 'MATCH', pattern, 'COUNT', 100);
+      cursor = nextCursor;
+      keys.push(...results);
+    } while (cursor !== '0');
+
+    return keys;
+  }
+}

apps/backend/src/file/file.controller.ts

@@ -0,0 +1,93 @@
+import {
+  Controller,
+  Post,
+  Get,
+  Delete,
+  Param,
+  UploadedFile,
+  UseInterceptors,
+  Body,
+  Res,
+  MaxFileSizeValidator,
+  ParseFilePipe,
+  HttpStatus,
+  HttpException,
+} from '@nestjs/common';
+import { FileInterceptor } from '@nestjs/platform-express';
+import { Response } from 'express';
+import { FileService } from './file.service';
+
+@Controller('clipboard/:roomCode/files')
+export class FileController {
+  constructor(private readonly fileService: FileService) {}
+
+  @Post()
+  @UseInterceptors(FileInterceptor('file'))
+  async uploadFile(
+    @Param('roomCode') roomCode: string,
+    @UploadedFile(
+      new ParseFilePipe({
+        validators: [
+          new MaxFileSizeValidator({ maxSize: 10 * 1024 * 1024 }), // 10MB
+        ],
+      }),
+    )
+    file: Express.Multer.File,
+    @Body('clientId') clientId: string,
+  ) {
+    try {
+      const fileEntry = await this.fileService.uploadFile(
+        roomCode,
+        file,
+        clientId,
+      );
+      return fileEntry;
+    } catch (error) {
+      throw new HttpException(
+        error.message || 'Failed to upload file',
+        HttpStatus.INTERNAL_SERVER_ERROR,
+      );
+    }
+  }
+
+  @Get(':fileId')
+  async getFile(
+    @Param('roomCode') roomCode: string,
+    @Param('fileId') fileId: string,
+    @Res() res: Response,
+  ) {
+    try {
+      const fileData = await this.fileService.getFileData(roomCode, fileId);
+      const fileUrl = fileData.url;
+      
+      // If there's a filename parameter in the query, append it to the redirect URL
+      const originalFilename = res.req.query.filename;
+      const redirectUrl = originalFilename 
+        ? `${fileUrl}?download=true&originalName=${encodeURIComponent(originalFilename.toString())}` 
+        : fileUrl;
+      
+      return res.redirect(redirectUrl);
+    } catch (error) {
+      throw new HttpException(
+        error.message || 'Failed to get file',
+        HttpStatus.NOT_FOUND,
+      );
+    }
+  }
+
+  @Delete(':fileId')
+  async deleteFile(
+    @Param('roomCode') roomCode: string,
+    @Param('fileId') fileId: string,
+  ) {
+    try {
+      const success = await this.fileService.deleteFile(roomCode, fileId);
+      return { success };
+    } catch (error) {
+      throw new HttpException(
+        error.message || 'Failed to delete file',
+        HttpStatus.INTERNAL_SERVER_ERROR,
+      );
+    }
+  }
+}

apps/backend/src/file/file.module.ts

@@ -0,0 +1,12 @@
+import { Module } from '@nestjs/common';
+import { FileController } from './file.controller';
+import { FileService } from './file.service';
+import { FilesystemModule } from '../common/filesystem/filesystem.module';
+import { ClipboardModule } from '../clipboard/clipboard.module';
+
+@Module({
+  imports: [FilesystemModule, ClipboardModule],
+  controllers: [FileController],
+  providers: [FileService],
+})
+export class FileModule {}

apps/backend/src/file/file.service.ts

@@ -0,0 +1,118 @@
+import { Injectable, Logger, NotFoundException } from '@nestjs/common';
+import { FilesystemService } from '../common/filesystem/filesystem.service';
+import { ClipboardService } from '../clipboard/clipboard.service';
+import { v4 as uuidv4 } from 'uuid';
+
+export interface FileEntry {
+  id: string;
+  filename: string;
+  mimetype: string;
+  size: number;
+  storageKey: string;
+  createdAt: string;
+  createdBy: string;
+}
+
+@Injectable()
+export class FileService {
+  private readonly logger = new Logger(FileService.name);
+
+  constructor(
+    private readonly filesystemService: FilesystemService,
+    private readonly clipboardService: ClipboardService,
+  ) {}
+
+  async uploadFile(
+    roomCode: string,
+    file: Express.Multer.File,
+    clientId: string,
+  ): Promise<FileEntry> {
+    // Check if clipboard exists
+    const clipboard = await this.clipboardService.getClipboard(roomCode);
+    if (!clipboard) {
+      throw new NotFoundException(`Clipboard ${roomCode} not found`);
+    }
+
+    // Generate unique ID for file
+    const fileId = uuidv4();
+    const fileName = `${fileId}-${file.originalname}`;
+
+    // Upload file to filesystem
+    await this.filesystemService.uploadFile(file, roomCode, fileName);
+
+    // Create file entry
+    const fileEntry: FileEntry = {
+      id: fileId,
+      filename: file.originalname,
+      mimetype: file.mimetype,
+      size: file.size,
+      storageKey: `${roomCode}/${fileName}`,
+      createdAt: new Date().toISOString(),
+      createdBy: clientId,
+    };
+
+    // Add file to clipboard
+    if (!clipboard.files) {
+      clipboard.files = [];
+    }
+    clipboard.files.unshift(fileEntry);
+    clipboard.lastActivity = new Date().toISOString();
+
+    // Save updated clipboard
+    await this.clipboardService.saveClipboard(roomCode, clipboard);
+
+    return fileEntry;
+  }
+
+  async getFileUrl(roomCode: string, fileId: string): Promise<string> {
+    const fileData = await this.getFileData(roomCode, fileId);
+    return fileData.url;
+  }
+
+  async getFileData(roomCode: string, fileId: string): Promise<{ url: string; filename: string; fileEntry: FileEntry }> {
+    const clipboard = await this.clipboardService.getClipboard(roomCode);
+    if (!clipboard || !clipboard.files) {
+      throw new NotFoundException(`Clipboard ${roomCode} not found`);
+    }
+
+    const fileEntry = clipboard.files.find(file => file.id === fileId);
+    if (!fileEntry) {
+      throw new NotFoundException(`File ${fileId} not found`);
+    }
+
+    // Return the URL to the file controller with the correct API path
+    const [roomCodeFromPath, fileName] = fileEntry.storageKey.split('/');
+    return {
+      url: `/api/files/${roomCodeFromPath}/${fileName}`,
+      filename: fileEntry.filename,
+      fileEntry
+    };
+  }
+
+  async deleteFile(roomCode: string, fileId: string): Promise<boolean> {
+    const clipboard = await this.clipboardService.getClipboard(roomCode);
+    if (!clipboard || !clipboard.files) {
+      throw new NotFoundException(`Clipboard ${roomCode} not found`);
+    }
+
+    const fileIndex = clipboard.files.findIndex(file => file.id === fileId);
+    if (fileIndex === -1) {
+      throw new NotFoundException(`File ${fileId} not found`);
+    }
+
+    const fileEntry = clipboard.files[fileIndex];
+
+    // Delete file from filesystem
+    const [roomCodeFromPath, fileName] = fileEntry.storageKey.split('/');
+    await this.filesystemService.deleteFile(roomCodeFromPath, fileName);
+
+    // Remove file entry from clipboard
+    clipboard.files.splice(fileIndex, 1);
+    clipboard.lastActivity = new Date().toISOString();
+
+    // Save updated clipboard
+    await this.clipboardService.saveClipboard(roomCode, clipboard);
+
+    return true;
+  }
+}

apps/backend/src/main.ts

@@ -0,0 +1,50 @@
+import { NestFactory } from '@nestjs/core';
+import { AppModule } from './app.module';
+import { Logger } from '@nestjs/common';
+import { IoAdapter } from '@nestjs/platform-socket.io';
+import { NextFunction, Request } from 'express';
+
+class CustomIoAdapter extends IoAdapter {
+  createIOServer(port: number, options?: any): any {
+    const server = super.createIOServer(port, {
+      ...options,
+      cors: {
+        origin: '*',
+        methods: ['GET', 'POST'],
+        credentials: true,
+      },
+      allowEIO3: true,
+      transports: ['websocket', 'polling'],
+    });
+    return server;
+  }
+}
+
+async function bootstrap() {
+  const logger = new Logger('Bootstrap');
+  const app = await NestFactory.create(AppModule);
+
+  // Enable CORS for HTTP requests
+  app.enableCors({
+    origin: '*',
+    methods: ['GET', 'POST', 'DELETE', 'PUT', 'PATCH', 'OPTIONS'],
+    credentials: true,
+  });
+  app.use("*", (req: Request, _, next: NextFunction) => {
+    console.log(req.method, req.baseUrl)
+    next()
+  })
+
+  // Use custom adapter for WebSockets
+  app.useWebSocketAdapter(new CustomIoAdapter(app));
+
+  // Set global prefix for REST API
+  app.setGlobalPrefix('api');
+
+
+  const port = process.env.PORT || 3001;
+  await app.listen(port);
+  logger.log(`Application listening on port ${port}`);
+}
+
+bootstrap();

apps/backend/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "declaration": true,
+    "removeComments": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "target": "es2017",
+    "sourceMap": true,
+    "outDir": "./dist",
+    "baseUrl": "./",
+    "incremental": true,
+    "skipLibCheck": true,
+    "strictNullChecks": false,
+    "noImplicitAny": false,
+    "strictBindCallApply": false,
+    "forceConsistentCasingInFileNames": false,
+    "noFallthroughCasesInSwitch": false,
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}

apps/frontend/next.config.mjs

@@ -0,0 +1,19 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  env: {
+    NEXT_PUBLIC_URL: process.env.NEXT_PUBLIC_URL,
+    PUBLIC_SOCKET_URL: process.env.PUBLIC_SOCKET_URL
+  },
+  async rewrites() {
+    const backendUrl = process.env.DOCKER_BACKEND_URL || 'http://127.0.0.1:3001';
+    return [
+      {
+        source: '/api/:path*',
+        destination: `${backendUrl}/api/:path*` // Backend is co-located with the frontend in the Space image
+      },
+    ];
+  },
+};
+
+export default nextConfig;

apps/frontend/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@myclipboard.online/frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "axios": "^1.6.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.511.0",
+    "next": "^14.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-dropzone": "^14.3.8",
+    "react-otp-input": "^3.1.1",
+    "socket.io-client": "^4.7.2",
+    "tailwind-merge": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.8.9",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.52.0",
+    "eslint-config-next": "^14.0.0",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5",
+    "typescript": "^5.2.2"
+  }
+}

apps/frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/frontend/src/app/[roomCode]/components/ClipboardEntry.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { CopyCheck, CopyCheckIcon, CopyIcon } from 'lucide-react';
+import { useState } from 'react';
+
+export interface ClipboardEntryType {
+  id: string;
+  content: string;
+  createdAt: string;
+  createdBy: string;
+}
+
+interface ClipboardEntryProps {
+  entry: ClipboardEntryType;
+  onCopy: (content: string, id: string) => void;
+  onDelete: (id: string) => void;
+  isCopied: boolean;
+}
+
+export default function ClipboardEntry({ entry, onCopy, onDelete, isCopied }: ClipboardEntryProps) {
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleString();
+  };
+
+  return (
+    <div className="clipboard-entry group hover:border-primary/30 hover:shadow-glow-sm p-3 sm:p-4 rounded-lg border border-surface-hover bg-surface/50 backdrop-blur-sm transition-all duration-200">
+      <div className="flex justify-between items-center mb-2 sm:mb-3">
+        <div className="flex items-center space-x-2">
+          <button
+            onClick={() => onCopy(entry.content, entry.id)}
+            className="mr-auto flex items-center justify-center h-7 min-w-7 rounded-full bg-surface hover:bg-surface-hover border border-surface-hover text-text-primary hover:text-primary transition-colors"
+            title="Copy to clipboard"
+          >
+            {isCopied ? (
+              <div className='text-primary px-2'>COPIED</div>
+            ) : (
+              <CopyIcon className='size-4' />
+            )}
+          </button>
+          <div className="flex items-center text-text-secondary text-xs">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <span className="hidden xs:inline">{formatDate(entry.createdAt)}</span>
+            <span className="xs:hidden">{new Date(entry.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
+          </div>
+        </div>
+
+        <button
+          onClick={() => onDelete(entry.id)}
+          className="flex items-center justify-center w-7 h-7 rounded-full bg-surface hover:bg-red-500/10 border border-surface-hover text-text-primary hover:text-red-500 transition-colors"
+          title="Delete entry"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+          </svg>
+        </button>
+
+      </div>
+      <div className="clipboard-entry-content overflow-x-auto whitespace-pre-wrap break-words text-sm sm:text-base">
+        {entry.content}
+      </div>
+    </div>
+  );
+}

apps/frontend/src/app/[roomCode]/components/ClipboardEntryForm.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+
+interface ClipboardEntryFormProps {
+  onAddEntry: (content: string) => void;
+}
+
+export default function ClipboardEntryForm({ onAddEntry }: ClipboardEntryFormProps) {
+  const [newEntry, setNewEntry] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-resize textarea as content grows, but with a maximum height
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = 'auto';
+      const newHeight = Math.min(textarea.scrollHeight, 300); // Maximum height of 300px
+      textarea.style.height = `${newHeight}px`;
+    }
+  }, [newEntry]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!newEntry.trim()) return;
+
+    onAddEntry(newEntry);
+    setNewEntry('');
+
+    // Focus back on textarea after submit
+    setTimeout(() => {
+      if (textareaRef.current) {
+        textareaRef.current.focus();
+      }
+    }, 0);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    // Submit on Ctrl+Enter
+    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+      handleSubmit(e);
+    }
+  };
+
+  return (
+    <div className="mb-6 sm:mb-8 relative">
+      <div className="flex flex-wrap items-center justify-between gap-2 mb-3">
+        <h2 className="text-lg font-semibold text-text-primary flex items-center">
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+          </svg>
+          Add Text
+        </h2>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-2">
+        <div className="relative group">
+          <div className="absolute -inset-0.5 bg-gradient-to-r from-primary/20 to-secondary/20 rounded-lg blur opacity-0 group-hover:opacity-100 transition duration-500"></div>
+          <div className="relative">
+            <div className="flex focus-within:ring-2 focus-within:ring-primary/30 focus-within:rounded-lg">
+              <textarea
+                ref={textareaRef}
+                value={newEntry}
+                onChange={(e) => setNewEntry(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder="Type or paste text to share..."
+                className="w-full px-4 py-3 min-h-[100px] max-h-[300px] rounded-l-lg bg-surface border-r-0 border-surface-hover focus:outline-none transition-colors text-text-primary placeholder-text-secondary/50 resize-none overflow-y-auto pb-8"
+              />
+              <div className="flex flex-col">
+                <button
+                  type="button"
+                  onClick={() => {
+                    navigator.clipboard.readText().then(text => {
+                      if (text) {
+                        setNewEntry(prev => prev + text);
+                      }
+                    }).catch(err => console.error('Failed to read clipboard contents: ', err));
+                  }}
+                  className="flex items-center justify-center h-1/2 px-3 bg-secondary hover:bg-secondary/90 text-white border border-surface-hover border-l-0 rounded-tr-lg transition-all duration-200 ease-in-out hover:shadow-glow-sm focus:outline-none"
+                  title="Paste from clipboard"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                  </svg>
+                </button>
+                <button
+                  type="submit"
+                  disabled={!newEntry.trim()}
+                  className="flex items-center justify-center h-1/2 px-3 bg-primary hover:bg-primary/90 text-white border border-t-0 border-l-0 border-surface-hover rounded-br-lg transition-all duration-200 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed hover:shadow-glow-sm focus:outline-none"
+                  title="Add to clipboard"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+            <div className="absolute bottom-2 right-14 text-xs px-1.5 py-0.5 bg-surface-active/90 backdrop-blur-sm rounded text-text-secondary z-10">
+              Ctrl+Enter to submit
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}

apps/frontend/src/app/[roomCode]/components/ClipboardEntryList.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useState } from 'react';
+import ClipboardEntry, { ClipboardEntryType } from './ClipboardEntry';
+
+interface ClipboardEntryListProps {
+  entries: ClipboardEntryType[];
+  onCopyEntry: (content: string, id: string) => void;
+  onDeleteEntry: (id: string) => void;
+  onClearAll: () => void;
+  copiedId: string | null;
+}
+
+export default function ClipboardEntryList({ 
+  entries, 
+  copiedId, 
+  onCopyEntry, 
+  onDeleteEntry, 
+  onClearAll 
+}: ClipboardEntryListProps) {
+  const [showClearConfirm, setShowClearConfirm] = useState(false);
+
+  const handleClearRequest = () => {
+    if (showClearConfirm) {
+      onClearAll();
+      setShowClearConfirm(false);
+    } else {
+      setShowClearConfirm(true);
+      setTimeout(() => setShowClearConfirm(false), 3000);
+    }
+  };
+
+  return (
+    <div className="mt-6 sm:mt-8">
+      <div className="flex items-center justify-between mb-4 sticky top-0 bg-background/90 backdrop-blur-sm py-2 z-10">
+        <div className="flex-1"></div>
+        <div className="flex items-center gap-2">
+          {entries.length > 0 && (
+            <button
+              onClick={handleClearRequest}
+              className={`flex items-center px-1.5 py-1 rounded-lg transition-all duration-200 text-xs ${showClearConfirm ? 'bg-red-500/90 text-white' : 'bg-surface hover:bg-surface-hover text-text-secondary hover:text-red-500'} border border-surface-hover`}
+              title="Clear all clipboard entries"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+              {showClearConfirm ? 'Confirm' : 'Clear'}
+            </button>
+          )}
+        </div>
+      </div>
+      
+      <div className="space-y-4 px-1">
+        {entries.length === 0 ? (
+          <div className="clipboard-entry border-dashed flex flex-col items-center justify-center py-12 mt-4">
+            <div className="w-16 h-16 bg-surface-hover rounded-full flex items-center justify-center mb-4">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-text-secondary/50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+              </svg>
+            </div>
+            <p className="text-text-secondary mb-2">No entries yet</p>
+            <p className="text-text-secondary/70 text-sm">Add your first entry using the form above</p>
+          </div>
+        ) : (
+          entries.map((entry) => (
+            <ClipboardEntry
+              key={entry.id}
+              entry={entry}
+              onCopy={onCopyEntry}
+              onDelete={onDeleteEntry}
+              isCopied={copiedId === entry.id}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

apps/frontend/src/app/[roomCode]/components/ClipboardHeader.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { ClipboardIcon } from 'lucide-react';
+import Logo from '@/components/Logo';
+
+interface ClipboardHeaderProps {
+  roomCode: string;
+  connectedUsers: number;
+  expiresIn: string | null;
+  onCopyLink: () => void;
+}
+
+export default function ClipboardHeader({
+  roomCode,
+  connectedUsers,
+  expiresIn,
+  onCopyLink
+}: ClipboardHeaderProps) {
+  const [linkCopied, setLinkCopied] = useState(false);
+
+  const handleCopyLink = () => {
+    onCopyLink();
+    setLinkCopied(true);
+    setTimeout(() => setLinkCopied(false), 2000);
+  };
+
+  return (
+    <header className="bg-background/80 backdrop-blur-sm border-b border-surface-hover py-2 sm:py-3 md:py-4 sticky top-0 z-20">
+      <div className="container mx-auto px-3 sm:px-4 max-w-4xl">
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-1 sm:gap-2">
+          <div className="flex flex-wrap items-center gap-2">
+            <Link href="/">
+              <button className="flex items-center justify-center w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-surface hover:bg-surface-hover border border-surface-hover transition-all duration-200 shadow-sm hover:shadow-md" title="Back to home">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5 sm:h-4 sm:w-4 text-text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+                </svg>
+              </button>
+            </Link>
+            <h1 className="text-xl sm:text-2xl font-bold flex items-center">
+              <button
+                onClick={handleCopyLink}
+                className={`text-primary font-mono px-2 py-2 rounded flex items-center ${linkCopied ? 'bg-primary/20' : 'hover:bg-primary/10'} transition-colors duration-200`}
+                title="Click to copy room link"
+              >
+                <span className="leading-none -mb-1">{roomCode.substring(0, 2)}-{roomCode.substring(2)}</span>
+                {linkCopied && (
+                  <span className="ml-2 text-xs bg-primary/20 text-primary px-1.5 py-0.5 rounded inline-flex items-center">Copied!</span>
+                )}
+              </button>
+            </h1>
+          </div>
+
+          <div className="flex items-center gap-2 mt-1 sm:mt-2">
+            <div className="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-primary/10 text-primary rounded-full text-xs flex items-center">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3 mr-0.5 sm:mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+              </svg>
+              <span>{connectedUsers} <span className="hidden sm:inline">{connectedUsers === 1 ? 'user' : 'users'}</span></span>
+            </div>
+
+            <div className="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-emerald-500/10 text-emerald-500 rounded-full text-xs flex items-center">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3 mr-0.5 sm:mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+              </svg>
+              <span className="hidden sm:inline">End-to-End Encrypted</span>
+              <span className="sm:hidden">E2E</span>
+            </div>
+
+            <div className="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-amber-500/10 text-amber-500 rounded-full text-xs flex items-center">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3 mr-0.5 sm:mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              {expiresIn ? (
+                <span>Expires in {expiresIn}</span>
+              ) : (
+                <>
+                  <span className="hidden sm:inline">Never expires</span>
+                  <span className="sm:hidden">No expiry</span>
+                </>
+              )}
+            </div>
+
+            <div className="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-primary/10 text-primary rounded-full text-xs flex items-center">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3 mr-0.5 sm:mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+              <span>Real-time sync</span>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </header>
+  );
+}

apps/frontend/src/app/[roomCode]/components/FileEntry.ts

@@ -0,0 +1,9 @@
+export interface FileEntryType {
+  id: string;
+  filename: string;
+  mimetype: string;
+  size: number;
+  storageKey: string;
+  createdAt: string;
+  createdBy: string;
+}

apps/frontend/src/app/[roomCode]/components/FileList.tsx

@@ -0,0 +1,172 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { FileIcon, Image, FileText, Download, Trash2, Eye, AlertCircle } from 'lucide-react';
+import { apiUrl } from '@/lib/constants';
+import FilePreview from './FilePreview';
+import { isPreviewable, formatFileSize } from '@/lib/utils/fileUtils';
+
+interface FileEntry {
+  id: string;
+  filename: string;
+  mimetype: string;
+  size: number;
+  createdAt: string;
+  createdBy: string;
+}
+
+interface FileListProps {
+  files: FileEntry[];
+  onDeleteFile: (fileId: string) => void;
+  roomCode: string;
+}
+
+export default function FileList({ files, onDeleteFile, roomCode }: FileListProps) {
+  const [deletingFile, setDeletingFile] = useState<string | null>(null);
+  const [previewFile, setPreviewFile] = useState<FileEntry | null>(null);
+
+  // Clear preview if the previewed file is deleted
+  useEffect(() => {
+    if (previewFile && !files.some(file => file.id === previewFile.id)) {
+      setPreviewFile(null);
+    }
+  }, [files, previewFile]);
+
+  if (files.length === 0) {
+    return null;
+  }
+
+  const getFileIcon = (mimetype: string) => {
+    if (mimetype.startsWith('image/')) {
+      return <Image className="h-5 w-5 text-blue-500" />;
+    } else if (mimetype.includes('pdf')) {
+      return <FileText className="h-5 w-5 text-red-500" />;
+    } else {
+      return <FileIcon className="h-5 w-5 text-gray-500" />;
+    }
+  };
+
+  // Check if a file is previewable
+  const canPreview = (file: FileEntry) => {
+    return isPreviewable(file.mimetype);
+  };
+
+  return (
+    <div className="mt-6 sm:mt-8">
+      <div className="flex items-center justify-between mb-4 sticky top-0 bg-background/90 backdrop-blur-sm py-2 z-10">
+        <div className="flex-1"></div>
+        <div className="flex items-center gap-2">
+        </div>
+      </div>
+
+      {previewFile && (
+        <FilePreview
+          fileId={previewFile.id}
+          filename={previewFile.filename}
+          mimetype={previewFile.mimetype}
+          roomCode={roomCode}
+          onClose={() => setPreviewFile(null)}
+        />
+      )}
+
+      <div className="space-y-2">
+        {files.length === 0 ? (
+          <div className="border border-dashed border-surface-hover rounded-lg flex flex-col items-center justify-center py-12 mt-4">
+            <div className="w-16 h-16 bg-surface-hover rounded-full flex items-center justify-center mb-4">
+              <FileIcon className="h-8 w-8 text-text-secondary/50" />
+            </div>
+            <p className="text-text-secondary mb-2">No files yet</p>
+            <p className="text-text-secondary/70 text-sm">Upload your first file using the form above</p>
+          </div>
+        ) : (
+          files.map((file) => (
+            <div
+              key={file.id}
+              className={`flex items-center p-3 bg-surface/80 rounded-lg border border-surface-hover hover:border-primary/30 transition-colors relative ${canPreview(file) ? 'cursor-pointer' : ''}`}
+              onClick={() => canPreview(file) ? setPreviewFile(file) : null}
+            >
+              <div className="mr-3">
+                {getFileIcon(file.mimetype)}
+              </div>
+              <div className="flex-grow min-w-0">
+                <p className="text-text-primary font-medium truncate">{file.filename}</p>
+                <p className="text-text-tertiary text-xs">
+                  {formatFileSize(file.size)} • {new Date(file.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                </p>
+              </div>
+              <div className="flex space-x-2" onClick={(e) => e.stopPropagation()}>
+                {canPreview(file) ? (
+                  <button
+                    onClick={() => setPreviewFile(file)}
+                    className="p-1.5 text-text-secondary hover:text-primary rounded-md hover:bg-primary/10 transition-colors"
+                    title="Preview"
+                  >
+                    <Eye className="h-4 w-4" />
+                  </button>
+                ) : (
+                  <span
+                    className="p-1.5 text-text-tertiary cursor-not-allowed flex items-center"
+                    title="Preview not available for this file type"
+                  >
+                    <AlertCircle className="h-4 w-4" />
+                  </span>
+                )}
+                <a
+                  onClick={(e) => e.stopPropagation()}
+                  href={`${apiUrl}/clipboard/${roomCode}/files/${file.id}?filename=${encodeURIComponent(file.filename)}`}
+                  download={file.filename}
+                  className="p-1.5 text-text-secondary hover:text-primary rounded-md hover:bg-primary/10 transition-colors"
+                  title="Download"
+                >
+                  <Download className="h-4 w-4" />
+                </a>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setDeletingFile(file.id)
+                  }}
+                  className="p-1.5 text-text-secondary hover:text-error rounded-md hover:bg-error/10 transition-colors"
+                  title="Delete"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </button>
+              </div>
+
+              {/* Delete confirmation */}
+              {deletingFile === file.id && (
+                <div className="absolute inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center z-10 rounded-lg">
+                  <div className="bg-surface p-4 rounded-lg shadow-lg max-w-xs w-full">
+                    <h4 className="text-text-primary font-medium mb-2">Delete file?</h4>
+                    <p className="text-text-secondary text-sm mb-4">This action cannot be undone.</p>
+                    <div className="flex justify-end space-x-2">
+                      <button
+                        onClick={() => setDeletingFile(null)}
+                        className="px-3 py-1.5 text-text-secondary hover:text-text-primary bg-surface-hover rounded-md"
+                      >
+                        Cancel
+                      </button>
+                      <button
+                        onClick={() => {
+                          // If this file is being previewed, close the preview first
+                          if (previewFile && previewFile.id === file.id) {
+                            setPreviewFile(null);
+                          }
+                          // Then delete the file
+                          onDeleteFile(file.id);
+                          setDeletingFile(null);
+                        }}
+                        className="px-3 py-1.5 text-white bg-error hover:bg-error/90 rounded-md"
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

apps/frontend/src/app/[roomCode]/components/FilePreview.tsx

@@ -0,0 +1,186 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { X } from 'lucide-react';
+import { apiUrl } from '@/lib/constants';
+
+interface FilePreviewProps {
+  fileId: string;
+  filename: string;
+  mimetype: string;
+  roomCode: string;
+  onClose: () => void;
+}
+
+export default function FilePreview({ fileId, filename, mimetype, roomCode, onClose }: FilePreviewProps) {
+  const [loading, setLoading] = useState(true);
+  const fileUrl = `${apiUrl}/clipboard/${roomCode}/files/${fileId}`;
+
+  // Handle escape key to close preview
+  useEffect(() => {
+    const handleEsc = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleEsc);
+    return () => {
+      window.removeEventListener('keydown', handleEsc);
+    };
+  }, [onClose]);
+
+  const renderPreview = () => {
+    if (mimetype.startsWith('image/')) {
+      return (
+        <div className="flex items-center justify-center h-full">
+          <img
+            src={fileUrl}
+            alt={filename}
+            className="max-w-full max-h-full object-contain"
+            onLoad={() => setLoading(false)}
+          />
+        </div>
+      );
+    } else if (mimetype === 'application/pdf') {
+      return (
+        <iframe
+          src={`${fileUrl}#toolbar=0`}
+          className="w-full h-full"
+          title={filename}
+          onLoad={() => setLoading(false)}
+        />
+      );
+    } else if (mimetype.startsWith('text/') || mimetype === 'application/json') {
+      return <TextFilePreview fileUrl={fileUrl} setLoading={setLoading} />;
+    } else if (mimetype.startsWith('video/')) {
+      return (
+        <video
+          controls
+          className="max-w-full max-h-full"
+          onLoadedData={() => setLoading(false)}
+        >
+          <source src={fileUrl} type={mimetype} />
+          Your browser does not support the video tag.
+        </video>
+      );
+    } else if (mimetype.startsWith('audio/')) {
+      return (
+        <div className="flex flex-col items-center justify-center h-full">
+          <div className="bg-surface/80 p-6 rounded-lg shadow-lg">
+            <p className="text-text-primary text-lg mb-4 text-center">{filename}</p>
+            <audio
+              controls
+              className="w-full"
+              onLoadedData={() => setLoading(false)}
+            >
+              <source src={fileUrl} type={mimetype} />
+              Your browser does not support the audio element.
+            </audio>
+          </div>
+        </div>
+      );
+    } else {
+      // For unsupported file types
+      setLoading(false);
+      return (
+        <div className="flex flex-col items-center justify-center h-full">
+          <div className="bg-surface/80 p-8 rounded-lg shadow-lg text-center">
+            <p className="text-text-primary text-xl mb-4">Preview not available</p>
+            <p className="text-text-secondary mb-6">This file type cannot be previewed.</p>
+            <a
+              href={`${apiUrl}/clipboard/${roomCode}/files/${fileId}?filename=${encodeURIComponent(filename)}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
+              download={filename}
+            >
+              Download File
+            </a>
+          </div>
+        </div>
+      );
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+      <div className="bg-background rounded-lg shadow-xl w-full max-w-4xl h-[80vh] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-surface-hover">
+          <h3 className="text-lg font-medium text-text-primary truncate max-w-[calc(100%-40px)]">
+            {filename}
+          </h3>
+          <button
+            onClick={onClose}
+            className="p-1 rounded-full hover:bg-surface-hover transition-colors"
+            aria-label="Close preview"
+          >
+            <X className="h-5 w-5 text-text-secondary" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-auto relative">
+          {loading && (
+            <div className="absolute inset-0 flex items-center justify-center bg-background/80">
+              <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
+            </div>
+          )}
+          {renderPreview()}
+        </div>
+
+        {/* Footer */}
+        <div className="p-4 border-t border-surface-hover flex justify-end">
+          <a
+            href={`${apiUrl}/clipboard/${roomCode}/files/${fileId}?filename=${encodeURIComponent(filename)}`}
+            download={filename}
+            className="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
+          >
+            Download
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Component to handle text file preview
+function TextFilePreview({ fileUrl, setLoading }: { fileUrl: string; setLoading: (loading: boolean) => void }) {
+  const [content, setContent] = useState<string>('');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchTextContent() {
+      try {
+        const response = await fetch(fileUrl);
+        if (!response.ok) {
+          throw new Error(`Failed to fetch file: ${response.status}`);
+        }
+        const text = await response.text();
+        setContent(text);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load file');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchTextContent();
+  }, [fileUrl, setLoading]);
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="bg-error/10 text-error p-4 rounded-md">
+          {error}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <pre className="p-4 whitespace-pre-wrap break-words text-text-primary font-mono text-sm overflow-auto h-full bg-surface/30">
+      {content}
+    </pre>
+  );
+}

apps/frontend/src/app/[roomCode]/components/FileUploadComponent.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import { useState, useRef } from 'react';
+import { Upload, X } from 'lucide-react';
+import { apiUrl } from '@/lib/constants';
+
+interface FileUploadProps {
+  roomCode: string;
+  clientId: string;
+  onFileUploaded: (fileEntry: any) => void;
+}
+
+export default function FileUploadComponent({ roomCode, clientId, onFileUploaded }: FileUploadProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      handleFileUpload(e.dataTransfer.files[0]);
+    }
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      handleFileUpload(e.target.files[0]);
+    }
+  };
+
+  const handleFileUpload = async (file: File) => {
+    // Validate file size (10MB max)
+    if (file.size > 10 * 1024 * 1024) {
+      setError('File size exceeds 10MB limit');
+      return;
+    }
+
+    setIsUploading(true);
+    setUploadProgress(0);
+    setError(null);
+
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('clientId', clientId);
+
+    try {
+      const xhr = new XMLHttpRequest();
+      
+      xhr.upload.onprogress = (event) => {
+        if (event.lengthComputable) {
+          const progress = Math.round((event.loaded / event.total) * 100);
+          setUploadProgress(progress);
+        }
+      };
+      
+      xhr.onload = () => {
+        if (xhr.status === 200 || xhr.status === 201) {
+          const response = JSON.parse(xhr.responseText);
+          onFileUploaded(response);
+          setIsUploading(false);
+          setUploadProgress(0);
+          
+          // Reset file input
+          if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+          }
+        } else {
+          setError('Upload failed');
+          setIsUploading(false);
+        }
+      };
+      
+      xhr.onerror = () => {
+        setError('Network error occurred');
+        setIsUploading(false);
+      };
+      
+      xhr.open('POST', `${apiUrl}/clipboard/${roomCode}/files`, true);
+      xhr.send(formData);
+      
+    } catch (err: any) {
+      console.error('Error uploading file:', err);
+      setError(err.message || 'An unexpected error occurred');
+      setIsUploading(false);
+    }
+  };
+
+  return (
+    <div className="mb-6 sm:mb-8 relative">
+      <div className="flex flex-wrap items-center justify-between gap-2 mb-3">
+        <h2 className="text-lg font-semibold text-text-primary flex items-center">
+          <Upload className="h-5 w-5 mr-2 text-secondary" />
+          Add File
+        </h2>
+      </div>
+      <div
+        className={`border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors ${
+          isDragging 
+            ? 'border-primary bg-primary/5' 
+            : 'border-surface-hover hover:border-primary/50 hover:bg-surface/80'
+        }`}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onClick={() => fileInputRef.current?.click()}
+      >
+        <input
+          type="file"
+          ref={fileInputRef}
+          onChange={handleFileChange}
+          className="hidden"
+        />
+        
+        <div className="flex flex-col items-center justify-center py-3">
+          <Upload className="h-8 w-8 text-primary mb-2" />
+          <p className="text-text-secondary mb-1">
+            {isDragging ? 'Drop file here' : 'Click or drag file to upload'}
+          </p>
+          <p className="text-text-tertiary text-xs">Max size: 10MB</p>
+        </div>
+      </div>
+      
+      {isUploading && (
+        <div className="mt-2">
+          <div className="w-full bg-surface-hover rounded-full h-2 mt-1">
+            <div 
+              className="bg-primary h-2 rounded-full transition-all duration-300"
+              style={{ width: `${uploadProgress}%` }}
+            ></div>
+          </div>
+          <p className="text-xs text-text-secondary mt-1">Uploading: {uploadProgress}%</p>
+        </div>
+      )}
+      
+      {error && (
+        <div className="mt-2 p-2 bg-error/10 border border-error/30 text-error rounded-md text-sm flex items-center">
+          <X className="h-4 w-4 mr-2 flex-shrink-0" />
+          <span>{error}</span>
+        </div>
+      )}
+    </div>
+  );
+}

apps/frontend/src/app/[roomCode]/components/LoadingState.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import Link from 'next/link';
+import Modal from '@/components/ui/Modal';
+
+interface LoadingStateProps {
+  isLoading: boolean;
+  error: string | null;
+}
+
+export default function LoadingState({ isLoading, error }: LoadingStateProps) {
+  if (!isLoading && !error) return null;
+  
+  const loadingIcon = (
+    <div className="relative w-full h-full">
+      <div className="absolute inset-0 bg-gradient-mesh rounded-xl animate-pulse"></div>
+      <div className="absolute inset-0 flex items-center justify-center">
+        <svg className="animate-spin h-8 w-8 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      </div>
+    </div>
+  );
+
+  const errorIcon = (
+    <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+    </svg>
+  );
+  
+  return isLoading ? (
+    <Modal
+      isOpen={true}
+      onClose={() => {}}
+      title="Connecting to Clipboard"
+      icon={loadingIcon}
+    >
+      <div className="flex flex-col items-center">
+        <p className="text-text-secondary text-center">
+          Establishing connection and retrieving clipboard data...
+        </p>
+      </div>
+    </Modal>
+  ) : (
+    <Modal
+      isOpen={true}
+      onClose={() => {}}
+      title="Error"
+      icon={errorIcon}
+    >
+      <div className="flex flex-col items-center">
+        <p className="text-text-secondary text-center mb-6">
+          {error}
+        </p>
+        <Link href="/">
+          <button className="btn btn-primary">
+            Return to Home
+          </button>
+        </Link>
+      </div>
+    </Modal>
+  );
+}

apps/frontend/src/app/[roomCode]/components/PasswordVerificationModal.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+
+interface PasswordVerificationModalProps {
+  onVerify: (password: string) => Promise<boolean>;
+  onCancel: () => void;
+  isOpen: boolean;
+}
+
+// TODO: make the modal below use the reusable Modal component
+
+export default function PasswordVerificationModal({
+  onVerify,
+  onCancel,
+  isOpen
+}: PasswordVerificationModalProps) {
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isVerifying, setIsVerifying] = useState(false);
+  const modalRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Focus input when modal opens
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 100);
+    }
+  }, [isOpen]);
+
+  // Handle click outside modal
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+        onCancel();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, onCancel]);
+
+  // Handle ESC key to close modal
+  useEffect(() => {
+    const handleEscKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onCancel();
+      }
+    };
+
+    if (isOpen) {
+      window.addEventListener('keydown', handleEscKey);
+    }
+
+    return () => {
+      window.removeEventListener('keydown', handleEscKey);
+    };
+  }, [isOpen, onCancel]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (!password.trim()) {
+      setError('Please enter a password');
+      return;
+    }
+
+    setIsVerifying(true);
+    try {
+      const success = await onVerify(password);
+      if (!success) {
+        setError('Incorrect password. Please try again.');
+        setPassword('');
+        inputRef.current?.focus();
+      }
+    } catch (err) {
+      setError('An error occurred while verifying the password. Please try again.');
+    } finally {
+      setIsVerifying(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm animate-fadeIn">
+      <div
+        ref={modalRef}
+        className="bg-surface border border-surface-hover rounded-xl p-6 w-full max-w-md mx-4 shadow-xl animate-scaleIn relative overflow-hidden"
+      >
+        {/* Background elements */}
+        <div className="absolute -top-20 -left-20 w-40 h-40 bg-emerald-500/5 rounded-full"></div>
+        <div className="absolute -bottom-20 -right-20 w-40 h-40 bg-emerald-500/5 rounded-full"></div>
+
+        <div className="relative">
+          <div className="flex items-center mb-4">
+            <div className="w-10 h-10 bg-emerald-500/10 rounded-full flex items-center justify-center mr-3">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+              </svg>
+            </div>
+            <h2 className="text-xl font-semibold text-text-primary">Password Protected</h2>
+          </div>
+
+          <p className="text-text-secondary mb-4">
+            This clipboard is password protected. Please enter the password to access it.
+          </p>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-text-secondary/50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                  </svg>
+                </div>
+                <input
+                  ref={inputRef}
+                  type="text"
+                  value={password}
+                  onChange={(e) => {
+                    setPassword(e.target.value);
+                    if (error) setError('');
+                  }}
+                  placeholder="Enter password"
+                  className="w-full pl-10 pr-4 py-3 rounded-lg bg-surface/80 border-2 border-surface-hover focus:border-emerald-500 focus:outline-none focus:ring-0 transition-colors duration-300 ease-in-out text-text-primary placeholder-text-secondary/50 font-mono"
+                  autoComplete="off"
+                />
+              </div>
+              {error && (
+                <div className="mt-2 text-error text-sm flex items-center">
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  <span>{error}</span>
+                </div>
+              )}
+            </div>
+
+            <div className="flex space-x-3">
+              <button
+                type="button"
+                onClick={onCancel}
+                className="flex-1 py-2 px-4 border border-surface-hover bg-surface hover:bg-surface-hover text-text-primary font-medium rounded-lg transition-colors duration-200"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={isVerifying}
+                className="flex-1 py-2 px-4 bg-emerald-500 hover:bg-emerald-600 text-white font-medium rounded-lg flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isVerifying ? (
+                  <span className="flex items-center justify-center">
+                    <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    Verifying...
+                  </span>
+                ) : 'Access Clipboard'}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/frontend/src/app/[roomCode]/page.tsx

@@ -0,0 +1,279 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { FileText, FileIcon } from 'lucide-react';
+
+// Import components
+import ClipboardHeader from './components/ClipboardHeader';
+import ClipboardEntryForm from './components/ClipboardEntryForm';
+import ClipboardEntryList from './components/ClipboardEntryList';
+import LoadingState from './components/LoadingState';
+import PasswordVerificationModal from './components/PasswordVerificationModal';
+import { ClipboardEntryType } from './components/ClipboardEntry';
+import FileUploadComponent from './components/FileUploadComponent';
+import FileList from './components/FileList';
+import { FileEntryType } from './components/FileEntry';
+
+// Import custom hooks
+import { useSocketManager } from '@/lib/hooks/useSocketManager';
+import { useSavedClipboards } from '@/lib/hooks/useSavedClipboards';
+import { apiUrl } from '@/lib/constants';
+
+export default function ClipboardRoom() {
+  const params = useParams();
+  const router = useRouter();
+  const roomCode = params.roomCode as string;
+  const clientId = useRef(Math.random().toString(36).substring(2, 10));
+  const [copied, setCopied] = useState<string | null>(null);
+  const [isPasswordProtected, setIsPasswordProtected] = useState(false);
+  const [showPasswordModal, setShowPasswordModal] = useState(false);
+  const [isCheckingPassword, setIsCheckingPassword] = useState(true);
+  const [isPasswordVerified, setIsPasswordVerified] = useState(false);
+  const [activeTab, setActiveTab] = useState<'entries' | 'files'>('entries');
+
+  // Use saved clipboards hook to track clipboard history
+  const { addClipboard } = useSavedClipboards();
+
+  // Use our custom socket manager hook
+  const {
+    entries,
+    files,
+    connectedUsers,
+    expiresIn,
+    isLoading,
+    error,
+    socketRef,
+    addEntry: handleAddEntry,
+    deleteEntry: handleDeleteEntry,
+    clearClipboard: handleClearClipboard,
+    deleteFile: handleDeleteFile
+  } = useSocketManager({
+    roomCode,
+    clientId: clientId.current
+  });
+
+  /* ===== Event Handlers ===== */
+
+  const handleCopyEntry = (content: string, id: string) => {
+    navigator.clipboard.writeText(content);
+    setCopied(id);
+    setTimeout(() => setCopied(null), 2000);
+  };
+
+  const handleCopyLink = () => {
+    navigator.clipboard.writeText(window.location.href);
+    // You could add a toast notification here
+  };
+
+  // Handle file uploaded event
+  const handleFileUploaded = (fileEntry: FileEntryType) => {
+    // Emit socket event to notify other clients
+    if (socketRef) {
+      socketRef.current?.emit('fileUploaded', {
+        roomCode,
+        fileEntry,
+        clientId: clientId.current,
+      });
+    }
+
+    // Switch to files tab after upload to show the newly uploaded file
+    setActiveTab('files');
+  };
+
+  // Check for password protection when component mounts
+  useEffect(() => {
+    checkPasswordProtection();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [roomCode]);
+
+  // Update document title and favicon based on clipboard state
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      // Update the document title with the number of entries
+      document.title = `Clipboard (${entries.length}) - ${roomCode}`;
+
+      // Update the favicon based on user count
+      const favicon = document.querySelector('link[rel="icon"]') as HTMLLinkElement;
+      if (favicon) {
+        favicon.href = connectedUsers > 1
+          ? '/favicon-active.ico'
+          : '/favicon.ico';
+      }
+    }
+  }, [entries.length, connectedUsers, roomCode]);
+
+  // Check if the clipboard is password protected
+  const checkPasswordProtection = async () => {
+    try {
+      setIsCheckingPassword(true);
+      const response = await fetch(`${apiUrl}/clipboard/${roomCode}/exists`);
+
+      if (!response.ok) {
+        throw new Error('Failed to check clipboard');
+      }
+
+      const data = await response.json();
+
+      if (!data.exists) {
+        // Clipboard doesn't exist
+        router.push('/');
+        return;
+      }
+
+      // Check if clipboard has a password
+      if (data.hasPassword) {
+        setIsPasswordProtected(true);
+        setShowPasswordModal(true);
+      } else {
+        // No password, proceed directly
+        setIsPasswordVerified(true);
+
+        // Save to clipboard history since we've successfully accessed it
+        addClipboard(roomCode);
+      }
+    } catch (err) {
+      console.error('Error checking clipboard:', err);
+    } finally {
+      setIsCheckingPassword(false);
+    }
+  };
+
+  // Verify clipboard password
+  const verifyPassword = async (password: string): Promise<boolean> => {
+    try {
+      const response = await fetch(`${apiUrl}/clipboard/${roomCode}/verify`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ password }),
+      });
+
+      if (response.ok) {
+        setIsPasswordVerified(true);
+        setShowPasswordModal(false);
+
+        // Save to clipboard history after successful password verification
+        addClipboard(roomCode);
+
+        return true;
+      }
+
+      return false;
+    } catch (err) {
+      console.error('Error verifying password:', err);
+      return false;
+    }
+  };
+
+  // Handle cancel password verification
+  const handleCancelPasswordVerification = () => {
+    router.push('/');
+  };
+
+  // Format date for display
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  };
+
+  return (
+    <div className="flex flex-col h-screen max-h-screen overflow-hidden bg-background text-text-primary">
+      {/* Loading and Error States */}
+      <LoadingState isLoading={isLoading || isCheckingPassword} error={error} />
+
+      {/* Password Verification Modal */}
+      <PasswordVerificationModal
+        onVerify={verifyPassword}
+        onCancel={handleCancelPasswordVerification}
+        isOpen={isPasswordProtected && showPasswordModal && !isPasswordVerified}
+      />
+
+      {/* Only show content if not password protected or password has been verified */}
+      {(!isPasswordProtected || isPasswordVerified) && (
+        <>
+          {/* Header with Room Code and User Count - Fixed at top */}
+          <ClipboardHeader
+            roomCode={roomCode}
+            connectedUsers={connectedUsers}
+            expiresIn={expiresIn}
+            onCopyLink={handleCopyLink}
+          />
+
+          {/* Scrollable content area - Only this part should scroll */}
+          <div className="flex-1 overflow-y-auto">
+            <main className="container mx-auto px-3 sm:px-4 py-4 sm:py-6 max-w-4xl">
+              {/* Unified Input Section */}
+              <div className="mb-6">
+                {activeTab === 'entries' ? (
+                  <ClipboardEntryForm onAddEntry={handleAddEntry} />
+                ) : (
+                  <FileUploadComponent
+                    roomCode={roomCode}
+                    clientId={clientId.current}
+                    onFileUploaded={handleFileUploaded}
+                  />
+                )}
+              </div>
+
+              {/* Tabs Navigation */}
+              <div className="flex border-b border-surface-hover mb-4">
+                <button
+                  onClick={() => setActiveTab('entries')}
+                  className={`flex items-center px-4 py-2 border-b-2 font-medium text-sm ${activeTab === 'entries'
+                      ? 'border-primary text-primary'
+                      : 'border-transparent text-text-secondary hover:text-text-primary hover:border-surface-hover'
+                    } transition-colors`}
+                >
+                  <FileText className="w-4 h-4 mr-2" />
+                  Text Entries
+                  {entries.length > 0 && (
+                    <span className="ml-2 bg-surface-hover text-text-secondary text-xs px-2 py-0.5 rounded-full">
+                      {entries.length}
+                    </span>
+                  )}
+                </button>
+
+                <button
+                  onClick={() => setActiveTab('files')}
+                  className={`flex items-center px-4 py-2 border-b-2 font-medium text-sm ${activeTab === 'files'
+                      ? 'border-primary text-primary'
+                      : 'border-transparent text-text-secondary hover:text-text-primary hover:border-surface-hover'
+                    } transition-colors`}
+                >
+                  <FileIcon className="w-4 h-4 mr-2" />
+                  Files
+                  {files.length > 0 && (
+                    <span className="ml-2 bg-surface-hover text-text-secondary text-xs px-2 py-0.5 rounded-full">
+                      {files.length}
+                    </span>
+                  )}
+                </button>
+              </div>
+
+              {/* Tab Content */}
+              <div className="mt-4">
+                {activeTab === 'entries' ? (
+                  <ClipboardEntryList
+                    entries={entries}
+                    copiedId={copied}
+                    onCopyEntry={handleCopyEntry}
+                    onDeleteEntry={handleDeleteEntry}
+                    onClearAll={handleClearClipboard}
+                  />
+                ) : (
+                  <FileList
+                    files={files}
+                    onDeleteFile={handleDeleteFile}
+                    roomCode={roomCode}
+                  />
+                )}
+              </div>
+            </main>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

apps/frontend/src/app/admin/[roomCode]/page.tsx

@@ -0,0 +1,339 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import Link from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+import { apiUrl } from '@/lib/constants';
+
+interface ClipboardEntry {
+  id: string;
+  content: string;
+  createdAt: string;
+  createdBy: string;
+}
+
+interface FileEntry {
+  id: string;
+  filename: string;
+  mimetype: string;
+  size: number;
+  storageKey: string;
+  createdAt: string;
+  createdBy: string;
+}
+
+interface ClipboardDetail {
+  id: string;
+  entries: ClipboardEntry[];
+  files?: FileEntry[];
+  password?: string;
+  createdAt: string;
+  lastActivity: string;
+  ttl: number | null;
+}
+
+export default function ClipboardAdminDetail() {
+  const params = useParams();
+  const router = useRouter();
+  const roomCode = params.roomCode as string;
+
+  const [token, setToken] = useState('');
+  const [inputToken, setInputToken] = useState('');
+  const [clipboard, setClipboard] = useState<ClipboardDetail | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [password, setPassword] = useState('');
+  const [ttl, setTTL] = useState('');
+
+  const tokenValid = useMemo(() => Boolean(token), [token]);
+
+  useEffect(() => {
+    const saved = localStorage.getItem('adminToken');
+    if (saved) {
+      setToken(saved);
+      setInputToken(saved);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (token) {
+      fetchClipboard();
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  const fetchClipboard = async () => {
+    setLoading(true);
+    setError('');
+
+    try {
+      const response = await fetch(`${apiUrl}/admin/clipboards/${roomCode}`, {
+        headers: { 'x-admin-token': token },
+      });
+
+      if (response.status === 401) {
+        setError('Invalid token. Please log in again.');
+        return;
+      }
+
+      if (!response.ok) {
+        throw new Error('Failed to load clipboard');
+      }
+
+      const data = await response.json();
+      setClipboard(data);
+      setPassword(data.password || '');
+      setTTL(data.ttl ? String(data.ttl) : '');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleLogin = () => {
+    if (!inputToken) {
+      setError('Please enter an admin token');
+      return;
+    }
+
+    localStorage.setItem('adminToken', inputToken);
+    setToken(inputToken);
+    setError('');
+  };
+
+  const updatePassword = async (value: string | null) => {
+    try {
+      const response = await fetch(`${apiUrl}/admin/clipboards/${roomCode}/password`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'x-admin-token': token,
+        },
+        body: JSON.stringify({ password: value }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to update password');
+      }
+
+      await fetchClipboard();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    }
+  };
+
+  const updateTTL = async (value: number | null) => {
+    try {
+      const response = await fetch(`${apiUrl}/admin/clipboards/${roomCode}/ttl`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'x-admin-token': token,
+        },
+        body: JSON.stringify({ ttl: value }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to update TTL');
+      }
+
+      await fetchClipboard();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!confirm(`Delete clipboard ${roomCode}? This cannot be undone.`)) {
+      return;
+    }
+
+    try {
+      const response = await fetch(`${apiUrl}/admin/clipboards/${roomCode}`, {
+        method: 'DELETE',
+        headers: { 'x-admin-token': token },
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to delete clipboard');
+      }
+
+      router.push('/admin');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    }
+  };
+
+  return (
+    <div className="w-full max-w-6xl mx-auto p-6 md:p-10">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <p className="text-sm text-text-secondary">Clipboard</p>
+          <h1 className="text-3xl font-bold">{roomCode}</h1>
+        </div>
+        <div className="flex gap-2">
+          <Link href="/admin" className="btn btn-ghost">
+            Back to List
+          </Link>
+          <Link href={`/${roomCode}`} className="btn btn-ghost">
+            Open Clipboard
+          </Link>
+        </div>
+      </div>
+
+      <div className="card mb-6">
+        <div className="flex flex-col sm:flex-row sm:items-end gap-4">
+          <div className="flex-1">
+            <label className="block text-sm text-text-secondary mb-2">Admin Token</label>
+            <input
+              type="password"
+              value={inputToken}
+              onChange={(e) => setInputToken(e.target.value)}
+              className="input w-full"
+              placeholder="Enter admin token"
+            />
+          </div>
+          <button className="btn btn-primary self-start sm:self-auto" onClick={handleLogin}>
+            {tokenValid ? 'Update Token' : 'Login'}
+          </button>
+        </div>
+        {error && <p className="text-red-400 text-sm mt-2">{error}</p>}
+      </div>
+
+      {tokenValid && (
+        <div className="space-y-6">
+          <div className="card flex flex-col gap-4">
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+              <div>
+                <p className="text-text-secondary text-sm">Created {clipboard ? new Date(clipboard.createdAt).toLocaleString() : ''}</p>
+                <p className="text-text-secondary text-sm">Last activity {clipboard ? new Date(clipboard.lastActivity).toLocaleString() : ''}</p>
+              </div>
+              <div className="flex gap-2">
+                <button className="btn btn-ghost" onClick={fetchClipboard} disabled={loading}>
+                  Refresh
+                </button>
+                <button className="btn btn-ghost" onClick={handleDelete}>
+                  Delete
+                </button>
+              </div>
+            </div>
+
+            <div className="grid md:grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm text-text-secondary mb-2">Password</label>
+                <div className="flex gap-2">
+                  <input
+                    type="text"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="input flex-1"
+                    placeholder="Set or clear password"
+                  />
+                  <button className="btn btn-secondary" onClick={() => updatePassword(password || null)}>
+                    Save
+                  </button>
+                  <button className="btn btn-ghost" onClick={() => { setPassword(''); updatePassword(null); }}>
+                    Clear
+                  </button>
+                </div>
+              </div>
+              <div>
+                <label className="block text-sm text-text-secondary mb-2">TTL (seconds)</label>
+                <div className="flex gap-2">
+                  <input
+                    type="number"
+                    min="0"
+                    value={ttl}
+                    onChange={(e) => setTTL(e.target.value)}
+                    className="input flex-1"
+                    placeholder="e.g. 3600"
+                  />
+                  <button
+                    className="btn btn-secondary"
+                    onClick={() => updateTTL(ttl ? Number(ttl) : null)}
+                  >
+                    Save
+                  </button>
+                  <button className="btn btn-ghost" onClick={() => { setTTL(''); updateTTL(null); }}>
+                    Clear
+                  </button>
+                </div>
+                <p className="text-sm text-text-secondary mt-1">Current TTL: {clipboard ? formatTTL(clipboard.ttl) : '—'}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="card">
+            <div className="flex items-center justify-between mb-3">
+              <h2 className="text-xl font-semibold">Entries ({clipboard?.entries.length ?? 0})</h2>
+            </div>
+            {loading && !clipboard ? (
+              <p className="text-text-secondary">Loading...</p>
+            ) : (
+              <div className="space-y-3">
+                {clipboard?.entries.map((entry) => (
+                  <div key={entry.id} className="clipboard-entry">
+                    <div className="flex items-center justify-between mb-2 text-xs text-text-secondary">
+                      <span>{new Date(entry.createdAt).toLocaleString()}</span>
+                      <span className="font-mono">{entry.createdBy}</span>
+                    </div>
+                    <div className="clipboard-entry-content">{entry.content}</div>
+                  </div>
+                ))}
+                {clipboard && clipboard.entries.length === 0 && (
+                  <p className="text-text-secondary">No entries yet.</p>
+                )}
+              </div>
+            )}
+          </div>
+
+          <div className="card">
+            <div className="flex items-center justify-between mb-3">
+              <h2 className="text-xl font-semibold">Files ({clipboard?.files?.length ?? 0})</h2>
+            </div>
+            {clipboard?.files && clipboard.files.length > 0 ? (
+              <div className="space-y-3">
+                {clipboard.files.map((file) => (
+                  <div key={file.id} className="clipboard-entry">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <p className="font-medium">{file.filename}</p>
+                        <p className="text-xs text-text-secondary">{file.mimetype} • {formatSize(file.size)}</p>
+                        <p className="text-xs text-text-secondary">Uploaded {new Date(file.createdAt).toLocaleString()}</p>
+                      </div>
+                      <a
+                        href={`${apiUrl}/files/${file.storageKey}`}
+                        className="btn btn-ghost btn-sm"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        Open
+                      </a>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="text-text-secondary">No files uploaded.</p>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function formatTTL(ttl: number | null): string {
+  if (ttl === null) return 'None';
+  if (ttl < 60) return `${ttl}s`;
+  if (ttl < 3600) return `${Math.round(ttl / 60)}m`;
+  const hours = Math.round(ttl / 3600);
+  return `${hours}h`;
+}
+
+function formatSize(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}

apps/frontend/src/app/admin/page.tsx

@@ -0,0 +1,201 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import Link from 'next/link';
+import { apiUrl } from '@/lib/constants';
+
+interface ClipboardSummary {
+  id: string;
+  createdAt: string;
+  lastActivity: string;
+  hasPassword: boolean;
+  entryCount: number;
+  fileCount: number;
+  ttl: number | null;
+}
+
+export default function AdminDashboard() {
+  const [token, setToken] = useState('');
+  const [inputToken, setInputToken] = useState('');
+  const [clipboards, setClipboards] = useState<ClipboardSummary[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    const saved = localStorage.getItem('adminToken');
+    if (saved) {
+      setToken(saved);
+      setInputToken(saved);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (token) {
+      fetchClipboards();
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  const fetchClipboards = async () => {
+    setLoading(true);
+    setError('');
+
+    try {
+      const response = await fetch(`${apiUrl}/admin/clipboards`, {
+        headers: { 'x-admin-token': token },
+      });
+
+      if (response.status === 401) {
+        setError('Invalid token. Please log in again.');
+        return;
+      }
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch clipboards');
+      }
+
+      const data = await response.json();
+      setClipboards(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleLogin = () => {
+    if (!inputToken) {
+      setError('Please enter an admin token');
+      return;
+    }
+
+    localStorage.setItem('adminToken', inputToken);
+    setToken(inputToken);
+    setError('');
+  };
+
+  const handleDelete = async (roomCode: string) => {
+    if (!confirm(`Delete clipboard ${roomCode}? This cannot be undone.`)) {
+      return;
+    }
+
+    try {
+      const response = await fetch(`${apiUrl}/admin/clipboards/${roomCode}`, {
+        method: 'DELETE',
+        headers: { 'x-admin-token': token },
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to delete clipboard');
+      }
+
+      await fetchClipboards();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    }
+  };
+
+  const tokenValid = useMemo(() => Boolean(token), [token]);
+
+  return (
+    <div className="w-full max-w-6xl mx-auto p-6 md:p-10">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-3xl font-bold">Admin Dashboard</h1>
+          <p className="text-text-secondary">Manage clipboards and inspect activity</p>
+        </div>
+        <Link href="/" className="btn btn-ghost">
+          Back to Home
+        </Link>
+      </div>
+
+      <div className="card mb-6">
+        <div className="flex flex-col sm:flex-row sm:items-end gap-4">
+          <div className="flex-1">
+            <label className="block text-sm text-text-secondary mb-2">Admin Token</label>
+            <input
+              type="password"
+              value={inputToken}
+              onChange={(e) => setInputToken(e.target.value)}
+              className="input w-full"
+              placeholder="Enter admin token"
+            />
+          </div>
+          <button className="btn btn-primary self-start sm:self-auto" onClick={handleLogin}>
+            {tokenValid ? 'Update Token' : 'Login'}
+          </button>
+        </div>
+        {error && <p className="text-red-400 text-sm mt-2">{error}</p>}
+      </div>
+
+      {tokenValid && (
+        <div className="card">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-semibold">Clipboards</h2>
+            <div className="flex gap-2">
+              <button className="btn btn-ghost" onClick={fetchClipboards} disabled={loading}>
+                Refresh
+              </button>
+            </div>
+          </div>
+          {loading ? (
+            <p className="text-text-secondary">Loading clipboards...</p>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="min-w-full text-sm">
+                <thead className="text-left text-text-secondary border-b border-surface-hover">
+                  <tr>
+                    <th className="py-2 pr-4">ID</th>
+                    <th className="py-2 pr-4">Entries</th>
+                    <th className="py-2 pr-4">Files</th>
+                    <th className="py-2 pr-4">Password</th>
+                    <th className="py-2 pr-4">TTL</th>
+                    <th className="py-2 pr-4">Last Activity</th>
+                    <th className="py-2 pr-4 text-right">Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {clipboards.length === 0 && (
+                    <tr>
+                      <td className="py-4 text-text-secondary" colSpan={7}>
+                        No clipboards found.
+                      </td>
+                    </tr>
+                  )}
+                  {clipboards.map((clipboard) => (
+                    <tr key={clipboard.id} className="border-b border-surface-hover">
+                      <td className="py-3 pr-4 font-mono">{clipboard.id}</td>
+                      <td className="py-3 pr-4">{clipboard.entryCount}</td>
+                      <td className="py-3 pr-4">{clipboard.fileCount}</td>
+                      <td className="py-3 pr-4">{clipboard.hasPassword ? 'Yes' : 'No'}</td>
+                      <td className="py-3 pr-4">{formatTTL(clipboard.ttl)}</td>
+                      <td className="py-3 pr-4 text-text-secondary">{new Date(clipboard.lastActivity).toLocaleString()}</td>
+                      <td className="py-3 pr-4 text-right">
+                        <div className="flex justify-end gap-2">
+                          <Link href={`/admin/${clipboard.id}`} className="btn btn-secondary btn-sm">
+                            View
+                          </Link>
+                          <button className="btn btn-ghost btn-sm" onClick={() => handleDelete(clipboard.id)}>
+                            Delete
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function formatTTL(ttl: number | null): string {
+  if (ttl === null) return 'None';
+  if (ttl < 60) return `${ttl}s`;
+  if (ttl < 3600) return `${Math.round(ttl / 60)}m`;
+  const hours = Math.round(ttl / 3600);
+  return `${hours}h`;
+}

apps/frontend/src/app/layout.tsx

@@ -0,0 +1,68 @@
+import '@/styles/globals.css';
+import type { Metadata } from 'next';
+import { ToastProvider } from '@/components/ui/Toast';
+
+export const metadata: Metadata = {
+  title: 'Clipboard Online',
+  description: 'Real-time clipboard sharing for text and files across all your devices',
+  keywords: [
+    'clipboard',
+    'online',
+    'sharing',
+    'real-time',
+    'sync',
+    'files',
+    'text',
+    'collaboration',
+    'copy paste online',
+    'universal clipboard',
+    'cloud clipboard',
+    'shared clipboard',
+    'remote clipboard',
+    'device sync',
+    'cross-device copy',
+    'file transfer tool',
+    'text synchronization',
+    'productivity tool',
+    'multi-device clipboard',
+    'web clipboard',
+    'secure clipboard sharing',
+    'instant clipboard',
+    'digital clipboard',
+    'data transfer',
+    'seamless sharing',
+    'clipboard manager',
+    'online copy paste',
+    'pasteboard online',
+  ],
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="icon" href="/favicon.ico" />
+        <meta name="theme-color" content="#121212" />
+      </head>
+      <body>
+        <ToastProvider>
+          <div className="relative">
+            {/* Decorative elements */}
+            <div className="fixed inset-0 z-[-1] overflow-hidden">
+              <div className="absolute -top-[10%] -left-[10%] w-[40%] h-[40%] bg-gradient-radial from-primary/5 to-transparent opacity-30 blur-3xl" />
+              <div className="absolute -bottom-[10%] -right-[10%] w-[40%] h-[40%] bg-gradient-radial from-secondary/5 to-transparent opacity-30 blur-3xl" />
+            </div>
+
+            <main className="flex flex-col min-h-screen">
+              {children}
+            </main>
+          </div>
+        </ToastProvider>
+      </body>
+    </html>
+  );
+}

apps/frontend/src/app/page.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import Link from 'next/link';
+import CreateClipboardCard from '@/components/CreateClipboardCard';
+import JoinClipboardCard from '@/components/JoinClipboardCard';
+import FeaturesSection from '@/components/FeaturesSection';
+import Logo from '@/components/Logo';
+
+export default function Home() {
+  return (
+    <div className="flex flex-col flex-1 relative">
+
+      {/* GitHub Link */}
+      <div className="absolute top-4 sm:right-4 left-1/2 sm:left-auto transform -translate-x-1/2 sm:-translate-x-0 flex space-x-3 items-center z-10">
+        <a
+          href="https://github.com/bilodev7/myclipboard.online"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center px-3 py-1.5 rounded-lg border border-surface-hover bg-surface/50 backdrop-blur-sm hover:bg-surface-hover transition-colors duration-200 text-text-primary shadow-md hover:shadow-glow-sm group"
+        >
+          <svg className="h-5 w-5 mr-2 text-primary group-hover:text-primary/90" viewBox="0 0 16 16" fill="currentColor">
+            <path fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
+          </svg>
+          <span className="font-medium">GitHub</span>
+          {/* <div className="ml-2 px-2 py-0.5 bg-surface/80 rounded-md text-xs flex items-center">
+            <svg className="h-3 w-3 mr-1 text-amber-400" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
+            </svg>
+            <span>1.2k</span>
+          </div> */}
+        </a>
+      </div>
+
+      <div className="w-full max-w-5xl mx-auto flex-1 flex flex-col p-6 sm:p-8 sm:py-14">
+        {/* Main Content Container - This keeps content centered vertically */}
+        <div className="flex-1 flex flex-col justify-center mt-20 sm:mt-0">
+          {/* Logo and Title */}
+          <div className="mb-10 sm:mb-12 flex flex-col items-center">
+            <div className="flex items-center gap-3">
+              {/* <div className='overflow-hidden rounded-lg'>
+                <Logo />
+              </div> */}
+              <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-text-primary bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">
+                Clipboard Online
+              </h1>
+            </div>
+            <p className="text-lg text-center text-text-secondary mt-2">
+              Real-time clipboard sharing for text and files
+            </p>
+          </div>
+
+          {/* Cards Container - Side by side on desktop, stacked on mobile */}
+          <div className="flex flex-col md:flex-row gap-6 md:gap-8 mb-10">
+            <JoinClipboardCard />
+            <CreateClipboardCard />
+          </div>
+
+          {/* Features */}
+          <FeaturesSection />
+
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="text-center text-text-secondary text-xs sm:text-sm py-4 mt-auto border-t border-surface-hover">
+        <p className="flex flex-col sm:flex-row justify-center items-center space-y-2 sm:space-y-0 sm:space-x-2">
+          <span>{new Date().getFullYear()} Clipboard Online</span>
+          <span>A real-time clipboard sharing tool - Developed by Bilo</span>
+        </p>
+      </div>
+    </div>
+  );
+}

apps/frontend/src/components/CreateClipboardCard.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import PasswordModal from './PasswordModal';
+import { useToast } from './ui/Toast';
+import { apiUrl } from '@/lib/constants';
+
+export default function CreateClipboardCard() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [showPasswordModal, setShowPasswordModal] = useState(false);
+  const router = useRouter();
+  const { addToast } = useToast();
+
+  const handleCreateClipboard = async (withPassword = false) => {
+    if (withPassword) {
+      setShowPasswordModal(true);
+      return;
+    }
+
+    await createClipboard();
+  };
+
+  const createClipboard = async (passwordToUse?: string) => {
+    setIsLoading(true);
+    try {
+      const response = await fetch(`${apiUrl}/clipboard/create`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: passwordToUse ? JSON.stringify({ password: passwordToUse }) : undefined,
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || 'Failed to create clipboard');
+      }
+
+      const data = await response.json();
+      if (data.roomCode) {
+        router.push(`/${data.roomCode}`);
+      } else {
+        throw new Error('Room code not received from server');
+      }
+    } catch (err: any) {
+      console.error('Error creating clipboard:', err);
+      addToast(err.message || 'An unexpected error occurred', 'error', 'Error');
+    } finally {
+      setIsLoading(false);
+      setShowPasswordModal(false);
+    }
+  };
+
+  const handlePasswordSubmit = (password: string) => {
+    createClipboard(password);
+  };
+
+  return (
+    <>
+
+      <div className="flex-1 p-6 md:p-8 rounded-xl border border-surface-hover bg-surface/50 backdrop-blur-sm shadow-lg hover:shadow-glow-sm transition-all duration-300 ease-out relative overflow-hidden group">
+        {/* Background elements */}
+        <div className="absolute -top-10 -left-10 w-32 h-32 bg-primary/10 rounded-full animate-pulse-slow group-hover:scale-110 transition-transform duration-500"></div>
+        <div className="absolute -bottom-16 -right-16 w-40 h-40 bg-primary/5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+
+        <div className="relative z-10 flex flex-col h-full gap-10 md:gap-0">
+          <div className="flex items-center mb-auto">
+            <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center mr-3">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+              </svg>
+            </div>
+            <h2 className="text-2xl font-semibold text-text-primary">New Clipboard</h2>
+          </div>
+
+          <p className="text-text-secondary my-auto pl-1">
+            Start a new shared clipboard. A unique 4-character code will be generated for you.
+          </p>
+
+          <div className="flex mt-auto w-full">
+            <button
+              onClick={() => handleCreateClipboard(false)}
+              disabled={isLoading}
+              className="flex-grow py-3 px-4 bg-primary hover:bg-primary/90 text-white font-medium rounded-l-lg flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-primary/30 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isLoading ? (
+                <span className="flex items-center justify-center">
+                  <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  Creating...
+                </span>
+              ) : (
+                <>
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                  </svg>
+                  Create Clipboard
+                </>
+              )}
+            </button>
+            <button
+              onClick={() => handleCreateClipboard(true)}
+              disabled={isLoading}
+              className="w-12 py-3 px-0 bg-primary hover:bg-primary/90 text-white font-medium rounded-r-lg flex items-center justify-center transition-all duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-primary/30 disabled:opacity-50 disabled:cursor-not-allowed border-l border-primary-dark"
+              aria-label="Create password-protected clipboard"
+              title="Create with password"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* Error is now displayed as a toast notification */}
+
+      </div>
+
+      {/* Password Modal */}
+      <PasswordModal
+        isOpen={showPasswordModal}
+        onClose={() => setShowPasswordModal(false)}
+        onSubmit={handlePasswordSubmit}
+        isLoading={isLoading}
+      />
+    </>
+  );
+}