OSpace

demo image
Organizing scattered information
Publishing as a portfolio

Inspiration

This version uses slightly more evocative language to convey the feeling and philosophy behind the project. With an ever-growing list of bookmarks, articles we stumble upon and things we want to try later get saved haphazardly, only to be forgotten. It all started with a simple question: "Isn't there a more visual, more intuitive way to organize this information chaos?" This is more than just another bookmark manager. Our vision was to create a "digital study"—a place to organize your thoughts, lay out your inspirations, and express your true self. Just as you would arrange your favorite books and stationery on your desk, you can arrange your favorite sites and words on your desktop. We believe a person's unique desktop can tell the story of their personality and interests more eloquently than any resume or social media profile ever could.

What it does

OSpace is a brand new way to centralize your digital life and express your unique identity.

Familiar Desktop UI

With an intuitive OS-like interface, you can arrange your links and notes with familiar drag-and-drop controls, designing a space that is uniquely yours.

A Centralized Hub for Everything Bring all your scattered bookmarks, frequently used tools, and brilliant ideas into one smart, organized hub. Stop searching and start creating.

Showcase Your World with a Public Profile Publish your custom desktop as a unique portfolio to share your personality with the world. Of course, you can also keep it entirely private for your eyes only.

key features

Create Notes:

Jot down your thoughts, ideas, or favorite quotes. Place these notes anywhere on your desktop to keep inspiration in sight.

Add App Shortcuts:

Add your favorite websites and online tools as "apps." These shortcuts provide one-click access right from your desktop.

Organize with Folders:

Group your notes and apps into folders to keep your desktop beautiful, organized, and functional at all times.

You're in Control: Public or Private

Every single item can be individually set to "Public" or "Private." Use OSpace as your personal bookmark collection, a professional portfolio to showcase your work, or anything in between. The choice is yours.

How we built it

Specifications & Design

Ideation: As the initial phase of the project, we first brainstormed the core ideas for the service.
Design and Requirements Definition: Once the ideas solidified, we used the visual collaboration tool Excalidraw. This helped us clarify the following:
Creating rough sketches of the UI design.
Listing the necessary features for the MVP (Minimum Viable Product).
Sharing the final vision and aligning understanding among team members.
Prompt Design: We then moved into a prompt design phase for the AI UI generation tool, bolt.new. We carefully crafted the prompts with the goal of generating a near-ideal UI in a single pass.

Frontend

Core UI Generation: Leveraging bolt.new, we generated the "desktop-style UI," which is the core of OSpace. Instead of making small, iterative modifications, we took the approach of refining the initial prompt multiple times until the intended base UI was generated in a single shot.
Implementation of Additional Features: After the desktop UI was complete, other features (like note creation and folder functions) were also implemented on bolt.new by providing new prompts as needed.
MVP Completion and Manual Adjustments: Through this process, the frontend portion of the MVP we initially aimed for was almost completed. However, the parts necessary for data integration with the backend were manually coded and adjusted.

Backend

Building from Scratch: To realize OSpace's functionality, it was necessary to manage each user's app information and its position on the server, and to perform strict data validation for numerous requests. To handle these complex requirements, we decided to build the backend from scratch.
Framework: We adopted Hono, a lightweight and fast framework, for our backend.
Authentication: For user authentication, we implemented Google OAuth using the Better-Auth library.

Database

Data Requirements: We needed to persistently store data for each user, such as the types of apps placed on the desktop and the coordinates (positional information) of their icons.
Technology Used: We chose and used Supabase as the database to manage this data.

Challenges we ran into

Challenge 1: The Difficulty of Generating an Atypical UI with AI and the Power of Prompt Engineering

OSpace's UI adopts a "desktop metaphor," which sets it apart from typical websites and business applications. This atypical design posed a significant challenge for the AI UI generation tool, bolt.new.

Simple prompts would only generate common layouts like blogs or landing pages, and it was extremely difficult to make the AI accurately understand the concepts we intended, such as "windows," "icons," and a "desktop space."

[Our Solution] We quickly abandoned the approach of manually modifying an initially generated UI. Instead, we focused all our efforts on generating the core UI perfectly in a single shot with the very first prompt. Specifically, we went through dozens of trial-and-error cycles, including detailed instructions in the prompt on how to structure the layout with Grid or Flexbox and which elements should be draggable. It was through this rigorous prompt engineering that the AI was finally able to accurately bring our vision to life.

Accomplishments that we're proud of

This version is a faithful translation that clearly conveys the accomplishments in a professional tone.

Despite these challenges, we are very proud of what we've achieved with the initial version of OSpace.

A Truly Seamless User Experience: Our greatest accomplishment is the fluid, intuitive, and smooth drag-and-drop interface. We have succeeded in replicating the feel of a native desktop environment within a web browser. This is the very soul of OSpace.
The "Showcase" Public Profile Feature: We are proud of the feature that allows any user to share their work with a sleek, single URL. This transforms OSpace from a personal organization tool into a platform for self-expression and community.

What we learned

This is a clear and professional translation, suitable for project summaries or developer blogs.

The Importance of the MVP (Minimum Viable Product):

Initially, we had an enormous list of features we wanted to implement. However, we learned to be disciplined and to focus on the core MVP (Minimum Viable Product). This approach allowed us to first establish a stable and polished foundation, and now we can confidently build new features on top of it.

What's next for OSpace

This is a clear, professional translation suitable for an official roadmap or announcement.

OSpace is just getting started. Our vision is to grow this tool from a personal space into a vibrant community hub. Here is our future roadmap:

Enhanced Customization: We plan to introduce custom themes, user-uploaded wallpapers, and a wider variety of fonts to give users more control over the look and feel of their space.
Widget Marketplace: Our most exciting upcoming feature is a marketplace where users can not only add pre-made widgets like clocks, music players, and weather, but also create their own widgets and share them with the community.
Deeper Community and Discovery Features: We will build a discovery feed to showcase popular and interesting desktops, implement a tagging system to find users with similar interests, and add a feature to "follow" favorite creators.
Team Collaboration Spaces: Further in the future, we envision OSpace for businesses and groups. This will allow teams to create shared desktops for project management, onboarding new members, or as an internal resource hub.