← All projects

Deploy or Die

Monopoly but Cybersecurity

Project period · February 20267 min readRepository documentationProject repository ↗
Deploy or Die — project illustration
Project illustration

Imported repository documentation. Claims and project status reflect the source. Read the source on GitHub ↗

🎲 Deploy Or Die - Multiplayer Strategic Development Game

A sophisticated web-based multiplayer game combining development lifecycle management with strategic board gameplay. Build projects, deploy to production, and outsmart your competitors!

Deploy Or Die TypeScript Cloudflare Socket.io

✨ Features

🎯 Game Themes

  • Cybersecurity: Build and deploy secure applications
  • Automotive: Design and manufacture vehicles
  • Business: Establish and grow a business empire
  • General: Create and launch innovative products

🤖 AI-Powered Content

  • Groq AI Integration for dynamic project name generation
  • Theme-appropriate naming (e.g., “Tesla Roadster X” for automotive)
  • Unique names for each player every game
  • Fallback system if AI unavailable

🎮 Two-Phase Gameplay

  1. SDLC Phase: Step-by-step development with strategic choices

    • Planning, Design, Development, Testing, Deployment
    • Budget vs Quality decisions
    • Optional security/quality steps
    • Risk management

  2. Production Phase: Monopoly-style board game

    • Dice-based movement
    • Incidents based on skipped steps
    • Bonus tiles and rewards
    • Strategic gameplay

💬 Communication

  • Real-time Chat System in lobby and during games
  • System announcements for events
  • Per-room message history
  • Persistent across game phases

🔐 Authentication & Persistence

  • User Accounts with email/password
  • Guest Mode for quick play
  • Active Games Tracking - rejoin if disconnected
  • Session Management with auto-login
  • Powered by Cloudflare D1 database

📚 Tutorial System

  • Interactive Tutorials for first-time players
  • Step-by-step guidance with highlights
  • Skip option available
  • Covers all game phases
  • Stored preference (won’t show again)

🎨 Elegant Design

  • Dual Themes: Rich dark mode & sophisticated light mode
  • Luxury Fonts: Playfair Display, Crimson Text, Cormorant Garamond
  • Gold & Burgundy Accents for a premium feel
  • Smooth Animations and transitions
  • Fully Responsive for all devices

🚀 Quick Start

Local Development (Express Server)

# Install dependencies
npm install

# Build and start
npm run build
npm start

Open http://localhost:3001

Note: Local server has limited features (no auth, no AI). Use guest mode.

Cloudflare Deployment (Full Features)

See DEPLOYMENT.md for complete setup guide.

# Quick deploy
./setup.sh  # Interactive setup wizard

# Or manual
wrangler d1 create deploy-or-die-db
wrangler d1 execute deploy-or-die-db --file=./migrations/001_init.sql
wrangler secret put GROQ_API_KEY
wrangler deploy

📁 Project Structure

cyber-monopoly/
├── client/                    # Frontend (Vite + TypeScript)
│   ├── components/           # Game components
│   │   ├── SocketManager.ts # WebSocket client
│   │   ├── UIManager.ts     # UI state management
│   │   ├── BoardRenderer.ts # Canvas board rendering
│   │   ├── AuthManager.ts   # Authentication
│   │   └── TutorialManager.ts # Tutorial system
│   ├── styles/
│   │   ├── main.css         # Light theme
│   │   └── main-dark.css    # Dark theme
│   ├── index.html           # Main app
│   ├── 404.html             # Error pages
│   └── main.ts              # Entry point
│
├── server/                   # Express Backend (local dev)
│   ├── game/                # Game logic
│   │   ├── GameManager.ts  # Core mechanics
│   │   └── RoomManager.ts  # Lobby management
│   ├── services/
│   │   ├── GroqService.ts  # AI integration
│   │   └── AuthService.ts  # Authentication
│   └── index.ts             # Server entry
│
├── src/                      # Cloudflare Workers (production)
│   ├── worker.ts            # Worker entry point
│   ├── router.ts            # Request routing
│   ├── room.ts              # Durable Object
│   ├── game.ts              # Game logic (Workers)
│   └── types.ts             # Worker types
│
├── shared/                   # Shared code
│   ├── types.ts             # Type definitions
│   ├── themes.ts            # Game themes
│   ├── themeBoards.ts       # Theme-specific boards
│   ├── board.json           # Tile configuration
│   └── cards.json           # Card data
│
├── migrations/               # Database migrations
│   └── 001_init.sql         # Initial schema
│
└── wrangler.toml            # Cloudflare config

├── package.json # Dependencies and scripts ├── tsconfig.json # TypeScript config (client) ├── tsconfig.server.json # TypeScript config (server) └── vite.config.ts # Vite bundler config


## 🎲 How to Play

### Starting a Game

1. **Create Room**: Click "Create Room" and enter your name
2. **Share Code**: Share the 6-character room code with friends
3. **Wait for Players**: Players join using "Join Room"
4. **Ready Up**: All players click "Ready"
5. **Start Game**: Host clicks "Start Game"

### Gameplay

1. **Roll Dice**: Click "Roll Dice" on your turn
2. **Move**: Your piece automatically moves
3. **Tile Event**: Respond to tile effects and card draws
4. **End Turn**: Click "End Turn" to pass to next player

### Winning

- **Primary**: First player to reach "Finish" tile
- **Secondary**: Highest balance after 50 rounds

### Tile Types

| Type | Symbol | Effect |
|------|--------|--------|
| Start | 🎯 | Collect $100 |
| Task | 💼 | Draw a challenge card |
| Pay | 💰 | Gain or lose money |
| Incident | ⚠️ | Security incident card |
| Progress | 📈 | Milestone bonus |
| Finish | 🏁 | Win the game! |

## 🛠️ Development

### Available Scripts

```bash
# Development (runs both client and server)
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Client only
npm run client:dev

# Server only
npm run server:dev

Technology Stack

Frontend

  • TypeScript - Type-safe JavaScript
  • Vite - Fast build tool
  • Canvas API - Board rendering
  • Socket.IO Client - Real-time communication
  • CSS3 - Playful styling with animations

Backend

  • Node.js - Runtime environment
  • Express - Web framework
  • Socket.IO - WebSocket server
  • TypeScript - Type safety

Architecture

  • MVC Pattern - Separation of concerns
  • Event-Driven - Real-time updates
  • In-Memory Storage - Fast state management
  • Modular Design - Easy to extend

🎨 Customization

Adding New Tiles

Edit shared/board.json:

{
  "id": 24,
  "type": "task",
  "label": "Your Tile Name",
  "description": "What happens here"
}

Adding New Cards

Edit shared/cards.json:

{
  "id": "card-id",
  "type": "vulnerability",
  "title": "Card Title",
  "description": "Card description",
  "effect": {
    "type": "balance",
    "value": -10
  }
}

Card Effect Types

  • balance - Add/subtract money
  • move - Move player forward/back
  • status - Apply buff/debuff
  • skip-turn - Skip next turn
  • choice - Player makes a choice

Styling

Modify CSS variables in client/styles/main.css:

:root {
  --cyber-primary: #00ff41;    /* Primary color */
  --cyber-secondary: #ff00ff;  /* Secondary color */
  --cyber-accent: #00ffff;     /* Accent color */
  /* ... more variables */
}

🔒 Security Features

  • Server-side Validation - All game logic validated on server
  • Anti-cheat - Moves validated before execution
  • Room Codes - 6-character unique identifiers
  • Connection Management - Handles disconnects gracefully
  • Input Sanitization - Player names and room codes validated

🚀 Deployment

Environment Variables

Create .env file:

PORT=3001
NODE_ENV=production
CLIENT_URL=https://your-domain.com

Build and Deploy

# Build both client and server
npm run build

# Start production server
npm start

Hosting Options

  • Frontend: Vercel, Netlify, Cloudflare Pages
  • Backend: Railway, Render, Heroku, DigitalOcean
  • Full Stack: AWS, Google Cloud, Azure

🔧 Future Enhancements

  • Redis integration for persistent storage
  • Database for game history
  • Player accounts and profiles
  • Leaderboards and statistics
  • Sound effects and music
  • Additional board themes
  • Power-ups and special abilities
  • Tournament mode
  • Spectator mode
  • Mobile app version

🐛 Troubleshooting

Port Already in Use

# Kill process on port 3000 or 3001
lsof -ti:3000 | xargs kill
lsof -ti:3001 | xargs kill

Connection Issues

  • Check firewall settings
  • Ensure ports 3000 and 3001 are open
  • Verify WebSocket support in browser

Build Errors

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

📝 Game Design

Balance Configuration

Edit shared/types.ts → DEFAULT_CONFIG:

export const DEFAULT_CONFIG: GameConfig = {
  minPlayers: 2,
  maxPlayers: 6,
  startingBalance: 100,
  maxRounds: 50,
  diceMin: 1,
  diceMax: 6,
  reconnectTimeout: 60000,
};

🎯 Performance

  • Real-time Updates: <50ms latency
  • Smooth Animations: 60 FPS canvas rendering
  • Optimized Rendering: Only updates changed elements
  • Efficient State: Minimal bandwidth usage
  • Scalable: Supports multiple concurrent games

📄 License

This project is open source and available for educational purposes.

🤝 Contributing

Feel free to submit issues and enhancement requests!

🎮 Credits

Developed with ❤️ using modern web technologies.

Have fun playing Deploy Or Die! 🎲🔐

For questions or support, please open an issue on GitHub.

Back to projects ↗