Skip to content

CLAUDE.md

Latest commit

 

History

History
233 lines (185 loc) · 10.7 KB

CLAUDE.md

File metadata and controls

233 lines (185 loc) · 10.7 KB

Code Pattern Cards 🃏

A beautifully crafted collection of algorithmic pattern cards designed as educational trading cards for computer science students, developers, and coding enthusiasts. Each card presents programming concepts through engaging visual storytelling, making abstract concepts tangible and memorable.

Project Overview

This repository contains meticulously designed SVG cards organized into a comprehensive tier system for progressive learning. The cards follow a trading card game aesthetic with "mana costs" indicating complexity, visual illustrations of concepts in action, and real-world applications.

Tier System & Background Colors

The cards are organized into tiers that represent different levels of programming expertise:

Tier One: Base Blocks 🟡 (Yellow/Light backgrounds)

Mana Cost: 1 | Beginner Foundation

  • Background Colors: Warm yellows, light purples, light blues, light oranges, light teals
  • Purpose: Fundamental programming syntax and basic concepts
  • Audience: Complete beginners, syntax reference across multiple languages

Tier Two: Pattern Cards 🌈 (Rich/Vibrant backgrounds)

Mana Cost: 2-5 | Algorithmic Patterns

  • Background Colors: Rich purples, deep blues, forest greens, warm oranges, vibrant teals
  • Purpose: Advanced algorithmic patterns and problem-solving techniques
  • Audience: Intermediate to advanced developers, technical interview preparation

Card Collection

Tier One: Base Blocks (9 Cards)

Foundational programming concepts with multi-language syntax comparisons:

  • Variables - "The Data Containers" (Mana: 1)

    • Light purple background (#E8EAF6)
    • Variable declaration syntax across Python, JavaScript, TypeScript, and C#
    • Covers primitive types, arrays, and collections
    • Real-world: State management, configuration, user data

  • Basic Operators - "The Calculation Engine" (Mana: 1)

    • Light yellow background (#FFF8E1)
    • Arithmetic, comparison, and logical operators
    • Language-specific gotchas and best practices
    • Real-world: Financial calculations, game scoring, business logic

  • Functions - "The Code Organizers" (Mana: 1)

    • Light purple background (#F3E5F5)
    • Function declaration, arrow functions, and lambda expressions
    • Parameter types and return values across languages
    • Real-world: Code reuse, API endpoints, event handlers

  • If/Else Statements - "Multi-Language Syntax Guide" (Mana: 1)

    • Light blue background (#E3F2FD)
    • Conditional logic patterns and syntax differences
    • Universal decision-making structures
    • Real-world: User validation, business rules, flow control

  • Loops - "The Repetition Masters" (Mana: 1)

    • Light orange background (#FFF3E0)
    • For loops, foreach loops, and iteration patterns
    • Collection traversal techniques
    • Real-world: Data processing, batch operations, file processing

  • Arrays & Collections - "The Data Organizers" (Mana: 1)

    • Light teal background (#E0F2F1)
    • Array creation, access patterns, and collection operations
    • Dictionary/object manipulation across languages
    • Real-world: User lists, shopping carts, database records

  • Input/Output - "The Communication Bridge" (Mana: 1)

    • Console input/output and basic file operations
    • User interaction patterns across platforms

  • Switch/Case - "The Multi-Branch Selector" (Mana: 1)

    • Alternative to long if-else chains
    • Pattern matching and enumeration handling

  • Try/Catch - "The Error Guardian" (Mana: 1)

    • Exception handling and error management
    • Graceful failure and recovery patterns

Tier Two: Pattern Cards (15 Cards)

Advanced algorithmic patterns with rich visual storytelling:

🔍 Search & Navigation Patterns

  • Binary Search (Fixed) - "The Smart Searcher" (Mana: 3)

    • Light yellow background (#FFF8E1) with golden accents
    • Visualizes rotated array search with step-by-step decision tree
    • O(log n) complexity even in modified arrays
    • Real-world: Database indexing, version control, load balancer selection

  • BFS - "The Wave Explorer" (Mana: 2)

    • Light blue background (#E1F5FE) with wave motifs
    • Shows ripple-effect level-by-level exploration with queue visualization
    • Guarantees shortest path in unweighted graphs
    • Real-world: GPS navigation, social networks, web crawling

  • DFS - "The Deep Explorer" (Mana: 3)

    • Brown/earth background (#EFEBE9) with cave theme
    • Illustrates depth-first cave exploration with stack mechanics
    • Memory efficient recursive approach
    • Real-world: Maze solving, dependency resolution, topological sorting

🏹 Pointer Techniques

  • Two Pointers - "The Converging Hunters" (Mana: 2)

    • Light blue background (#E3F2FD) with arrow motifs
    • Demonstrates elegant pair-finding on sorted arrays
    • O(n) time instead of O(n²) brute force
    • Real-world: Database joins, network analysis, palindrome detection

  • Fast and Slow Pointers (Fixed) - "Tortoise and Hare" (Mana: 3)

    • Light purple background (#F3E5F5) with cycle visualization
    • Shows cycle detection in linked lists using Floyd's algorithm
    • O(1) space complexity for cycle problems
    • Real-world: Deadlock detection, memory leak finding, network loops

  • Sliding Window - "The Moving Window Technique" (Mana: 2)

    • Light orange background (#FFF3E0) with window animations
    • Visualizes optimal subarray problems with window movement
    • O(n) time for subarray analysis
    • Real-world: Stock analysis, network monitoring, stream processing

🏗️ Data Structure Mastery

  • LinkedList Reversal - "The Chain Flipper" (Mana: 2)

    • Light red background (#FFEBEE) with chain animations
    • Shows in-place pointer manipulation with 3-pointer dance
    • O(1) space complexity with constant memory
    • Real-world: Undo operations, browser history, memory management

  • Monotonic Stack - "The Order Keeper" (Mana: 3)

    • Light indigo background (#E8EAF6) with stack visualization
    • Demonstrates next greater element finding with stack evolution
    • O(n) time for comparison problems
    • Real-world: Stock price analysis, histogram problems, temperature tracking

  • Top K Elements (Fixed) - "The Elite Selector" (Mana: 4)

    • Light pink background (#FCE4EC) with podium theme
    • Visualizes heap-powered championship with min-heap mechanics
    • O(n log k) time with space-efficient heap usage
    • Real-world: Search rankings, trending topics, performance leaderboards

🌳 Tree & Graph Algorithms

  • Tree Traversal - "The Tree Walker" (Mana: 2)

    • Light green background (#E8F5E8) with tree structure
    • Shows three sacred journeys: PreOrder, InOrder, PostOrder
    • O(n) time to visit all nodes with recursive elegance
    • Real-world: File systems, expression parsing, decision trees

  • Backtracking - "The Solution Hunter" (Mana: 4)

    • Light orange background (#FFF3E0) with chessboard theme
    • Illustrates N-Queens problem with try-undo-retry methodology
    • Exhaustive search with early pruning
    • Real-world: Sudoku solver, constraint satisfaction, AI planning

📊 Mathematical Patterns

  • Dynamic Programming - "The Ultimate Optimizer" (Mana: 5)

    • Light purple background (#F3E5F5) with memory visualization
    • Contrasts exponential vs linear approaches using Fibonacci
    • Transforms exponential time to linear through memoization
    • Real-world: Investment optimization, resource allocation, AI decisions

  • Prefix Sum - "The Cumulative Growth Pattern" (Mana: 1)

    • Light green background (#E8F5E8) with growing bars
    • Visualizes accumulative summation with visual growth
    • O(1) subarray sum calculations after preprocessing
    • Real-world: Database optimization, spreadsheet totals, time-series analysis

🎯 Advanced Techniques

  • Matrix Traversal - "The Grid Master" (Mana: 2)

    • Light green background (#F1F8E9) with grid patterns
    • Shows 2D navigation with multiple traversal patterns
    • O(m×n) time with flexible pattern support
    • Real-world: Image processing, game grids, geographic data

  • Interval Merging - "The Time Unifier" (Mana: 3)

    • Light teal background (#E0F2F1) with timeline theme
    • Demonstrates calendar conflict resolution with timeline visualization
    • O(n log n) sorting plus O(n) merging
    • Real-world: Calendar scheduling, resource allocation, meeting rooms

Design Features

Visual Storytelling

  • Each card uses metaphorical themes (hunters, explorers, masters, etc.)
  • Step-by-step algorithm visualization with arrows and animations
  • Color-coded complexity and visual hierarchy
  • Real problem examples with concrete data

Educational Structure

  • Header: Pattern name and memorable subtitle
  • Mana Cost: Complexity indicator (1-5 scale)
  • Visual Illustration: Core algorithm demonstration
  • Powers: Technical specifications and benefits
  • Real World Applications: Practical use cases

Technical Quality

  • Pure SVG format for scalability and web compatibility
  • Consistent 400x600 viewport with responsive design
  • Professional color schemes matching algorithmic themes
  • Clean typography with proper visual hierarchy

Usage Scenarios

Educational

  • Computer Science Courses: Visual aids for algorithm lectures
  • Self-Study: Quick reference cards for algorithm review
  • Interview Preparation: Pattern recognition and recall training
  • Coding Bootcamps: Engaging supplement to traditional materials

Professional

  • Technical Interviews: Pattern identification practice
  • Code Reviews: Reference for suggesting optimal approaches
  • Team Training: Shared vocabulary for algorithmic discussions
  • Documentation: Visual explanations in technical docs

Technical Implementation

The cards are implemented as standalone SVG files with:

  • Responsive Design: Scalable vector graphics work at any size
  • Web Integration: Can be embedded directly in web pages
  • Print Ready: High-quality output for physical cards
  • Accessibility: Proper text elements for screen readers

Future Enhancements

Potential expansions could include:

  • Interactive web versions with step-through animations
  • Additional advanced patterns (Union-Find, Segment Trees, etc.)
  • Multi-language code snippets
  • Difficulty progression tracks
  • Mobile app with spaced repetition learning

Project Impact

This collection transforms abstract algorithmic concepts into memorable visual narratives, making computer science education more engaging and accessible. By combining gaming aesthetics with rigorous technical content, it bridges the gap between theoretical knowledge and practical application.

The cards serve as both learning tools and quick reference materials, helping developers internalize pattern recognition skills essential for technical interviews and professional software development.