Build Desktop-Style Web OS with Next.js and Node.js – OrbitOS

OrbitOS is a collaborative web application that recreates a desktop operating system experience directly in your browser. Built on Next.js for the frontend and Node.js with Express for the backend.

The web OS ships with three core applications out of the box. The Notes app functions as a rich text editor with formatting options for headers, bold, italic, lists, and links.

The Browser app provides basic web browsing through an iframe implementation. The Settings app handles system configuration including theme selection and wallpaper customization.

The architecture supports easy addition of new applications through a dynamic registry system that keeps the codebase organized and maintainable.

Features

Use Cases

• Collaborative Workspaces. Teams can use the OS as a central hub for accessing shared tools and documents in a familiar desktop format.
• Online Learning Platforms. It can serve as a simulated environment for teaching computer science concepts or software usage.
• Interactive Portfolios. Developers and designers can showcase their work in a unique way.
• Web-Based Kiosks. You can deploy the application on public terminals to provide access to a controlled set of web applications.
• Remote Desktop Access. It offers a lightweight alternative for accessing a simple set of tools from any device with a web browser.

How to Use It

1. Clone the repository from GitHub.

git clone https://github.com/codehubbers/OrbitOS
cd OrbitOS

2. Install all required dependencies. This reads the package.json file and downloads both the Next.js frontend packages and the Express backend dependencies.

npm install

3. The project provides two methods for starting the development servers.

The first option runs both servers simultaneously using a single command. This approach uses the concurrently package to launch the Next.js development server and the Express API server together.

npm run dev:all

The second option runs each server in a separate terminal window. Open one terminal and start the Next.js frontend server. Then open a second terminal window, navigate to the same project directory, and start the Express backend server.

# Terminal 1
npm run dev
# Terminal 2
npm run server

4. After both servers start successfully, access the frontend interface by opening your browser and navigating to localhost:3000. The backend API runs on localhost:3001 and handles data operations behind the scenes. The desktop interface loads with the default wallpaper and theme applied.

5. To modify the taskbar appearance, open the theme file you want to edit. The taskbar property contains Tailwind CSS classes that define its look.

// src/themes/darkTheme.js
export const darkTheme = {
  taskbar: 'bg-black/50 backdrop-blur-xl border-t border-white/20',
  window: 'bg-gray-900 border border-gray-700',
  text: 'text-gray-100',
};

6. Adding new wallpapers requires placing image files in the public/backgrounds directory. After adding your image file, register it in the settings context by opening src/context/SettingsContext.js and adding the file path to the defaultWallpapers array. The path should start with /backgrounds/ followed by your filename. The Settings app automatically detects the new wallpaper and displays it as an option.

// src/context/SettingsContext.js
const defaultWallpapers = [
  '/backgrounds/orbitos-default.jpg',
  '/backgrounds/nebula.png',
  '/backgrounds/mountain-sunrise.jpg',
];

6. Create new applications using the app registry system.

Begin by creating the application UI component in the src/app-components directory. This React component defines what users see when they open your app. Build it as a standard functional component with hooks for any state management needs.

// src/app-components/calculator.js
import { useState } from 'react';
export default function Calculator() {
  const [display, setDisplay] = useState('0');
  return (
    <div className="p-4 bg-gray-800 h-full">
      <div className="text-right text-2xl mb-4 p-2 bg-gray-900 rounded">
        {display}
      </div>
      {/* Calculator buttons here */}
    </div>
  );
}

Next, create an app definition file in src/system/apps. Import the base App class and export a new instance with your application metadata. The id should be a unique lowercase string. The name appears in the taskbar and window title. The icon can be an emoji or a path to an image file in the public/icon directory. The component property must exactly match the key you will use in the next step.

// src/system/apps/CalculatorApp.js
import App from './App';
export default new App({
  id: 'calculator',
  name: 'Calculator',
  icon: '🔢',
  component: 'Calculator',
});

Complete the registration by modifying two files. First, open src/system/services/AppRegistry.js and import your app definition. Add the imported object to the apps array inside the constructor. Second, open src/components/Desktop.js and import your UI component. Add it to the appComponents object using the component name from your app definition as the key.

// src/system/services/AppRegistry.js
import CalculatorApp from '../apps/CalculatorApp';
class AppRegistry {
  constructor() {
    this.apps = [
      NotesApp,
      BrowserApp,
      SettingsApp,
      CalculatorApp,
    ];
  }
}
// src/components/Desktop.js
import Calculator from '@/app-components/calculator';
const appComponents = {
  Notes: Notes,
  Browser: Browser,
  Settings: Settings,
  Calculator: Calculator,
};

7. The backend API provides endpoints for user management and file operations. User registration accepts POST requests at /api/users/register with username and password in the request body. Login authentication happens at /api/users/login with the same credentials format. File operations include listing all files via GET at /api/files, uploading new files through POST at /api/files/upload, and deleting files with DELETE requests to /api/files/:id where :id represents the file identifier.

8. Deploy the app. The frontend deploys to platforms like Vercel by running the build command to generate optimized static files. The backend requires a Node.js hosting environment where you can run the Express server directly from the src/server directory.

# Frontend build
npm run build
# Backend deployment
cd src/server
node index.js

Related Resources

• Next.js Documentation provides complete guides for the framework powering OrbitOS’s frontend, including routing, rendering strategies, and API routes.
• React DnD offers drag-and-drop functionality for React applications, useful for implementing window management features.
• Framer Motion delivers the animation library used in OrbitOS for smooth transitions and interactive elements.
• Tailwind CSS documents the utility-first CSS framework that styles the entire OrbitOS interface.

FAQs

Q: Can I use OrbitOS for commercial projects?
A: Yes. OrbitOS releases under the MIT License which permits commercial use, modification, and distribution.

Q: Does OrbitOS support mobile devices?
A: The current version focuses on desktop browsers and does not include responsive design for mobile devices. Mobile support appears in the future enhancements list as a planned feature for upcoming releases.

Q: How do I persist data between sessions?
A: The current implementation uses React Context for state management which resets on page refresh. To persist data, you need to integrate the backend API endpoints with actual database storage like MongoDB or PostgreSQL, then modify the frontend to save and load data through API calls.

Q: Can I add third-party React components to my custom apps?
A: Yes. You can install additional npm packages and import them into your app components. Just run npm install for the package you need, then import it in your app component file like any other React component.

Q: Does OrbitOS support user authentication?
A: The current version includes basic user registration and login endpoints. Future versions plan to implement JWT authentication and database integration.