My project is an interactive, web based desktop operating system environment built as a portfolio project, drawing inspiration from Dustin Brett’s daedalOS. It demonstrates a wide range of frontend and systems programming skills, focusing on a blend of user experience, scalability, and optimization. The goal is to emulate desktop like functionality, providing a platform where users can interact with applications, files, and features within a web browser.
TypeScript: Strongly typed language for scalable and maintainable code. React/Next.js: Frontend framework used for dynamic rendering and routing. CSS (with custom animations): Used to style and create animations for the desktop environment. Framer Motion: For fluid animations and transitions. TINYmce: A WYSIWYG text editor for file editing. React Calendar: Calendar interface with event management capabilities. IndexedDB (Planned): Persistent client side storage for the file system. ZenFS (Exploring): Considering integration with ZenFS for a more robust file system emulation.
Desktop Grid: Users can select and drag icons using an optimized grid system with click detection and dynamic styling. Taskbar: Displays active windows, offering quick access to applications. Start Menu: Application launcher providing easy access to built in programs and system settings. Context Menus: Right click context menus dynamically adapt to desktop or icon interactions, mimicking operating system behavior.
-
File Explorer
Browse and manage files within a virtual directory system. Supports drag and drop, icon rearrangement, and future indexed storage. -
Text Editor (TINYmce)
Feature rich editor with options for formatting and file saving. -
Calendar (react calendar)
Intuitive date and event tracking interface. -
Web Browser (Basic Implementation)
Simple built in browser for accessing web pages (expandable). -
Terminal (Planned)
Bash like shell interface to execute command line tasks.
Window Management System
Efficient handling of window focus, stacking (z index), resizing, and animations. Optimized state updates to minimize re rendering.
Icon Selection & Highlighting
Custom selection box supports both drag and multi select functionality, optimized for performance through debouncing.
Event Handling
Uses efficient event listeners and throttling techniques to ensure responsiveness.
State Management
State consistency across multiple components is achieved through TypeScript's strict type system and optimized hooks.
Implemented core desktop UI and basic applications. Developed a dynamic window management system. Integrated selection and drag and drop features. Context aware right click menus with adaptive options.
Persistent File System
Integration of IndexedDB to maintain files across sessions, allowing persistent storage of user created files.
Bash Terminal Emulation
Adding a functional shell for executing basic commands and file manipulation tasks.
ZenFS Integration (Research Ongoing)
Potential use of ZenFS to enhance file system operations.
git clone https://github.com/StephanVolynets/DESKTOP.gitcd DESKTOPnpm installnpm run devNavigate to http://localhost:3000 in your web browser to interact with the desktop environment.
Contributions are encouraged! Feel free to open issues or submit pull requests for bug fixes, features, or performance improvements.
This project was inspired by Dustin Brett's innovative daedalOS desktop emulation. Special thanks to open source communities for tools like TINYmce, react calendar, ZenFS, and Framer Motion that enhance this project.
This project is licensed under the MIT License. See the LICENSE file for more details.