Overview

An interactive Sudoku web application built with Blazor Server, featuring intelligent gameplay assistance, real-time validation, and competitive scoring. This fully-featured puzzle game demonstrates modern web application development with responsive design principles and engaging user experience patterns.

The application provides three difficulty levels, smart hint systems, and persistent high score tracking—all optimized for both desktop and mobile play with a clean, intuitive interface.

Project Motivation

This project was created to:

  • Build a production-ready web application using Blazor Server and .NET 8
  • Implement complex game logic with real-time user interaction and validation
  • Create a mobile-first responsive design that works seamlessly across all devices
  • Develop intelligent algorithms for conflict detection and hint generation
  • Apply modern UI/UX principles for an engaging puzzle-solving experience

Sudoku provided an excellent use case for exploring interactive web components, state management, and creating a polished user experience with real-time feedback systems.

Technical Implementation

The application demonstrates full-stack web development capabilities:

1. Game Logic & Validation

  • Conflict Detection: Real-time algorithm checking rows, columns, and 3x3 sub-grids for duplicate numbers
  • Puzzle Validation: Custom validator ensuring all puzzle solutions follow Sudoku mathematical rules
  • Smart Hints: Context-aware hint system that provides correct numbers based on validated solutions
  • State Management: Tracking given numbers, user entries, and hint-filled cells with distinct visual styling

2. Scoring System

  • Dynamic Points: Starting score of 1,000 with penalties for using help features
  • Difficulty Bonuses: Completion bonuses scaled by difficulty level (Easy: 100, Medium: 200, Hard: 300)
  • Perfect Game Multiplier: 50% bonus for solving without using any hints
  • High Score Persistence: JSON-based storage tracking top scores per difficulty level with player names

3. Responsive Design

  • Mobile-First Approach: CSS media queries supporting devices from 320px to desktop widths
  • Adaptive Grid Sizing: Sudoku grid scales from 30×30px (small phones) to 50×50px (desktop)
  • Touch-Friendly Controls: Optimized button sizes and spacing for mobile interaction
  • Flexible Layouts: Game info switches from horizontal to vertical stacking on smaller screens

4. Data Architecture

  • Puzzle Storage: JSON-based puzzle library with validated solutions organized by difficulty
  • Dynamic Loading: Random puzzle selection from file system with automatic puzzle number extraction
  • Data Validation Tool: Standalone console application for verifying puzzle integrity before deployment
  • Thread-Safe Operations: SemaphoreSlim for concurrent file access in high score management

5. User Experience Features

  • Instant Validation: Automatic verification on every entry—incorrect answers display an X, shake animation, deduct 50 points, and clear after 2 seconds
  • Visual Differentiation: Color-coded numbers (black for given clues, blue for user entries, purple/underlined for hints)
  • Victory Celebrations: Dynamic messages with score breakdowns and achievements (only when genuinely solved)
  • Dismissible Notifications: Auto-fading status messages for user actions and errors

Key Features Demonstrated

Real-Time Validation

Instant conflict detection with visual highlighting of duplicate numbers in rows, columns, and boxes

<

Intelligent Assistance

Multi-tier help system: automatic validation on entry (-50 pts for wrong answers), single hint (-50 pts), or full solution reveal (-500 pts)

Competitive Scoring

Leaderboard system with difficulty-based bonuses and perfect-game multipliers encouraging skillful play

Cross-Device Experience

Fully responsive design optimized for desktop, tablet, and mobile with touch-friendly controls

Development Highlights

  • Component Architecture: Blazor Server with InteractiveServer render mode for real-time UI updates
  • Dependency Injection: Scoped services for puzzle loading and high score management
  • Algorithm Design: Efficient conflict detection checking all Sudoku constraints in real-time
  • Data Validation: Built custom console tool that validated 40 puzzles, identified 18 invalid solutions, maintained 20 verified puzzles
  • Responsive CSS: Two breakpoints (768px, 400px) with adaptive sizing for optimal viewing on any device
  • State Persistence: JSON storage for high scores with thread-safe file operations

Technical Stack

  • Backend Framework: ASP.NET Core 8.0 with Blazor Server
  • Programming Language: C# / .NET 8
  • Frontend: Razor Components with scoped CSS
  • Styling: CSS3 with media queries and flexbox/grid layouts
  • Data Format: JSON for puzzle storage and high score persistence
  • Development Tools: Visual Studio, Git
  • Deployment: Azure App Service

Game Mechanics

The application includes 20 validated Sudoku puzzles across three difficulty levels (8 Easy, 6 Medium, 6 Hard). Each puzzle has been verified through a custom validation algorithm ensuring solutions follow all Sudoku rules with no duplicate numbers in rows, columns, or 3×3 sub-grids.