Prototyping tool Quant-UX

What is Quant-UX?

Quant UXis a research, usability and prototyping tool to quickly test your designs and gain data-driven insights. Quant-UXMake it easy to validate your ideas. Quant UXCreate an interactive prototype in minutes using the visual editor that feels like a real app.

Previously, Lao Su introduced a prototype toolPenpot

Article Portal: Open Source Design and Prototyping Platform Penpot

Judging from the official demo video, there is still a big difference between the two.

How much UX

Install

environment variable

dockerEnvironment variables related to

variable	value
QUX_HTTP_PORT	The port on which the backend service runs
QUX_MAIL_USER	Your smtpserver username
QUX_MAIL_PASSWORD	Your smtpserver user's password
QUX_MAIL_HOST	your smtpserver 's hosturl
QUX_JWT_PASSWORD	Can be generated via https://jwt.io/

For more detailed descriptions of environment variables, please see the official documentation: https://github.com/bmcgonag/quant-ux-docker/tree/main#docker-compose-environment-variables

docker compose install

Save the following content as docker-compose.ymla file

bmcgonag/qux-be:latestThe corresponding version is 1.8.0;

bmcgonag/qux-fe:latestThe corresponding version is 1.8.0;

version: '3'

services:
  mongo:
    restart: always
    container_name: quant-ux-mongo
    image: mongo:4.4.0
    volumes:
      - ./data:/data/db
  
  qux-fe:
    restart: always
    container_name: quant-ux-frontend
    image: bmcgonag/qux-fe
    environment:
      - QUX_PROXY_URL=http://quant-ux-backend:8780
    links:
      - mongo
      - qux-be
    ports:
      - 8782:8082        
    depends_on:
      - qux-be
  
  qux-be:
    restart: always
    container_name: quant-ux-backend
    image: bmcgonag/qux-be
    environment:
      - QUX_HTTP_HOST=http://quant-ux-frontend:8782
      - QUX_HTTP_PORT=8780
      - QUX_MONGO_DB_NAME=quantux
      - QUX_MONGO_TABLE_PREFIX=quantux
      - QUX_MONGO_CONNECTION_STRING=mongodb://quant-ux-mongo:27017
      - [email protected]
      - QUX_MAIL_PASSWORD=<第三方邮件客户端密码>
      - QUX_MAIL_HOST=smtp.88.com
      - QUX_JWT_PASSWORD=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
      - QUX_IMAGE_FOLDER_USER=/qux-images
      - QUX_IMAGE_FOLDER_APPS=/qux-image-apps
      - QUX_DEBUG=false
      - TZ=Asia/Shanghai
    depends_on:
      - mongo

Then execute the following command

# 新建文件夹 quant-ux 和 子目录
mkdir -p /volume2/docker/quant-ux/data

# 进入 quant-ux 目录
cd /volume2/docker/quant-ux

# 将 docker-compose.yml 放入当前目录

# 一键启动
docker-compose up -d

run

Enter in the browser http://群晖IP:3030to see the main interface

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-CnxMPR9E-1685322286825)(null)]

Register an account first

After successful login

Can switch to Chinese

Or Chinese looks more comfortable

+point new prototype

Quant-UXThe canvas has three main views on the prototype

• DesignViews allow you to create the visual aspect of your prototype. You can add screens and widgets and change the appearance.
• PrototypeViews define screens and interactions between elements. In prototype view, you can view and create links between screens. You can also customize some dynamic properties of input elements, such as form validation and data binding.
• LowCodeViews, you can define properties that are important for turning your prototype into a working application.

The last official picture

reference documents

KlausSchaefers/quant-ux: Quant-UX - Prototype, Test and Learn
地址：https://github.com/KlausSchaefers/quant-ux

bmcgonag/quant-ux-docker: Dockerized Quant-UX Prototyping Tool
地址：https://github.com/bmcgonag/quant-ux-docker/

Quant-UX - Prototype, Test and Learn - 4.0.70
Address: https://quant-ux.com