Installing Quant-UX using Docker

If you've ever wanted to just throw some screen ideas onto a canvas before, almost like a quick napkin drawing, or if you've wanted to create a fully clickable interface that you could have potential users give you feedback from, then you should definitely look at Quant-UX.

As a Product Manager, one of my jobs is to create workflows, and screens and useer interactions.  I am provided (most of the time) some really great user interface guidance, and elements, from amazing UX / UI Engineers, but many times the actual workflow, and screen layout is up to me.

One of the best things you can do, is come up with several different flows and have users go through them.  Watch them use it, listen to their comments, and try to make changes and improvements based on that feedback.

Sometimes, I just need a quick black and white line drawing to get my ideas in front of my development team, or my peers to get everyone on the "same page" with and idea.

Tools like Figma, Axure, Balsamiq, and so on give you a ton of power and flexibility in creativity, but none of them are open source.  Well, Quant-UX is, adn it is AMAZING!

You can create screens, generate clickable, interactive prototypes, and get testing based information on what and where users click, how long they spend on various screens, and so much more.

Let's install it!

Installation

What You'll Need

Installing Docker-CE and Docker-Compose

You can easily install Docker-CE, Docker-Compose, Portainer-CE, and NGinX Proxy manager by using this quick install script I created and maintain on Github.  Just use the command:

wget https://gitlab.com/bmcgonag/docker_installs/-/raw/main/install_docker_nproxyman.sh

To download the script to your desired host.

Change the permissios to make the script executable:

chmod +x ./install_docker_nproxyman.sh

and then run the script with the command:

./install_docker_nproxyman.sh

When run, the script will prompt you to select your host operating system, then will ask you which bits of software you want to install.

Simply enter 'y' for each thing you want to install.

At some point, you'll be asked for your super user (sudo) password as well.

Allow the script to complete installation.

At this point, you might want to log out and back in, as this will allow you to use the docker and docker-compose commands without the need of sudo in front of them.

Installing Quant-UX using Docker and Docker-Compose

Next, you'll want to get the docker-compose file from my GitHub repository.

You can get in 1 of 3 ways.

git clone https://github.com/bmcgonag/quant-ux-docker.git

2. Just download the docker-compose.yml file with wget. First, create a new folder called quant-ux-docker to put the file in.

mkdir quant-ux-docker

cd quant-ux-docker

wget https://raw.githubusercontent.com/bmcgonag/quant-ux-docker/main/docker-compose.yml

3. Just copy the raw file contents into a docker-compose.yml file. Again, first create a folder called "quant-ux-docker".

mkdir quant-ux-docker

cd quant-ux-docker

Then create the docker-compose.yml file in the nano editor with the command:

nano docker-compose.yml

and now, copy and paste the following code block into that file.

version: '3'

services:
  mongo:
    restart: always
    container_name: quant-ux-mongo
    image: mongo
    volumes:
      - ./data:/data/db        # pth for the data to be stored and kept on your host machine is on the left side of the ":"
  qux-fe:
    restart: always
    container_name: quant-ux-frontend
    image: bmcgonag/qux-fe
    environment:
      - QUX_PROXY_URL=http://quant-ux-backend:8080        # this is the path the front end uses to talk tot he backend
    links:
      - mongo
      - qux-be
    ports:
      - 8082:8082        # change the left side port if your host machine already has 8082 in use
    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:8082        # this is the path the backend uses to talk to the front end
      - QUX_HTTP_PORT=8080        # This is the port the backend will use
      - QUX_MONGO_DB_NAME=quantux        # the database / collection name in mongodb
      - QUX_MONGO_TABLE_PREFIX=quantux        # table / document prefix in mongodb
      - QUX_MONGO_CONNECTION_STRING=mongodb://quant-ux-mongo:27017        # this assumes your mongodb container will be called "quant-ux-mongo" in the docker-compose file
      - QUX_MAIL_USER=mail_admin@example.com        # this should be your smtp email user
      - QUX_MAIL_PASSWORD=sTr0ngPa55w0Rd        # this should be your smtp email password
      - QUX_MAIL_HOST=mail.example.com        # this should be your smtp host address
      - QUX_JWT_PASSWORD=some-long-string-of-mix-case-chars-and-nums        # you should change this to a real JWT secret
      - QUX_IMAGE_FOLDER_USER=/qux-images        # just a folder name, change if you like
      - QUX_IMAGE_FOLDER_APPS=/qux-image-apps        # just a folder name, change if you like
      - TZ=America/Chicago        # change to your timezone
    depends_on:
      - mongo

Once copied, paste it with the hotkey combo CTRL + Shift + V, or use a right click in the terminal and select paste from the pop-up menu.

Edit the Docker-Compose.yml file

Now we need to make a few potential changes to this file.

I have a table of the Environment variables in the GitHub Readme file https://github.com/bmcgonag/quant-ux-docker/blob/main/README.md, but you can just follow along as well.

You'll most like only want to change the following five (5) environment variables in the file. The rest should absolutely stay the same unless you have a really good reason for changing them.

The mail user, should be an actual email user, the mail password should be the password for that user, the mail host should be the SMTP server address (URL).  The JWT Password should be a long, strong, password with upper, and lower case letters and numbers, and be at least 24 characters in length.

You can generate a JWT Password at https://jwt.io/ if you prefer.

Finally, set your TZ (Timezone) for your location.

Once, all of these have been set, use CTRL + O, then press Enter to save the changes in nano, then use CTRL + X to exit the nano editor.

Now, you'll bring up your Quant-UX install with the command:

docker-compose up -d

Give it just a minute or so to download the images, and get their respective containers started, then navigate in your browser to the host machine IP and port 8082.

In my case I went to http://192.168.10.26:8082

Here you can "Sign Up" for your new install, then start getting creative.

Support My Channel

Support my Channel and ongoing efforts through Patreon: https://www.patreon.com/bePatron?u=234177