A single-page dashboard portal for quick link access, built with React, TypeScript, and Express.js.

• Customizable Dashboards: Create multiple dashboards with custom layouts
• Smart Link Management: Organize links with descriptions, icons, and thumbnails
• Drag & Drop Interface: Intuitive drag-and-drop reordering of dashboards and links
• Responsive Design: Works seamlessly on desktop and mobile devices
• Theme Support: Light and dark theme options
• Data Persistence: Local file-based storage with export/import capabilities
• Favicon Integration: Automatic favicon fetching for links
• Grid Layout Control: Customize card sizes and grid columns per link
• Search Functionality: Quick search across all your links and dashboards
• Background Customization: Set custom colors or images for your dashboards

# Pull and run the latest image
docker run -d --name warpdeck -p 8089:8089 -v $(pwd)/data:/app/server/data loganrickert/warpdeck:latest

# Build the Docker image
docker build -t warpdeck:latest .

# Run the container
docker run -d --name warpdeck -p 8089:8089 -v $(pwd)/server/data:/app/server/data warpdeck:latest

Port Mapping: -p 8089:8089 maps container port 8089 to host port 8089
Volume Mounting: -v $(pwd)/data:/app/server/data persists your dashboards and settings

The application will be available at http://localhost:8089

• Node.js 20+
• pnpm

# Install dependencies
pnpm install

# Install client dependencies
cd client && pnpm install

# Install server dependencies
cd server && pnpm install

# Build the application
pnpm run build

# Start the server
pnpm start

warpdeck/
├── client/                 # React frontend
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   ├── pages/         # Page components
│   │   ├── api/           # API client functions
│   │   └── types.ts       # TypeScript type definitions
│   └── package.json
├── server/                 # Express.js backend
│   ├── src/
│   │   ├── api/           # API route handlers
│   │   ├── lib/           # Utility libraries
│   │   └── index.ts       # Server entry point
│   └── package.json
├── Dockerfile              # Multi-stage Docker build
├── .dockerignore           # Docker build exclusions
└── package.json            # Root package configuration

# Development
pnpm run dev:server         # Start server in development mode
pnpm run dev:client         # Start client in development mode

# Building
pnpm run build              # Build both client and server
pnpm run docker:build       # Build Docker image
pnpm run docker:run         # Run Docker container

# Server management
pnpm run start              # Start production server

1. Start the development server:

   pnpm run dev:server

2. Start the development client:

   pnpm run dev:client

3. Make changes to the code - both client and server support hot reloading

4. Build for production:

   pnpm run build

• PORT: Server port (default: 8089)
• DATA_DIR: Data storage directory (default: /app/server/data)
• NODE_ENV: Environment mode (default: production)

The application stores data in the server/data/ directory:

• settings.json: Global application settings
• dashboards/: Individual dashboard files
• images/: Uploaded thumbnails and images

1. Navigate to Settings → Dashboards
2. Click "Add Dashboard"
3. Enter a title and slug
4. Customize the layout (columns, card size, gutter)

1. Select a dashboard to edit
2. Click "Add Link" or edit existing links
3. Configure link properties:
   • Label and URL
   • Description and icon
   • Thumbnail image
   • Color customization
   • Grid column span
   • Open in new tab option

• Color Bar: Left border color for each link card
• Background Color: Custom background for link cards
• Text Color: Custom text color for link cards
• Grid Columns: Control how many columns a link spans
• Card Size: Small, medium, or large card sizes

The main dashboard provides quick access to all your important links with a clean, modern interface.

Quickly find any link or dashboard using the powerful search feature.

Customize your dashboard layout, background, and search preferences.

Easily manage and organize all your links in one place.

Fine-tune each link with custom colors, descriptions, and thumbnails.

docker build -t warpdeck:latest .

# Basic run
docker run -p 8089:8089 warpdeck:latest

# With data persistence
docker run -p 8089:8089 -v $(pwd)/server/data:/app/server/data warpdeck:latest

# With custom port
docker run -p 3000:8089 warpdeck:latest

version: '3.8'
services:
  warpdeck:
    build: .
    ports:
      - "8089:8089"
    volumes:
      - ./server/data:/app/server/data
    environment:
      - NODE_ENV=production

# Run client tests
cd client && pnpm test

# Run server tests
cd server && pnpm test

# Build the application
pnpm run build

# Start production server
pnpm start

# Build production image
docker build -t warpdeck:latest .

# Deploy to your preferred container platform
docker push your-registry/warpdeck:latest

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

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

• Built with React and TypeScript
• UI components from Material-UI
• Drag and drop functionality from @dnd-kit
• Backend powered by Express.js

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Wiki: GitHub Wiki

WarpDeck - Your personal dashboard portal for quick link access.