Skip to content

README.md

Latest commit

 

History

History
126 lines (90 loc) · 3.24 KB

README.md

File metadata and controls

126 lines (90 loc) · 3.24 KB
Raw
GHBanner

BLIN OS - Modern Desktop Operating System Simulator

A beautiful, interactive desktop operating system simulator built with React, TypeScript, and Vite. Features a glassmorphic design, draggable windows, widgets, and multiple applications.

✨ Features

  • 🎨 Modern glassmorphic UI design
  • 🪟 Draggable application windows
  • 📊 Real-time widgets (Weather, Tasks, Calendar, System Monitor)
  • 🚀 Multiple built-in applications
  • 📱 Responsive design
  • 🔒 Lock screen with authentication

🚀 Run Locally

Prerequisites: Node.js (v18 or higher)

  1. Install dependencies:

    npm install

  2. Set up environment variables:

    • Create a .env.local file in the root directory
    • Add your Gemini API key: 
      GEMINI_API_KEY=your_api_key_here

  3. Run the development server:

    npm run dev

    The app will be available at http://localhost:3000

📦 Build for Production

Build the project for production deployment:

npm run build

Preview the production build locally:

npm run preview

🌐 Deploy to GitHub Pages

Automatic Deployment (Recommended)

This project is configured with GitHub Actions for automatic deployment:

  1. Push to GitHub:

    git add .
git commit -m "Deploy to GitHub Pages"
git push origin main

  2. Enable GitHub Pages:

    • Go to your repository settings on GitHub
    • Navigate to Pages section
    • Under Source, select GitHub Actions

  3. Wait for deployment:

    • The GitHub Action will automatically build and deploy your site
    • Your site will be available at: https://yourusername.github.io/web2/

Manual Deployment

Alternatively, deploy manually using gh-pages:

npm run deploy

This will build the project and deploy it to the gh-pages branch.

🛠️ Technology Stack

  • React 19 - UI framework
  • TypeScript - Type safety
  • Vite - Build tool and dev server
  • Tailwind CSS - Styling (via inline classes)
  • Google Generative AI - AI Assistant integration

📁 Project Structure

web2/
├── components/          # React components
│   ├── apps/           # Application components
│   └── widgets/        # Widget components
├── services/           # API services
├── .github/workflows/  # GitHub Actions
├── App.tsx             # Main app component
├── constants.ts        # App constants
├── types.ts            # TypeScript types
└── vite.config.ts      # Vite configuration

🎮 Usage

  1. Lock Screen: Click "Unlock" to access the desktop
  2. Open Apps: Click on icons in the dock at the bottom
  3. Move Windows: Drag windows by their title bar
  4. Close Apps: Click the red button on window title bar
  5. Widgets: View real-time information on left and right sides
  6. Logout: Click the logout button in the bottom-right corner

📝 License

This project is private and not licensed for public use.

🔗 Links