Personal Web Desktop (PWD)

Hi! This is my PWD — a custom web component that hosts other web components to create a desktop-like experience directly in the browser. It features a macOS-inspired interface with windowed applications, a menu bar, and a sidebar for launching apps. I built this at the beginning of my first year studying web development at Linnaeus University.

At the time of building this single-page application, we hadn’t yet covered server-side coding or environment variable management. For that reason, the API keys are openly included in the source code. However, steps have been taken to ensure that no harm can occur from misuse. Weather data is provided by Tomorrow.io and may be limited during periods of high traffic to the webbsite.

🌐 Live at: pwd.tiberiusgh.com

Features

• Lazy Loading: Optimized performance with on-demand module loading.
• Offline Support: User-friendly offline messages and custom caching via a service worker.
• Persistent State: High scores,names and messages.
• Installable: Can be installed as a web app via the manifest file

Screenshots

Sub components

PWD Sidebar Component

• Description: Navigation menu for launching applications
• Applications: Memory Game, Yapper, Quiz, and Credits.
• Custom Element: <pwd-sidebar>
• Details: PWD Sidebar README

Menu Bar Component

• Description: A top-level navigation bar with links to GitHub, LinkedIn, clock and weather information.
• Features
  • Real-time clock updates.
  • Location-based weather data.
  • Window focus tracking.
• Custom Element: <menu-bar>
• Details: Menu Bar README

App Window Component

• Description: Draggable and stackable window interface.
• Features
  • Title bar with customizable text.
  • Minimize and close controls.
  • Z-index management.
• Custom Element: <app-window>
• Details: App Window README

Memory Game Application

• Description: A complete memory game lifecycle management system.
• Features
  • Player nickname input.
  • Difficulty selection.
  • Highscore leaderboard.
  • Custom Element: <memory-game-application>
  • Details: Memory Game README

Yapper Application

• Description: A real-time chat application with WebSocket support.
• Features
  • Nickname management.
  • Dynamic chat interface.
  • Sound notifications for special keywords.
• Custom Element: <yapper-application>
• Details: Yapper Application README

Quiz Application

• Description: Interactive quiz application with dynamic question fetching.
• Features
  • Nickname input and category selection.
  • Real-time scoring and highscore tracking.
  • API integration with Open Trivia DB.
  • Custom Element: <quiz-application>
• Details: Quiz Application README

Credits Application

• Description: Displays resource attributions for images, sounds, and APIs.
• Features - Organized and scrollable design. - Direct links to resource sources.
• Custom Element: <credits-application>
• Details: Credits Application README

Technical Notes

Event System

The application uses local storage for:

• Game name and high scores
• Chat nicknames and latest 20 messages

Author

Tiberius Gherac tiberius.gherac@gmail.com

Notes

• Each component has detailed documentation linked above for integration and usage guidance.