Windows 98 Community Simulator - Devpost Submission

🖥️ Bringing the Classic Desktop Experience to Reddit

A comprehensive Windows 98 desktop simulator built on Reddit's Developer Platform that delivers an authentic retro computing experience complete with boot sequences, desktop environment, and fully playable Klondike Solitaire - all within a Reddit post.

https://www.reddit.com/r/win_98_v3_dev

https://github.com/ShannonCanTech/win-98-v3

💡 Inspiration

The inspiration came from a simple question: What if we could share the magic of Windows 98 with a new generation of Reddit users?

For many of us who grew up in the late 90s and early 2000s, Windows 98 was our gateway to the digital world. The satisfying click of desktop icons, the therapeutic card dealing in Solitaire during lunch breaks, the anticipation of the boot sequence - these experiences defined an era of computing.

With Reddit's Devvit platform enabling immersive experiences directly in posts, we saw an opportunity to recreate this nostalgic computing environment as a community experience. The goal wasn't just to build a simulator - it was to create a time machine that could transport users back to 1998, whether they lived through it or are discovering it for the first time.

Drawing inspiration from several outstanding open-source projects in the retro computing community (98.js, React95, winclassic, and various Windows 98 recreations), we set out to build something that honored the authenticity of the original while leveraging modern web technologies to make it accessible on today's mobile-first platform.

🎮 What It Does

Complete Windows 98 Experience

Authentic Boot Sequence

Blue Screen of Death (BSOD) entrance with authentic error message
Classic DOS boot screen with POST messages
Windows 98 startup animation with iconic boot.gif
Press any key to skip or auto-advance through stages

Interactive Desktop Environment

Fully functional Windows 98 desktop with authentic UI chrome
Working Start menu with application launcher
System tray with live clock and date
Desktop icons for quick application access (Notepad, Calculator, Solitaire, AOL IM, Minesweeper)

Professional Window Management System

Advanced draggable windows with proper title bar controls
Minimize, maximize, and close buttons with authentic styling
Z-index management for proper window stacking
Smart boundary constraints (windows can't be dragged off-screen)
Edge snapping for intuitive window positioning
Focus management - click any window to bring it to front
Taskbar buttons for easy application switching

Fully Playable Klondike Solitaire 🎴

The centerpiece application featuring:

Complete Game Mechanics

Full Klondike Solitaire rules implementation
52-card deck with proper shuffling algorithm
Deck clicking to deal 3 cards at a time
Waste pile with automatic deck reset when empty
Four foundation piles (Ace to King by suit)
Seven tableau columns with proper building rules
Automatic face-down card flipping

Interactive Gameplay

Drag-and-drop card movement between all game areas
Click-to-move automation for valid moves
Foundation auto-placement when possible
Card validation preventing invalid moves
Win condition detection
Move counter tracking every action
Live game timer in MM:SS format

Authentic Windows 98 Styling

Original Windows 98 card sprites (71x96 pixels)
Classic green felt background
Proper window chrome with menu bar
Responsive scaling that maintains card proportions
Sound effects for card flips, placements, and win celebration

Mobile Optimization

Touch-enabled drag-and-drop
Responsive layout for Reddit's mobile-first audience
Viewport containment system
Dynamic scaling with container queries

Classic Applications Suite

Notepad

Full-featured text editor with authentic Windows 98 styling
Working textarea with proper focus management
Classic window chrome and menu bar

Calculator

Functional calculator with standard arithmetic operations
Authentic button layout and LCD-style display
Green monospace font matching Windows 98 aesthetic
Proper calculation engine with operator precedence

AOL Instant Messenger

Retro chat interface with classic AOL IM styling
Buddy list with online/offline states
Authentic late-90s messaging experience
(Real-time chat features planned for future updates)

System Features

Taskbar

Start button with authentic Windows 98 icon
Running application buttons with click-to-focus
System tray with live updating time/date
Proper 12-hour time format with AM/PM

Responsive Retro Design

Dynamic scaling system using CSS custom properties
Container queries for component-level responsiveness
Touch gesture support for mobile devices
Maintains pixel-perfect Windows 98 authenticity across all screen sizes

🛠️ How We Built It

Technology Stack

Frontend Framework

React 18: Component-based UI architecture
TypeScript: Full type safety throughout the application
Vite: Lightning-fast build tooling and development server
Tailwind CSS: Utility-first styling with custom Windows 98 theme extensions

Backend & Platform

Reddit Devvit: Reddit's developer platform for building immersive experiences
Express: Backend logic and API endpoints
Node.js 22: Runtime environment

Development Tools

Cursor: AI-powered IDE with Devvit MCP integration for enhanced development
Kiro: Asset management and workflow optimization
ESLint + Prettier: Code quality and formatting
TypeScript Compiler: Type checking and compilation

Architecture & Design Patterns

Component Architecture

Windows98Desktop (Root)
├── BootSequence (BSOD → DOS → Windows Boot)
├── Desktop (Main environment)
│   ├── DesktopIcons
│   ├── Taskbar
│   │   ├── StartButton
│   │   └── SystemTray
│   └── WindowManager
│       ├── Solitaire
│       ├── Notepad
│       ├── Calculator
│       └── AIM

State Management

React hooks for local component state
Context API for global application state (window management)
Custom hooks for window lifecycle management
Game state architecture for Solitaire logic

Asset Management Strategy

Initially attempted S3 bucket hosting for external assets
Pivoted to local asset bundling within Vite's public directory
Implemented asset preloading system with fallback logic
Optimized sprite sheets for minimal bundle size (~32KB for cards)

Responsive Scaling System

CSS custom properties for dynamic scaling
Transform-based scaling for maintaining aspect ratios
Container queries for component-level responsiveness
Touch event handlers for mobile compatibility

Key Implementation Highlights

Solitaire Game Engine

// Card shuffling using Fisher-Yates algorithm
// Drag-and-drop system with collision detection
// Win condition validation checking all foundations
// Move validation with proper color/rank checking

Window Management System

// Z-index stack management for window focus
// Boundary constraints with minimum visible area
// Edge snapping with proximity detection
// Touch and mouse event unification

Boot Sequence State Machine

// BSOD → DOS → Windows98Boot → Desktop
// Auto-advance timers with manual skip capability
// Asset loading with error handling

References & Inspiration

This project was built with inspiration and techniques learned from several outstanding open-source projects:

98.js by Isaiah Odhner

Reference for authentic Windows 98 UI components
Studied window chrome styling and menu bar implementations
Learned approaches to desktop icon positioning

React95 by React95 Team

Modern React component library for Windows 95 UI
Reference for button styles, window borders, and taskbar design
Studied responsive approaches for retro UI

winclassic by tpenguinltg

CSS styling reference for classic Windows UI elements
Learned techniques for pixel-perfect border rendering
Reference for system color schemes

Windows 98 Solitaire Recreation by Brittany Walker (ramenhog)

Studied card sprite implementation and layout
Reference for Klondike Solitaire game rules
Learned drag-and-drop patterns for card games

Clippy.js by clippyjs

Inspiration for future assistant features
Reference for animated character integration
(Planned for future development)

Special thanks to these developers for sharing their work and keeping retro computing alive!

🚧 Challenges We Ran Into

HTTP Fetch Domain Restrictions

The Problem: Initially designed the asset architecture around AWS S3 for hosting images, GIFs, fonts, and audio files. This seemed ideal for keeping bundle sizes small and avoiding package limit issues.

The Challenge: Hit Devvit's HTTP fetch policy restrictions. While S3 is on the approved cloud provider list, getting domain approval and properly configuring CSP (Content Security Policy) headers proved more complex than anticipated.

The Solution: Pivoted to bundling all assets locally within Vite's public directory. While this increased bundle size, it eliminated external dependencies and simplified the deployment pipeline. Implemented aggressive optimization:

Sprite sheet compression (32KB for full card deck)
Lazy loading for non-critical assets
Asset preloading system with fallback URLs

Lesson Learned: When building for constrained platforms, start with the most restrictive architecture first. External asset hosting should be an optimization, not a core dependency.

Real-Time Chat Implementation

The Problem: Wanted to implement functional real-time chat in AOL Instant Messenger for community interaction within the simulator.

The Challenge:

WebSocket connections in Devvit environment proved tricky
State synchronization across multiple users in same post
Message persistence and retrieval
Privacy and moderation concerns for in-app chat

Current Status: AOL IM currently features the UI and buddy list but lacks real-time messaging. This is a known limitation that will be addressed in future updates.

Future Approach: Planning to leverage Reddit's real-time features or implement a polling-based system with proper rate limiting and moderation tools.

Solitaire Game Logic Complexity

The Problem: Implementing a fully functional Klondike Solitaire with all proper rules turned out to be significantly more complex than anticipated.

The Challenges:

Card movement validation (alternating colors, descending ranks)
Tableau building with proper sequence validation
Foundation placement rules (ascending by suit)
Drag-and-drop collision detection
Auto-flip face-down cards
Win condition checking across all four foundations
Move counter accuracy
Undo/redo system (partially implemented)

Current Status: Solitaire is fully playable but the code is admittedly messy. The game works correctly, but the component could benefit from refactoring into smaller sub-components and cleaner state management.

What Works Well:

✅ Full game rules implementation
✅ Drag-and-drop with validation
✅ Click-to-move automation
✅ Win detection and celebration
✅ Move counting and timing

Areas for Improvement:

Code organization (needs component extraction)
State management (could use useReducer pattern)
Animation smoothness
Performance optimization for mobile

The Lesson: Sometimes "done is better than perfect" - the game is fully functional and players are enjoying it, but technical debt was accumulated to meet the deadline. This will be refactored post-hackathon.

Mobile Touch Event Handling

The Challenge: Making a desktop-first interface feel natural on touch devices without breaking the authentic Windows 98 experience.

Specific Issues:

Touch drag events conflicting with scroll
Double-tap zoom interfering with double-click actions
Touch target sizes too small for mobile
Window dragging not working consistently on mobile

Solutions Implemented:

Unified touch and mouse event handlers
Proper preventDefault() usage to stop unwanted browser behaviors
Increased hit boxes while maintaining visual design
Touch-specific CSS for better tap targets
Container queries for responsive component scaling

Asset Loading Race Conditions

The Problem: Boot sequence assets (especially boot.gif) sometimes wouldn't load before the boot screen appeared, breaking immersion.

The Solution:

Implemented comprehensive asset preloading system
Added loading states and fallback images
Created error boundaries for asset failures
Fallback to colored divs if images fail to load

🎯 Accomplishments That We're Proud Of

🏆 Authentic Retro Recreation

Pixel-perfect Windows 98 UI with authentic fonts, colors, and styling
Three-stage boot sequence that captures the complete startup experience
Sound effects that transport users back to 1998
Successfully captured the feel of Windows 98, not just the appearance

🎮 Full Solitaire Implementation

Complete game mechanics with proper Klondike rules
Drag-and-drop that works on both desktop and mobile
Win detection and celebration effects
Built from scratch without game engine dependencies

🪟 Professional Window Management

Advanced window system with focus management, z-index stacking, and boundary constraints
Smooth dragging with edge snapping and constraints
Multi-window support allowing users to run multiple apps simultaneously
Responsive system that maintains functionality on mobile devices

📱 Mobile-First Retro Computing

Successfully adapted a desktop-centric interface for mobile without losing authenticity
Touch gestures work naturally despite simulating mouse-based UI
Responsive scaling maintains Windows 98 aesthetics across all screen sizes
Achieves the rare feat of being both nostalgic and modern

🚀 Reddit Platform Integration

Built entirely within Reddit's Devvit framework
Shareable gaming experience within Reddit posts
Community-ready architecture for future social features
Demonstrates Devvit's capabilities for complex applications

🛠️ Clean Technical Architecture

TypeScript throughout for type safety
Component-based architecture for maintainability
Efficient asset management despite constraints
Performance optimized for Reddit's diverse audience

📚 What We Learned

Platform-Specific Development

Learned Devvit's capabilities and limitations intimately
Understanding when to work within constraints vs. pushing boundaries
The importance of fallback strategies for external resources

Game Development Patterns

Implementing complex game logic in React
State management for interactive card games
Collision detection and drag-and-drop mechanics
Win condition validation algorithms

Responsive Retro Design

Techniques for adapting fixed-size interfaces to responsive layouts
Container queries for component-level responsiveness
Touch event handling in desktop-first interfaces
Maintaining authenticity while ensuring usability

Asset Management at Scale

Optimizing sprite sheets for web delivery
Preloading strategies for seamless UX
Fallback systems for asset loading failures
Balancing bundle size vs. external dependencies

TypeScript in Complex Applications

Type safety for game state management
Interface design for window management systems
Discriminated unions for application state
Generic components for reusability

🔮 What's Next for Windows 98 Community Simulator

🎮 Additional In-App Games & Experiences

Minesweeper (High Priority)

Classic mine-sweeping puzzle game
Multiple difficulty levels (Beginner, Intermediate, Expert, Custom)
Flag placing and chord clicking
Time tracking and mine counter
Win/loss detection with smiley face indicator

MS Paint (High Priority)

Image editing with authentic Windows 98 Paint interface
Drawing tools: pencil, brush, eraser, fill bucket, text
Shape tools: line, rectangle, ellipse, polygon
Color picker with classic palette
Save/load functionality for community sharing

Internet Explorer 4.0 (Medium Priority)

Simulated web browser with authentic IE4 interface
Address bar and navigation buttons
Favorites/bookmarks system
Sample "websites" from 1998 era
Easter eggs and hidden pages

Pinball (Space Cadet) (Medium Priority)

Recreation of Windows 95/98/XP Pinball game
Physics simulation for ball movement
Flipper controls and bumpers
Score tracking and high score table
Authentic sound effects

Media Player (Low Priority)

Classic Windows Media Player interface
Audio visualization
Playlist management
Simulated music playback

💬 Social & Community Features

Real-Time AOL Instant Messenger

Full chat functionality between users in same post
Buddy list with online/offline indicators
Away messages and status updates
Chat history and conversation persistence
Moderation tools for community safety
Private messaging between Reddit users

Community Leaderboards

Solitaire completion times (fastest wins)
Minesweeper speed records
Pinball high scores
Daily/weekly/all-time rankings
Reddit username display with opt-in

Social Sharing

Post achievements to subreddit
Share high scores with custom formatted posts
Screenshot functionality for desktop workspace
Achievement badges and flair integration

Multiplayer Modes

Head-to-head Minesweeper races
Collaborative Paint sessions
Solitaire tournaments with brackets
Community challenges and events

🎨 Customization & Personalization

Desktop Themes

Multiple wallpaper options (Bliss, Abstract, Nature)
Custom color schemes (Windows 98, Plus! themes)
Icon pack options (Classic, High Color, Custom)
Sound scheme selection

User Profiles

Persistent desktop layout (saved icon positions)
Application preferences and settings
High score and statistics tracking
Achievement collection

Accessibility Features

High contrast mode
Larger text options
Keyboard navigation support
Screen reader compatibility

🐛 Technical Improvements & Polish

Code Refactoring

Clean up Solitaire component architecture
Extract reusable game logic into hooks
Implement proper state management patterns
Add comprehensive unit tests

Performance Optimization

Lazy load application components
Optimize render cycles
Improve asset loading strategy
Better mobile performance

Bug Fixes

Window management edge cases
Touch event reliability on various devices
Asset loading race conditions
Memory leak prevention

Developer Experience

Better TypeScript type definitions
Comprehensive documentation
Component storybook
Contribution guidelines

📖 Additional System Features

Help System

Windows 98 style help topics
Interactive tutorials for each app
"What's This?" cursor help tool
Clippy integration (planned)

System Settings

Display properties (resolution simulation)
Mouse settings (cursor speed, trails)
Date/Time configuration
Control Panel access

File System Simulation

My Computer exploration
File save/load dialogs
Document persistence
Recycle Bin functionality

🌟 Easter Eggs & Hidden Features

Secret desktop shortcuts
Hidden games and apps
Classic Windows 98 sounds and animations
Throwback error messages
Community-submitted Easter eggs

🏗️ Built With

React - UI component framework
TypeScript - Type-safe JavaScript
Vite - Build tool and dev server
Reddit Devvit - Reddit's developer platform
Express - Backend server framework
Tailwind CSS - Utility-first CSS framework
Node.js - Runtime environment
Cursor - AI-powered IDE
Kiro - Asset management and workflow tools

🙏 Acknowledgments

Huge thanks to:

Reddit Devvit Team for creating an amazing platform for immersive experiences
Open-source retro computing community for keeping Windows 98 alive
Hackathon organizers for the opportunity to build something nostalgic
All the developers of the reference projects mentioned above
Windows 98 users worldwide who inspired this project

📝 Legal

Terms of Service: See TERMS.md
Privacy Policy: See PRIVACY.md

🚀 Try It Out