MojoOS - Desktop Environment in Browser

A fully functional desktop environment built with ReactJS, NextJS, and Tailwind CSS that runs entirely in the browser. Experience a Windows-like interface with file management, applications, and system features.

Project Structure

mojoOS/
├── README.md                    # This file
├── package.json                 # Dependencies and scripts
├── tailwind.config.js          # Tailwind CSS configuration
├── next.config.js              # Next.js configuration
└── src/
    ├── app/
    │   ├── layout.tsx          # Root layout component
    │   └── page.tsx            # Main application page
    ├── components/
    │   ├── Desktop.tsx         # Main desktop component
    │   ├── Taskbar.tsx         # Bottom taskbar
    │   ├── Window.tsx          # Window management
    │   ├── StartMenu.tsx       # Start menu
    │   ├── Clock.tsx           # System clock
    │   ├── ContextMenu.tsx     # Right-click context menus
    │   └── apps/
    │       ├── FileExplorer.tsx    # File manager
    │       ├── Calculator.tsx      # Calculator app
    │       ├── TextEditor.tsx      # Text editor
    │       ├── Settings.tsx        # System settings
    │       └── SnakeGame.tsx       # Snake game
    └── context/
        └── AppContext.tsx      # Global state management

Overview

This project implements a complete desktop environment simulation in the browser, featuring:

1. Desktop Interface: Windows-like desktop with icons and wallpaper
2. Window Management: Drag, resize, minimize, maximize, and close windows
3. File System: Virtual file explorer with folder navigation
4. Applications: Built-in apps including calculator, text editor, and games
5. System Features: Taskbar, start menu, context menus, and settings

Key Features

• Modern UI: Built with Tailwind CSS for responsive and beautiful design
• Window Management: Full window operations like a real OS
• File Explorer: Complete file management with right-click context menus
• Multiple Apps: Calculator, Text Editor, Snake Game, and Settings
• Context Menus: Right-click functionality throughout the interface
• Theme Support: Light and dark theme options
• Responsive Design: Works on different screen sizes

Installation & Usage

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/httpsmojojojo/mojoOS.git
cd mojoOS

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser

Usage

• Desktop: Click on desktop icons to open applications
• Start Menu: Click the start button to access all applications
• File Explorer: Navigate folders, create/delete files, right-click for options
• Windows: Drag to move, resize corners, use minimize/maximize/close buttons
• Context Menus: Right-click anywhere for relevant options

Applications

File Explorer

• Navigate through folders and files
• Create, delete, and rename items
• Right-click context menus with "Open with" options
• List and grid view modes
• Search functionality

Calculator

• Basic arithmetic operations
• Clean, modern interface
• Keyboard support

Text Editor

• Full-featured text editor with menus
• File operations (New, Open, Save)
• Text formatting options
• Multiple editor themes

Snake Game

• Classic Snake game
• Keyboard controls (Arrow keys, Space, Enter)
• Score tracking
• Pause/resume functionality

Settings

• Theme selection (Light/Dark)
• Background customization
• System preferences

Technologies Used

• ReactJS: Frontend library for building user interfaces
• NextJS: React framework for server-side rendering and static site generation
• Tailwind CSS: Utility-first CSS framework for styling
• TypeScript: Type-safe JavaScript
• Lucide React: Beautiful icon library

Browser Compatibility

• Chrome (recommended)
• Firefox
• Safari
• Edge

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.