This is a submission for the GitHub Finish-Up-A-Thon Challenge
What I Built
I built SynthwaveOS, a high-performance, framework-free digital operating system that runs directly in the browser and serves as my interactive professional portfolio.
In an ecosystem crowded with bloated templates and drag-and-drop builders, I wanted to build something that proved my grasp of native web engineering. I completely abandoned heavy frontend frameworks like React and Vue in favor of pure Vanilla JavaScript, HTML5, and CSS3. The result is a lightweight, lightning-fast digital environment with a draggable window manager, a custom virtual file system, and a fully functional Linux-style terminal console. I engineered all of this from scratch to demonstrate deep DOM manipulation and effective user-centered design.
Demo
🚀 Initiate Uplink: swapnadeep.cloud
💻 Source Code: GitHub Repository
Key Features:
- Draggable GUI: Dynamic resizing and active-window Z-index layering built natively.
- Interactive Terminal: A custom command-line interface supporting commands like ls, cat, and neofetch.
- Multimodal AI Integrations: Built-in "Neural Vision" and "Text Forge" apps powered by serverless backend logic.
- Personalization Engine: Real-time aesthetic overrides, including a custom CRT scanline retro monitor filter.
The Comeback Story
The creation of SynthwaveOS began with grand ambitions for replicating a desktop interface, but I soon ran into several architectural obstacles that derailed the process.
For one thing, the complicated z-index calculations were a major pain point; dragging an active window would result in it randomly moving behind inactive windows. Second, I had the difficult situation of trying to overcome X-Frame-Options' cross-origin restrictions, which meant that other projects could not be rendered through the OS's executable App Runner.
In order to overcome the last obstacle of this challenge, I took stock of the necessary steps and found a way past them. I managed to solve the problem of layering through the use of a global topZIndex counter incremented every time I created a new window purely by mousedown. In addition, I rebuilt my application architecture to run locally hosted payloads and avoid any iframe issues.
Lastly, as an extra touch to the user experience, I updated my "Transmission" contact app's HTML structure to allow multiple checkbox selection instead of the more limited radio button.
My Experience with GitHub Copilot
My approach to AI on this project is a bit different. I actually turn off autocomplete and inline code suggestions in VS Code. Building a complex window manager and event system from scratch means I need to understand the core logic myself. I want to write the code, not just hit tab to accept it.
But I definitely do not work alone. When it comes to utilizing an AI assistant for my project, I do it exactly how I would collaborate with a competent developer friend. Rather than asking for a solution for the code that works right away, I upload my files to make sure that my AI assistant fully comprehends my architecture. That way we can address the problem together.
Disabling autocomplete ensures that I design and comprehend every piece of DOM manipulation in my project. However, having an AI assistant around to discuss my architecture with helps me overcome difficulties.
Top comments (0)