ShellPlay - Interactive Linux Terminal Simulator

A fully functional browser-based Linux terminal simulator built with Next.js 16, React, and TypeScript. ShellPlay brings a complete Linux environment to your browser with 100+ commands, a full shell script interpreter, and a virtual filesystem. All state lives in memory only—when you close the browser, everything is wiped clean. Perfect for learning, experimenting, and playing with Linux safely.

Features

• 100+ Linux Commands: Full support for navigation, file operations, text processing, system info, process management, networking, storage, user management, and more
• Comprehensive Command Catalog: Click "Commands" button to browse all available commands with descriptions and usage, organized by 9 categories
• Full Shell Script Interpreter: Execute bash scripts with variables, loops, conditionals, functions, command substitution, arithmetic, and trace mode
• In-Memory Virtual Filesystem: Realistic Linux directory structure with files, permissions, ownership, timestamps, and full CRUD operations
• Authentic Terminal Feel: Dark aesthetic with green (#00ff88) or amber (#ffb700) text on black background (#0d0d0d), blinking cursor, realistic prompts
• Interactive Features: Command history (↑↓ arrows), Tab autocomplete, real-time command descriptions, theme toggle
• Safe Learning Environment: No persistence, no side effects—experiment fearlessly
• Responsive & Mobile-Friendly: Works perfectly on desktop and mobile devices

User Interface

Top Bar

• Current Path Display: Shows user@linux-sim: /current/path on the left
• Commands Button: Opens a comprehensive modal showing all 40+ commands organized by category (Navigation, File Operations, Text Processing, System Info, Process Management, Networking, Utilities) with descriptions. Click any command to auto-fill the input!
• Theme Toggle: Switch between green (#00ff88) and amber (#ffb700) terminal colors
• Help Button: Quick cheatsheet with common command examples

Terminal Area

• Displays command history and output with proper syntax highlighting (errors in red)
• Blinking cursor indicates ready-to-accept input
• Scrollable output area with smart scroll-locking (stops at bottom when new commands arrive)

Input Line

• Realistic prompt format: user@linux-sim:/path$
• Placeholder text with keyboard hints (↑/↓ for history, Tab for autocomplete)
• Blinking cursor at the end of input

Architecture

/lib/
  filesystem.ts          # Virtual filesystem data structure and operations
  commandExecutor.ts     # 50+ Linux command implementations
  shellInterpreter.ts    # Bash script interpreter

/components/
  TerminalSimulator.tsx  # Main React UI component with modals and responsive design

/app/
  page.tsx              # Entry point
  layout.tsx            # Root layout with metadata
  globals.css           # Global styles

Implemented Commands

Navigation & Files

• ls [path] [-l] [-a] - List directory contents
• cd [path] - Change directory (supports ~, .., ., absolute/relative paths)
• pwd - Print working directory
• mkdir [-p] path - Create directory
• rmdir path - Remove empty directory
• rm [-r] [-f] file - Remove file/directory
• cp [-r] src dst - Copy file/directory
• mv src dst - Move/rename
• cat file - Print file contents
• touch file - Create or update file
• head [-n N] file - First N lines
• tail [-n N] file - Last N lines
• find path -name pattern - Search files

Text Processing

• grep [-r] [-i] [-n] pattern [file] - Search with highlighting
• awk '{print $N}' file - Text parsing
• sed 's/old/new/g' file - Substitution
• sort [-r] [-n] [file] - Sort lines
• cut -d',' -f1,2 file - Cut fields
• wc [-l] [-w] [-c] file - Count lines/words/chars
• diff file1 file2 - File differences
• cmp file1 file2 - Binary comparison

Permissions

• chmod [octal|symbolic] file - Change permissions
• chown user:group file - Change owner
• getfacl file - Show ACL
• setfacl -m u:user:rwx file - Set ACL

System Info

• whoami - Current user ("great dhanush")
• id - User/group info
• uname [-a] - System information
• date - Current date/time
• cal - Calendar
• free [-h] - Memory usage
• df [-h] - Disk usage
• du [-h] [-s] path - Directory size
• ps [aux] - Process list
• top - Process monitor (interactive)
• kill [PID] - Terminate process
• pkill [name] - Kill by name

Networking

• ifconfig - Network interfaces
• ping -c 4 host - ICMP ping
• curl URL - HTTP request
• wget URL - Download file
• netstat - Open ports
• ss - Socket statistics
• nslookup domain - DNS lookup
• dig domain - DNS query
• traceroute host - Route trace

User Management

• su [user] - Switch user
• sudo cmd - Run as root
• useradd [-m] user - Add user
• userdel user - Delete user
• passwd user - Change password
• groups user - Show groups
• crontab [-e|-l] - Cron jobs

Shell & Scripting

• bash [script.sh] - Run bash script or shell
• sh [script.sh] - Run shell script
• sleep N - Pause N seconds
• Pipe operator: cmd1 | cmd2 | cmd3
• Output redirection: cmd > file, cmd >> file

Other

• echo text - Print text
• clear - Clear screen
• help - Command help
• man [command] - Manual pages
• history - Command history
• env - Environment variables
• export VAR=value - Set variable
• alias name='cmd' - Create alias
• which cmd - Find command
• dmesg - Kernel messages
• vmstat - Virtual memory stats
• iostat - I/O statistics
• w - Logged-in users
• exit - Exit terminal

Filesystem Structure

The simulator initializes with a realistic Linux directory tree:

/ (root)
├── home/
│   └── user/
│       ├── documents/
│       ├── downloads/
│       └── README.txt
├── etc/
│   ├── passwd (full system user list)
│   └── hostname
├── var/
│   └── log/
│       └── syslog (fake kernel logs)
├── proc/
│   ├── cpuinfo (Intel Core i5 specs)
│   └── meminfo (8GB RAM details)
├── tmp/
├── bin/
│   ├── bash
│   └── sh
└── usr/
    └── bin/

Files support:

• Content (string)
• Permissions (Unix-style: rwxr-xr-x)
• Owner and group
• Size and timestamps
• Directory/symlink types

UI Features

Terminal Display

• Dark background (#0d0d0d) with green or amber text
• Top bar showing current path, username, and theme toggle
• Blinking cursor ▮ for authenticity
• Scrollable output with automatic scroll-to-bottom
• Help overlay with command cheatsheet (click ?)
• Theme toggle between green (#00ff88) and amber (#ffb700)

User Interaction

• Command input at bottom (always focused)
• History navigation with ↑ and ↓ arrow keys
• Tab autocomplete for common commands
• Enter to execute commands
• Responsive design works on desktop and mobile

Setup & Running

Prerequisites

• Node.js 18+ or compatible runtime
• pnpm, npm, or yarn

Installation

# Clone or download the project
cd linux-terminal-simulator

# Install dependencies
pnpm install
# or: npm install

# Start the dev server
pnpm dev
# or: npm run dev

The terminal will be available at http://localhost:3000.

Building for Production

pnpm build
pnpm start

Usage Examples

Basic Navigation

user@linux-sim:~$ pwd
/home/user

user@linux-sim:~$ ls -la
drwxr-xr-x user user 4096 documents
drwxr-xr-x user user 4096 downloads
-rw-r--r-- user user  76 README.txt

user@linux-sim:~$ cd documents
user@linux-sim:~/documents$ pwd
/home/user/documents

File Operations

user@linux-sim:~$ cat README.txt
Welcome to the Linux Terminal Simulator!
Type "help" to see all available commands.

user@linux-sim:~$ echo "Hello, World!" > greeting.txt
user@linux-sim:~$ cat greeting.txt
Hello, World!

user@linux-sim:~$ cp greeting.txt backup.txt
user@linux-sim:~$ ls
greeting.txt  backup.txt

Text Processing

user@linux-sim:~$ grep -n "Linux" README.txt
1:Welcome to the Linux Terminal Simulator!

user@linux-sim:~$ cat /etc/passwd | grep "user"
user:x:1000:1000:user:/home/user:/bin/bash

System Info

user@linux-sim:~$ whoami
user

user@linux-sim:~$ ps aux
USER       PID %CPU %MEM    VSZ   RSS TTY STAT START   TIME COMMAND
root         1  0.1  0.5  48099  5429 ?   S    10:23   00:00:05 /sbin/init
...

user@linux-sim:~$ free -h
              total        used        free      shared  buff/cache   available
Mem:         8048M       3500M       2000M          0M       1500M       6200M

Process Management

user@linux-sim:~$ ps
PID TTY          TIME CMD
768 ?         00:00:45 bash
1024 ?        00:01:30 apache2

user@linux-sim:~$ kill 1024
[1]   Terminated

Technical Details

In-Memory Filesystem

The filesystem is implemented as a nested JavaScript object where each node contains:

• name: The node name
• type: 'file', 'directory', or 'symlink'
• content: File content (for files)
• children: Child nodes (for directories)
• permissions: Unix-style permission string
• owner and group: Ownership info
• size: File size in bytes
• modified and created: Timestamps

All operations are in-memory with no disk I/O, making them instant and safe for learning.

Command Execution

The CommandExecutor class implements 50+ commands. Each command:

1. Parses arguments and options
2. Operates on the virtual filesystem
3. Returns formatted output
4. Handles errors gracefully with realistic error messages

Shell Features

The ShellInterpreter supports:

• Variable assignment and substitution (VAR=value, $VAR)
• Command substitution ($(cmd))
• Basic loops (for, while, until)
• Conditionals (if/then/elif/else)
• Piping and redirection

Theme System

Two carefully chosen terminal color schemes:

• Green: Classic CRT terminal look (#00ff88 on #0d0d0d)
• Amber: Vintage monochrome aesthetic (#ffb700 on #0d0d0d)

Both use JetBrains Mono font for authentic monospace rendering.

Limitations

• No actual network access (curl, wget, ping are simulated)
• No actual process creation (top, ps show fake data)
• Shell script support is simplified (basic features only)
• No persistence between sessions
• No file size limits
• Terminal resizing not fully responsive

Future Enhancements

• Full shell script interpreter with regex and complex patterns
• Custom commands via JavaScript snippets
• File upload/download simulation
• Multi-user session support
• Command timing and performance simulation
• Syntax highlighting for output
• Scrollback buffer limits
• Keyboard macro support

Project Structure

This is a Next.js 16 application with:

• React 19 for the UI component
• TypeScript for type safety
• Tailwind CSS for styling
• No external dependencies for the filesystem/command engine

All core logic (filesystem, commands, shell interpreter) is pure TypeScript with no external libraries, making it lightweight and portable.

License

This terminal simulator was built as an educational tool for learning Linux commands and shell scripting in a safe, browser-based environment.

---

Happy terminal exploring! Type help to begin.