❐ ❐ ❐ Crude Cards - A shameless "parody" of Cards Against Humanity for those of you who love laughing at the worst things imaginable — because clearly, your sense of humor is broken.
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.
This article provides an overview of the series, explaining what will be covered and the goals of creating a CAH clone.
The process of creating example users and applying
Methods for in-person testing and how to gather and analyze feedback.
Tools and techniques for creating mockups and prototypes, emphasizing their importance.
Detailed explanation of the tech stack and reasons for choosing each technology.
Overview of the application architecture, key components, and their interactions.
Importance of version control and best practices for collaboration.
Setting up continuous integration and deployment pipelines, including tools and best practices.
Building the User Interface with React Basics of React for building the user interface, including component structure and state management.
Introduction to Redux for managing application state, with examples.
Designing the cloud infrastructure using services like Kubernetes and Docker.
Basics of Node.js and Express, including how to structure the backend.
Description here. Beep Beep Boop.
Regular maintenance tasks and best practices for keeping the app up-to-date.
The tech stack is carefully chosen to showcase modern full-stack development practices. Here's a breakdown:
Setup:
Gameplay:
Winning:
Additional "Fun":
git clone https://github.com/dandonahoe/crude-cards.git
pnpm install
pnpm run reset
%%{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
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.