[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Suspense } from "react" import DrawingCanvas from "@/components/drawing-canvas" import Toolbar from "@/components/toolbar" import UserList from "@/components/user-list" import { Toaster } from "@/components/ui/toaster" export default function Home() { return (

CollabDraw

Active Users

Loading users...

Loading canvas...

) } [V0_FILE]typescriptreact:file="components/drawing-canvas.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" import { useDrawingStore } from "@/lib/store" import { socket } from "@/lib/socket" import { useToast } from "@/components/ui/use-toast" import { Loader2 } from "lucide-react" type Point = { x: number y: number } type DrawEvent = { userId: string color: string width: number points: Point[] } export default function DrawingCanvas() { const canvasRef = useRef(null) const [isDrawing, setIsDrawing] = useState(false) const [isConnected, setIsConnected] = useState(false) const [currentPoints, setCurrentPoints] = useState([]) const { color, width, tool } = useDrawingStore() const { toast } = useToast() useEffect(() => { // Initialize socket connection const username = `User_${Math.floor(Math.random() * 1000)}` localStorage.setItem("username", username) socket.connect() socket.on("connect", () => { setIsConnected(true) socket.emit("user-join", { name: username }) toast({ title: "Connected to drawing room", description: "You can now draw with others in real-time", }) }) socket.on("disconnect", () => { setIsConnected(false) toast({ title: "Disconnected from drawing room", description: "Trying to reconnect...", variant: "destructive", }) }) socket.on("draw", (drawEvent: DrawEvent) => { if (!canvasRef.current) return const ctx = canvasRef.current.getContext("2d") if (!ctx) return ctx.strokeStyle = drawEvent.color ctx.lineWidth = drawEvent.width ctx.lineCap = "round" ctx.lineJoin = "round" if (drawEvent.points.length < 2) return ctx.beginPath() ctx.moveTo(drawEvent.points[0].x, drawEvent.points[0].y) for (let i = 1; i < drawEvent.points.length; i++) { ctx.lineTo(drawEvent.points[i].x, drawEvent.points[i].y) } ctx.stroke() }) socket.on("clear-canvas", () => { if (!canvasRef.current) return const ctx = canvasRef.current.getContext("2d") if (!ctx) return ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height) }) return () => { socket.disconnect() } }, [toast]) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const resizeCanvas = () => { const parent = canvas.parentElement if (!parent) return canvas.width = parent.clientWidth canvas.height = parent.clientHeight } resizeCanvas() window.addEventListener("resize", resizeCanvas) return () => { window.removeEventListener("resize", resizeCanvas) } }, []) const startDrawing = (e: React.MouseEvent) => { if (tool === "eraser") return startErasing(e) const canvas = canvasRef.current if (!canvas) return const rect = canvas.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top setIsDrawing(true) setCurrentPoints([{ x, y }]) } const draw = (e: React.MouseEvent) => { if (!isDrawing) return const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return const rect = canvas.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top const newPoints = [...currentPoints, { x, y }] setCurrentPoints(newPoints) // Draw locally ctx.strokeStyle = tool === "eraser" ? "#ffffff" : color ctx.lineWidth = width ctx.lineCap = "round" ctx.lineJoin = "round" if (newPoints.length < 2) return ctx.beginPath() ctx.moveTo(newPoints[0].x, newPoints[0].y) for (let i = 1; i < newPoints.length; i++) { ctx.lineTo(newPoints[i].x, newPoints[i].y) } ctx.stroke() // Emit to server if we have enough points if (newPoints.length % 3 === 0) { socket.emit("draw", { userId: socket.id, color: tool === "eraser" ? "#ffffff" : color, width, points: newPoints, }) } } const endDrawing = () => { if (!isDrawing) return // Emit final draw event if (currentPoints.length > 0) { socket.emit("draw", { userId: socket.id, color: tool === "eraser" ? "#ffffff" : color, width, points: currentPoints, }) } setIsDrawing(false) setCurrentPoints([]) } const startErasing = (e: React.MouseEvent) => { const canvas = canvasRef.current if (!canvas) return const rect = canvas.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top setIsDrawing(true) setCurrentPoints([{ x, y }]) } return (

{!isConnected && (

Connecting to drawing room...

)}

) } [V0_FILE]typescriptreact:file="components/toolbar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useDrawingStore } from "@/lib/store" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" import { Paintbrush, Eraser, Download, Trash2 } from "lucide-react" import { socket } from "@/lib/socket" export default function Toolbar() { const { color, setColor, width, setWidth, tool, setTool } = useDrawingStore() const tools = [ { id: "brush", icon: , label: "Brush" }, { id: "eraser", icon: , label: "Eraser" }, ] const colors = [ "#000000", // Black "#ffffff", // White "#ff0000", // Red "#00ff00", // Green "#0000ff", // Blue "#ffff00", // Yellow "#ff00ff", // Magenta "#00ffff", // Cyan ] const clearCanvas = () => { if (confirm("Are you sure you want to clear the canvas for everyone?")) { socket.emit("clear-canvas") } } const downloadCanvas = () => { const canvas = document.querySelector("canvas") if (!canvas) return const dataUrl = canvas.toDataURL("image/png") const a = document.createElement("a") a.href = dataUrl a.download = "drawing.png" a.click() } return (

Tools

{tools.map((item) => ( ))}

Colors

{colors.map((c) => (

Brush Size: {width}px

setWidth(value[0])} className="my-2" />

) } [V0_FILE]typescriptreact:file="components/user-list.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { socket } from "@/lib/socket" type ActiveUser = { id: string name: string color: string } export default function UserList() { const [users, setUsers] = useState([]) useEffect(() => { // Listen for user updates socket.on("users", (activeUsers: ActiveUser[]) => { setUsers(activeUsers) }) return () => { socket.off("users") } }, []) if (users.length === 0) { return

No active users

} return (

{user.name} {user.id === socket.id && "(You)"}

) } [V0_FILE]typescriptreact:file="lib/store.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { create } from "zustand" type DrawingState = { color: string width: number tool: string setColor: (color: string) => void setWidth: (width: number) => void setTool: (tool: string) => void } export const useDrawingStore = create((set) => ({ color: "#000000", width: 5, tool: "brush", setColor: (color) => set({ color }), setWidth: (width) => set({ width }), setTool: (tool) => set({ tool }), })) [V0_FILE]typescriptreact:file="lib/socket.ts" isMerged="true" import { io } from "socket.io-client" // Initialize socket connection export const socket = io(process.env.NEXT_PUBLIC_SOCKET_URL || "http://localhost:3001", { autoConnect: false, }) [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/slider.tsx" isMerged="true" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" const Slider = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Slider.displayName = SliderPrimitive.Root.displayName export { Slider } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true" "use client" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background text-foreground", destructive: "destructive group border-destructive bg-destructive text-destructive-foreground", }, }, defaultVariants: { variant: "default", }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/components/ui/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(({ id, title, description, action, ...props }) => (

{title && {title}} {description && {description}}

{action} ))} ) } [V0_FILE]typescriptreact:file="components/ui/use-toast.ts" isFixed="true" isQuickEdit="true" isMerged="true" "use client" // Adapted from: https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/use-toast.ts import * as React from "react" import type { ToastActionElement, ToastProps } from "@/components/ui/toast" const TOAST_LIMIT = 5 const TOAST_REMOVE_DELAY = 1000000 type ToasterToast = ToastProps & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement } const actionTypes = { ADD_TOAST: "ADD_TOAST", UPDATE_TOAST: "UPDATE_TOAST", DISMISS_TOAST: "DISMISS_TOAST", REMOVE_TOAST: "REMOVE_TOAST", } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_SAFE_INTEGER return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType["ADD_TOAST"] toast: ToasterToast } | { type: ActionType["UPDATE_TOAST"] toast: Partial } | { type: ActionType["DISMISS_TOAST"] toastId?: string } | { type: ActionType["REMOVE_TOAST"] toastId?: string } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const reducer = (state: State, action: Action): State => { switch (action.type) { case actionTypes.ADD_TOAST: return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case actionTypes.UPDATE_TOAST: return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), } case actionTypes.DISMISS_TOAST: { const { toastId } = action // ! Side effects ! - This could be extracted into a dismissToast() action, // but I'll keep it here for simplicity if (toastId) { toastTimeouts.set( toastId, setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: actionTypes.REMOVE_TOAST, toastId, }) }, TOAST_REMOVE_DELAY), ) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case actionTypes.REMOVE_TOAST: if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type Toast = Omit function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: actionTypes.UPDATE_TOAST, toast: { ...props, id }, }) const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id }) dispatch({ type: actionTypes.ADD_TOAST, toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id: id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, []) return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }), } } export { useToast, toast } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "CollabDraw - Real-time Collaborative Drawing", description: "Draw together with friends and colleagues in real-time", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]javascript:type="nodejs" project="CollabDraw Backend" file="index.js" isQuickEdit="true" import express from "express" import { createServer } from "http" import { Server } from "socket.io" import cors from "cors" const app = express() const httpServer = createServer(app) // Enable CORS for all routes app.use( cors({ origin: process.env.FRONTEND_URL || "http://localhost:3000", methods: ["GET", "POST"], credentials: true, }), ) // Initialize Socket.io with CORS configuration const io = new Server(httpServer, { cors: { origin: process.env.FRONTEND_URL || "http://localhost:3000", methods: ["GET", "POST"], credentials: true, }, }) // Store active users const activeUsers = new Map() // Socket.io connection handler io.on("connection", (socket) => { console.log(`User connected: ${socket.id}`) // Handle user joining socket.on("user-join", (data) => { const user = { id: socket.id, name: data.name || "Anonymous", color: getRandomColor(), } activeUsers.set(socket.id, user) // Broadcast updated user list to all clients io.emit("users", Array.from(activeUsers.values())) }) // Handle drawing events socket.on("draw", (drawEvent) => { // Broadcast drawing event to all other clients socket.broadcast.emit("draw", drawEvent) }) // Handle clear canvas event socket.on("clear-canvas", () => { // Broadcast clear canvas event to all clients io.emit("clear-canvas") }) // Handle disconnection socket.on("disconnect", () => { console.log(`User disconnected: ${socket.id}`) // Remove user from active users activeUsers.delete(socket.id) // Broadcast updated user list to all clients io.emit("users", Array.from(activeUsers.values())) }) }) // API routes app.get("/", (req, res) => { res.send("CollabDraw WebSocket Server is running") }) // Generate random color for user function getRandomColor() { const colors = [ "#FF6B6B", // Red "#4ECDC4", // Teal "#FF9F1C", // Orange "#2EC4B6", // Turquoise "#E71D36", // Bright Red "#011627", // Dark Blue "#8A4FFF", // Purple "#3A506B", // Slate Blue "#1B998B", // Green ] return colors[Math.floor(Math.random() * colors.length)] } // Start server const PORT = process.env.PORT || 3001 httpServer.listen(PORT, () => { console.log(`Server running on port ${PORT}`) }) // For Vercel serverless deployment export default app