VibeOS 🖥️✨

A fully functional retro-themed web-based desktop environment inspired by TempleOS aesthetics. Built with Next.js 16, React 19, TypeScript, and Supabase.

Features

• 🎨 Authentic Retro Aesthetic - CRT scanlines, 16-color VGA palette, monospace fonts, 3D beveled borders
• 📁 File Management System - Full CRUD operations with persistent storage
• ✏️ Text Editor - Edit files with real-time saving
• 💻 Console Terminal - Execute commands in a retro terminal
• 🤖 AI Chatbot - Integrated Vibely AI assistant powered by OpenRouter
• 🎨 Color Schemes - 4 retro color themes (Blue, Green, Amber, Red)
• 🔐 Authentication - Secure user accounts with Supabase Auth
• 💾 Persistent Storage - All data saved to PostgreSQL with Row Level Security
• 🪟 Draggable Windows - Fully interactive window management
• 📍 Desktop Icons - Draggable icons with position persistence

Tech Stack

• Frontend: Next.js 16 (App Router), React 19, TypeScript
• Styling: Tailwind CSS v4, Custom CSS for retro effects
• Backend: Supabase (PostgreSQL + Auth)
• AI: OpenRouter API (GPT-3.5-turbo)

Setup Instructions

1. Install Dependencies

npm install

2. Set Up Supabase

1. Create a new project at supabase.com
2. Go to SQL Editor and run the contents of supabase-setup.sql
3. Get your project URL and anon key from Settings > API

3. Configure Environment Variables

Create a .env.local file:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here
OPENROUTER_API_KEY=your_openrouter_api_key_here

To get an OpenRouter API key:

1. Sign up at openrouter.ai
2. Go to Keys section and create a new API key

4. Run Development Server

npm run dev

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

Database Schema

Files Table

• id - UUID primary key
• user_id - References auth.users
• name - File name
• content - File content (TEXT)
• file_type - File type (text, code, binary)
• folder - Folder location (root, documents, images, code, etc.)
• created_at - Timestamp
• updated_at - Timestamp

User Preferences Table

• id - UUID primary key
• user_id - References auth.users (UNIQUE)
• desktop_color - Desktop background color
• window_layout - JSONB for window positions
• welcome_shown - Boolean flag
• created_at - Timestamp
• updated_at - Timestamp

Features Breakdown

File Management

• Create, read, update, delete files
• Upload files from your computer
• Download files to your computer
• Organize files in 9 folders
• Real-time file list updates

Text Editor

• Edit any text file
• Auto-save functionality
• Syntax highlighting (retro green on black)
• Save confirmation feedback

Console Terminal

• Boot sequence animation
• Available commands: HELP, CLEAR, TIME, SYSINFO, UPTIME, ECHO
• Command history
• Retro green terminal aesthetic

AI Chatbot (Vibely)

• Real-time chat with AI
• Conversation history
• Retro-styled chat bubbles
• Powered by GPT-3.5-turbo

Desktop Environment

• Draggable windows with resize
• Draggable desktop icons
• Persistent icon positions
• System time display
• Taskbar with quick access buttons
• 4 color scheme options

Security

• Row Level Security (RLS) ensures users can only access their own data
• All database queries are filtered by authenticated user ID
• API keys are server-side only
• Secure authentication with Supabase Auth

Deployment

Deploy to Vercel

1. Push your code to GitHub
2. Import project in Vercel
3. Add environment variables in Vercel project settings
4. Deploy!

Project Structure

vibeos/
├── app/
│   ├── api/
│   │   └── chat/
│   │       └── route.ts          # AI chat API endpoint
│   ├── auth/
│   │   ├── login/
│   │   │   └── page.tsx          # Login page
│   │   └── signup/
│   │       └── page.tsx          # Signup page
│   ├── desktop/
│   │   └── page.tsx              # Main desktop environment
│   ├── globals.css               # Global styles + retro effects
│   ├── layout.tsx                # Root layout
│   └── page.tsx                  # Root redirect
├── components/
│   ├── color-scheme-selector.tsx # Color theme switcher
│   ├── console-window.tsx        # Terminal console
│   ├── desktop-icons.tsx         # Desktop icon grid
│   ├── file-explorer.tsx         # File management UI
│   ├── retro-button.tsx          # Styled button component
│   ├── retro-window.tsx          # Draggable window component
│   ├── text-editor.tsx           # File editor
│   ├── vibely-chatbot.tsx        # AI chat interface
│   └── welcome-notification.tsx  # First-time user welcome
├── lib/
│   └── supabase/
│       ├── client.ts             # Browser Supabase client
│       ├── middleware.ts         # Middleware Supabase client
│       └── server.ts             # Server Supabase client
├── middleware.ts                 # Auth middleware
├── supabase-setup.sql            # Database schema
└── package.json

Default Files

New users automatically get 10 starter files:

• README.txt
• SYSTEM_INFO.txt
• GETTING_STARTED.txt
• NOTES.txt
• TIPS_AND_TRICKS.txt
• sample_code.js
• example.html
• GALLERY.txt
• PROJECTS.txt
• CHANGELOG.txt

Color Schemes

1. BLUE (Classic TempleOS) - Blue background, gray text, cyan accents
2. GREEN (Terminal style) - Black background, green text
3. AMBER (Retro monitor) - Black background, orange text
4. RED (Alert style) - Black background, red text

Browser Compatibility

Works best in modern browsers:

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+

License

MIT License - Feel free to use this project for learning or building your own retro OS!

Credits

Inspired by TempleOS, DOS, and Windows 95 aesthetics. Built with modern web technologies to deliver a nostalgic experience.

---

Enjoy your retro computing experience! 🎮