Kaleidoscope

Kaleidoscope Mosaic is a web application for previewing websites across multiple device frames, enabling responsive design testing and visual comparison. Built with React and TypeScript, it features a customizable device sidebar, live URL preview, dark mode, and device pinning.

Features

• Device Preview: Simulate mobile, tablet, laptop, and desktop frames with accurate dimensions.
• Live URL Input: Enter any website URL to preview instantly.
• Device Pinning: Pin frequently used devices for quick access.
• Comparison Mode: View multiple devices side-by-side.
• Sidebar: Manage devices, URLs, and view modes.
• Drag & Drop: Rearrange device frames in comparison mode.
• Error Handling: Friendly messages for invalid or localhost URLs.

Getting Started

Prerequisites

• Node.js (v18+ recommended)
• npm or yarn

Installation

git clone https://github.com/Nathanael-R/kaleidoscope.git
cd mosaic/mosaic-client
npm install

Running the App

npm run dev

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

Project Structure

mosaic-client/
├── src/
│   ├── components/
│   │   ├── header.tsx         # App header with dark mode toggle
│   │   ├── sidebar.tsx        # Device and URL management sidebar
│   │   ├── preview-area.tsx   # Main preview area for device frames
│   │   ├── device-frame.tsx   # Individual device frame renderer
│   ├── lib/
│   │   └── devices.ts         # Device definitions and helpers
│   ├── main.tsx               # App entry point
│   └── App.tsx                # Main app component
├── index.html                  # HTML entry point

Usage

1. Enter a URL in the sidebar to preview it.
2. Select devices from the sidebar to view their frames.
3. Pin devices for quick access.
4. Toggle dark mode using the sun/moon button in the header.
5. Switch view modes for single or comparison layouts.

Customization

• Add Devices: Edit src/lib/devices.ts to add or modify device definitions.
• Styling: Uses Tailwind CSS for rapid UI customization.
• Dark Mode: Styles adapt automatically when toggled.

Contributing

Pull requests are welcome! Please open issues for bugs or feature requests.

License

MIT

---

Note: Localhost URLs cannot be previewed