Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dandonahoe/crude-cards
❐ ❐ ❐ 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.
https://github.com/dandonahoe/crude-cards
cypress docker game jest kubernetes nestjs nextjs react storybook tutorial typescript websockets
Last synced: 3 months ago
JSON representation
❐ ❐ ❐ 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.
- Host: GitHub
- URL: https://github.com/dandonahoe/crude-cards
- Owner: dandonahoe
- Created: 2024-08-23T17:31:51.000Z (5 months ago)
- Default Branch: dev
- Last Pushed: 2024-09-23T00:10:39.000Z (4 months ago)
- Last Synced: 2024-09-29T22:41:46.383Z (3 months ago)
- Topics: cypress, docker, game, jest, kubernetes, nestjs, nextjs, react, storybook, tutorial, typescript, websockets
- Language: TypeScript
- Homepage: https://crude.cards
- Size: 99.9 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# 🎉 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:
```bash
git clone https://github.com/dandonahoe/crude-cards.git
```
2. Install dependencies:
```bash
pnpm install
```
3. Run the development server:
```bash
pnpm run reset
```
4. Open [http://localhost:3000](http://localhost:3000) in your browser to view the game.
```mermaid
%%{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
```
## 📜 **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.