A collaborative resource management game built with Next.js, WebSocket, and React.

You need to install Node.js

# Install dependencies
npm install

# Copy environment variables
cp .env.local.example .env.local

# Start development server
npm dev

This project uses a structured WebSocket architecture with:

• ✅ Type-safe messaging - All messages are typed
• ✅ Automatic reconnection - 5 attempts, 3s delay
• ✅ Event-based system - Pub/sub pattern
• ✅ Reusable hooks - Easy to use in components
• ✅ Status indicator - Visual connection feedback
• ✅ Error handling - Comprehensive error management

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS 4
• State Management: Zustand
• WebSocket: Native WebSocket API

Create a .env.local file:

# Socket Configuration
NEXT_PUBLIC_SOCKET_URL=ws://localhost:9090/

Modify reconnection settings in utils/config.ts:

export const SOCKET_CONFIG = {
  reconnect: {
    maxAttempts: 5,
    delay: 3000, // ms
  },
};

Ready to play? 🎮

Visit localhost:3000 to get started!