Setting Up a Full-Stack Development Environment for Algorithmic Trading using Docker

Creating an efficient development environment for algorithmic trading requires a blend of modern tools and technologies. This guide will walk you through setting up a comprehensive and robust algorithmic trading and development environment, leveraging Python 3.11, FastAPI, Vue.js, PostgreSQL, Redis, and Docker. We will also explain the role of each tool and why they are essential for your development process.

Tools and Technologies

1. Python 3.11 and FastAPI + Uvicorn (Backend)
2. Virtual Environment
3. Node.js and NPM
4. Vue.JS + Tailwind CSS (Frontend)
5. Postgres (Database)
6. Redis (In-memory Cache)
7. Docker

Pre Requesites

VS Code Editor with Python Installed

Architecture of Algorithmic Trading Framework

                  +----------------------------------------------------+
                  |                       Docker                       |
                  |                                                    |
                  |  +----------------------------------------------+  |
                  |  |                Virtual Environment           |  |
                  |  |                                              |  |
                  |  |  +--------------------+ +-----------------+  |  |
                  |  |  |                    | |                 |  |  |
                  |  |  |      Backend       | |   Frontend      |  |  |
                  |  |  |  Python 3.11 +     | |  Node.js + NPM  |  |  |
                  |  |  |  FastAPI + Uvicorn | |  Vue.js +       |  |  |
                  |  |  |                    | |  Tailwind CSS   |  |  |
                  |  |  +--------------------+ +-----------------+  |  |
                  |  |                                              |  |
                  |  |  +--------------------+ +-----------------+  |  |
                  |  |  |     Database       | |       Cache     |  |  |
                  |  |  |     PostgreSQL     | |       Redis     |  |  |
                  |  |  +--------------------+ +-----------------+  |  |
                  |  +----------------------------------------------+  |
                  |                                                    |
                  +----------------------------------------------------+

Flow of Data:
1. Frontend (Vue.js + Tailwind CSS) sends requests to the Backend (FastAPI + Uvicorn).
2. Backend processes requests and interacts with:
   a. PostgreSQL Database for persistent storage.
   b. Redis Cache for fast data retrieval.
3. Docker encapsulates all components ensuring consistency and ease of deployment.

Why These Tools?

1. Python 3.11 and FastAPI + Uvicorn (Backend):
   • Python 3.11: Known for its simplicity and versatility, Python is ideal for algorithmic trading due to its rich ecosystem of libraries for data analysis and machine learning.
   • FastAPI: A modern, fast (high-performance) web framework for building APIs with Python 3.7+ based on standard Python type hints. It offers automatic interactive API documentation.
   • Uvicorn: An ASGI server for Python, it’s lightning-fast and ideal for serving FastAPI applications.
2. Virtual Environment:
   • Virtual Environment: Used to create isolated Python environments to manage dependencies effectively without conflicts.
3. Node.js and NPM:
   • Node.js: A JavaScript runtime built on Chrome’s V8 engine, it’s used for building scalable network applications.
   • NPM: A package manager for JavaScript, it helps manage dependencies and run scripts.
4. Vue.JS + Tailwind CSS (Frontend):
   • Vue.js: A progressive JavaScript framework for building user interfaces, it’s simple yet powerful for developing modern web applications.
   • Tailwind CSS: A utility-first CSS framework for creating custom designs without leaving your HTML.
5. Postgres (Database):
   • Postgres: A powerful, open-source object-relational database system known for its robustness, flexibility, and SQL compliance.
6. Redis (In-memory Cache):
   • Redis: An open-source, in-memory data structure store, used as a database, cache, and message broker, providing high performance and scalability.
7. Docker:
   • Docker: A platform that enables you to build, test, and deploy applications quickly. It packages software into standardized units called containers that include everything needed to run.

Step-by-Step Setup

1. Install Docker:

• Download and install Docker Desktop from the official Docker website.
• Start Docker Desktop and ensure it is running.

2. Create a Project Directory:

mkdir dev-environment
cd dev-environment

3. Set Up the Backend with FastAPI:

Create a directory for the backend:

mkdir backend
cd backend

Create a virtual environment and activate it:

python -m venv venv
venv/scripts/activate

Install FastAPI and Uvicorn:

pip install fastapi uvicorn

PostgreSQL: Install asyncpg and databases libraries:

pip install asyncpg databases

Redis: Install redis library:

pip install redis

Update your requirements.txt:

fastapi
uvicorn
asyncpg
databases
redis

Add database and Redis configuration in main.py:

from fastapi import FastAPI
from databases import Database
import redis.asyncio as redis

DATABASE_URL = "postgresql://myuser:mypassword@postgres/mydb"
REDIS_URL = "redis://redis:6379"

database = Database(DATABASE_URL)
redis_client = redis.from_url(REDIS_URL)

app = FastAPI()

@app.on_event("startup")
async def startup():
    await database.connect()
    await redis_client.ping()

@app.on_event("shutdown")
async def shutdown():
    await database.disconnect()
    await redis_client.close()

@app.get("/")
def read_root():
    return {"Hello": "Development Environment"}

@app.get("/postgres")
async def postgres():
    query = "SELECT 1"
    result = await database.fetch_one(query=query)
    return {"PostgreSQL": result[0]}

@app.get("/redis")
async def redis():
    await redis_client.set("key", "value")
    value = await redis_client.get("key")
    return {"Redis": value.decode("utf-8")}

Install VUE.js and Tailwind CSS

To install Vue.js and test a Tailwind CSS application within your existing Docker FastAPI environment, you can follow these steps. We’ll create a Vue.js project, add Tailwind CSS, and serve the Vue.js application using a development server inside Docker.

Install Node.js and npm: Make sure you have Node.js and npm installed on your system. You can install Node.js from nodejs.org.

Install Vue CLI: Install Vue CLI globally using npm:

npm install -g @vue/cli

Step 2: Create a Vue.js Project

1. Create a New Vue Project: In your dev-environment directory, create a new Vue.js project:

vue create frontend

Follow the prompts to select the default preset or manually configure options as needed.

Step 3: Add Tailwind CSS to the Vue Project

1. Navigate to the Vue Project Directory:

cd frontend

Install Tailwind CSS: Install Tailwind CSS and its dependencies:

npm install tailwindcss postcss autoprefixer

Generate Tailwind Config Files: Generate the tailwind.config.js and postcss.config.js files:

npx tailwindcss init -p

Configure Tailwind CSS: Update tailwind.config.js to include your project files:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind Directives to CSS: Create a src/assets/tailwind.css file and add the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

Include Tailwind CSS in Your Project: Import the Tailwind CSS file in src/main.js:

import './assets/tailwind.css'

Add Tailwind CSS code to src/App.vue

<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
  <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->

  <div class="min-h-screen flex items-center justify-center bg-gray-100">
    <h1 class="text-4xl font-bold text-blue-600">Hello, Tailwind CSS!</h1>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  // components: {
  //   HelloWorld
  // }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Step 4: Config Frontend Port to 3000

Config vue.config.js for port 3000

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 3000
  }
})

Step 5: Create a Dockerfile for the Vue.js Project

Create a Dockerfile in the frontend directory:

# Use an official Node runtime as a parent image
FROM node:18-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the current directory contents into the container at /app
COPY . .

# Expose port 3000
EXPOSE 3000

# Run the app
CMD ["npm", "run", "serve"]

Step 6: Update docker-compose.yml

Add the Vue.js Service: Update your docker-compose.yml to include the Vue.js service:

services:
  backend:
    build:
      context: ./backend
    ports:
      - "8000:8000"
    volumes:
      - ./backend:/app
    depends_on:
      - postgres
      - redis

  postgres:
    image: postgres:14
    environment:
      POSTGRES_USER: myuser
      POSTGRES_PASSWORD: mypassword
      POSTGRES_DB: mydb
    volumes:
      - postgres_data:/var/lib/postgresql/data

  redis:
    image: redis:7

  frontend:
    build:
      context: ./frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/app
    command: ["npm", "run", "serve"]

volumes:
  postgres_data:

Step 7: Build and Run Docker Containers

Navigate to the Project Directory:

cd /path/to/devenvironment

Build and Start Docker Containers:

docker-compose up --build

Step 8: Test the FastAPI, Redis and Postgres

1. Open your web browser and go to http://localhost:8000. You should see the JSON response: {"Hello": "Development Environment"}.
2. Test PostgreSQL by going to http://localhost:8000/postgres. You should see a response indicating that the PostgreSQL connection is working.
3. Test Redis by going to http://localhost:8000/redis. You should see a response indicating that the Redis connection is working.

These steps should ensure that your FastAPI application with PostgreSQL and Redis is correctly set up and running inside Docker.

Step 9: Test the Vue.js Application

1. Open Your Browser:
   • Go to http://localhost:3000 to see the Vue.js application running with Tailwind CSS.

Step 10: Verify the Integration

1. Check FastAPI and Vue.js:
   • Ensure both the FastAPI application (http://localhost:8000) and the Vue.js application (http://localhost:3000) are running correctly.

Project Directory Structure

Ensure your project directory structure looks like this:

dev-environment/
├── backend/
│   ├── Dockerfile
│   ├── main.py
│   ├── requirements.txt
│   ├── venv/
│   │   ├── bin/
│   │   ├── include/
│   │   ├── lib/
│   │   ├── pyvenv.cfg
├── frontend/
│   ├── Dockerfile
│   ├── package.json
│   ├── package-lock.json
│   ├── postcss.config.js
│   ├── tailwind.config.js
│   ├── babel.config.js
│   ├── node_modules/
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── assets/
│   │   │   └── tailwind.css
│   │   ├── components/
│   │   ├── App.vue
│   │   ├── main.js
│   ├── .gitignore
│   └── README.md
├── docker-compose.yml

This setup will create a Docker environment where you can develop and test your FastAPI backend along with a Vue.js frontend using Tailwind CSS. If you encounter any issues, feel free to ask for further assistance.

By following this guide, you are well-equipped to harness the power of algorithmic trading, enabling you to test, deploy, and manage your trading strategies effectively. Remember, the key to success in algorithmic trading lies in continuous learning and adaptation, so keep exploring and refining your setup to stay ahead in the competitive trading landscape.

Happy Trading!