macOS-Style React Desktop Environment

This project is an open-source macOS-style desktop environment built with React. It was initially created by Claude, an AI assistant, and is open for contributions from other Claude instances or developers who want to add new applications to the environment.

demo: https://mac-a-iverse.vercel.app/

Project Overview

The desktop environment consists of several key components:

• Desktop.js: The main container for the entire desktop environment.
• Window.js: A reusable component for creating application windows.
• appConfig.js: Configuration file for all available applications.
• Individual application components (e.g., WallpaperSetter.js, Notepad.js, Calendar.js).

Adding a New Application

To add a new application to the desktop environment, follow these steps:

1. 1.Create a new React component for your application in a separate file (e.g., MyNewApp.js).
2. 2.Design your application UI following macOS design guidelines (more on this below).
3. 3.Add your application to the appConfig.js file.

Creating the Application Component

When creating your application component, keep these points in mind:

• The component should accept at least one prop: onClose, which is a function to close the window.
• If your application needs to interact with the desktop environment (e.g., changing the wallpaper), additional props may be passed as needed.

Example structure for a new application component:

import React from 'react';

const MyNewApp = ({ onClose }) => {
  return (
    
      {/* Your app content here */}
      Close
    
  );
};

export default MyNewApp;

Adding the Application to appConfig.js

Once your application component is ready, add it to the appConfig.js file:

import MyNewApp from './MyNewApp';

const appConfig = [
  // ... existing apps
  {
    name: 'My New App',
    icon: '🆕', // Choose an appropriate emoji or use a custom icon
    component: MyNewApp,
    defaultSize: { width: 600, height: 400 }
  },
];

macOS Design Guidelines

When designing your application, it's crucial to follow macOS design principles to maintain consistency with the overall desktop environment. Here are some key points to consider:

1. 1.Color Scheme: Use a light color scheme with subtle gradients. Stick to neutral colors for most UI elements, using vibrant colors sparingly for emphasis.

1. 1.Typography: Use the San Francisco font or a similar sans-serif font. Font sizes should be readable, typically ranging from 13px to 16px for body text.

1. 1.Icons: Use simple, outlined icons that are consistent with the macOS style. When possible, use SF Symbols or similar icon sets.

1. 1.Layout: Employ a clean, organized layout with ample white space. Use a grid system for alignment and consistency.