🎉 Crude Cards

A Party Game For Horrible People! 🎉

Web Development Series

Welcome to Crude Cards, a real-time, WebSocket-enabled card game designed for both learning and fun! If you've ever played Cards Against Humanity or Apples to Apples, you already know how to play. This project is built with modern web technologies like React, Next.js, and NestJS to demonstrate technical concepts in a fun and engaging way.

🎯 Game Overview Crude Cards is a good party game for bad people. Perfect for casual hangouts or virtual game nights. Real-time play for multiple players via a WebSocket-powered backend. Adaptable for learning games or quizzes.

🤓 Educational Purpose More than entertainment—this project is a learning resource for full-stack, real-time app development. Find tutorials on building, deploying, and scaling the app in the cloud.

🎨 CrudeCards - Game Dev Series

Introduction to the Series This article provides an overview of the series, explaining what will be covered and the goals of creating a CAH clone.	Defining the Project: What and Why Detailed description of the CAH clone, including its purpose and goals.	Defining the Audience and Stakeholders
Defining Stakeholder Personas The process of creating example users and applying	Conducting In-Person Testing and Gathering Feedback Methods for in-person testing and how to gather and analyze feedback.	Creating Mockups and Prototypes Tools and techniques for creating mockups and prototypes, emphasizing their importance.
Choosing the Tech Stack Detailed explanation of the tech stack and reasons for choosing each technology.	High-Level Application Architecture Overview of the application architecture, key components, and their interactions.
Version Control and Collaboration Importance of version control and best practices for collaboration.	Implementing CI/CD Pipelines Setting up continuous integration and deployment pipelines, including tools and best practices.	Managing Cloud Infrastructure with Terraform Building the User Interface with React Basics of React for building the user interface, including component structure and state management.
Frontend State Management Introduction to Redux for managing application state, with examples.	Architecting Cloud Infrastructure Designing the cloud infrastructure using services like Kubernetes and Docker.	Setting Up the Node.js Backend Basics of Node.js and Express, including how to structure the backend.
Connecting the Frontend and Backend How to connect a React frontend with a Node.js backend, including setting up API routes and handling requests.	Quality Assurance and Testing Overview of testing methodologies including unit, integration, and end-to-end testing, and the tools used for each.	Steps to deploy the app on GCP, including tools and best practices for deployment. Description here. Beep Beep Boop.
Maintaining the Application Regular maintenance tasks and best practices for keeping the app up-to-date.	Performance Tuning Techniques for improving performance, including profiling and optimization.	Cost Management and Optimization Strategies for reducing costs, monitoring and optimizing cloud expenses.

🚀 Browser

🚀 Tech Stack

The tech stack is carefully chosen to showcase modern full-stack development practices. Here's a breakdown:

Layer	Technology	Purpose
Frontend	React	UI development and rendering
	Next.js	Server-side rendering, routing, and API endpoints
	Mantine	UI components and styling
	Redux Toolkit	State management
	Socket.io Client	Real-time communication
Backend	NestJS	Backend framework
	TypeORM	Database ORM for managing entities and migrations
	Socket.io	WebSocket server for real-time events
Infrastructure	GCP	Cloud hosting and deployment
	Docker	Containerization
	Terraform	Infrastructure as Code (IaC)
Testing	Jest	Unit and integration testing
	Testing Library	UI testing
	Storybook	Component testing and documentation

📖 Game Rules

Kind of Like Cards Against Humanity or Apples to Apples

1. Setup:

   • Players connect to a game session via a room code.
   • One player is selected as the "Dealer" for each round.

2. Gameplay:

   • The Dealer plays a black card with a prompt or question e.g., "Wy can't I sleep at night?")
   • The other players choose the funniest white card from their hand to complete the sentence or answer the question.
   • The Dealer reviews the responses and selects the one they find funniest.

3. Winning:

   • The player whose card is chosen wins that round and earns a point.
   • The first player to reach a predefined number of points wins the game.

4. Additional "Fun":

   • The game is customizable with different rule variations to keep things interesting.

💻 How to Run the Game Locally

1. Clone the repository:

   git clone https://github.com/dandonahoe/crude-cards.git

2. Install dependencies:

   pnpm install

3. Run the development server:

   pnpm run reset

4. Open http://localhost:3000 in your browser to view the game.

%%{init: {'theme': 'dark', 'themeVariables': { 

}}}%%
sequenceDiagram
    participant Browser
    participant GameService
    participant PlayerService
    participant WebSocket

    Browser->>WebSocket: Connect with AuthToken
    WebSocket->>GameService: Handle connection request
    GameService->>PlayerService: Validate AuthToken
    PlayerService->>GameService: Return existing Player (if found)
    
    alt AuthToken is valid and game is active
        GameService->>Browser: Rejoin Player to game (Limbo status)
        GameService->>Browser: Check if Player was the dealer
        alt Player was the dealer
            GameService->>Browser: Restore dealer status (if conditions are met)
        end
    else AuthToken is invalid or outdated
        WebSocket->>GameService: Create new Player
        GameService->>Browser: New Player stays on home page
    end

    alt Dealer leaves mid-game
        GameService->>WebSocket: Wait 30 seconds for rejoin
        alt Dealer rejoined
            GameService->>Browser: Continue game
        else Dealer does not rejoin
            GameService->>Browser: Notify players of game end (all lose)
        end
    end

    alt Player uses game code URL
        GameService->>Browser: Validate AuthToken and game code
        alt Game code matches player's current game
            GameService->>Browser: Player joins Limbo status
            GameService->>Browser: Prompt dealer to accept or skip Player
            alt Dealer accepts Player
                GameService->>Browser: Player joins game
            else Dealer skips Player
                GameService->>Browser: Notify Player of removal
            end
        else Game code does not match current game
            Browser->>GameService: Prompt Player to leave current game
        end
    end

Loading

📜 License

This project is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives (CC BY-NC-ND) License with Custom Terms. You can learn from it, share it, and use it for educational purposes, but you must obtain permission for commercial use or any significant modifications.