AWS SQS Ordering Demo

This is the AWS SQS ordering demonstration application. It showcases how messages are processed in different SQS queue types (Standard vs FIFO) with a visual drawing interface.

Features

• Modern UI with Tailwind CSS
• Vanilla JavaScript (ES6+) implementation
• AWS SDK v3 for JavaScript
• Color and line thickness controls for drawing
• Dark mode toggle with marine blue theme
• Responsive design
• Visual feedback for queue operations
• Touch device support

Technologies Used

• Node.js 20+
• Express.js
• AWS SDK v3 for JavaScript
• Tailwind CSS
• ES6+ JavaScript
• Docker

Project Structure

new-version/
├── public/               # Public assets
│   ├── css/              # Compiled CSS
│   ├── js/               # Client-side JavaScript
│   └── images/           # Images and screenshots
├── src/                  # Source files
│   └── css/              # Tailwind CSS source
├── index.js              # Server-side entry point
├── index.html            # Main HTML file
├── config.json           # Default configuration
├── package.json          # Dependencies and scripts
├── tailwind.config.js    # Tailwind configuration
├── Dockerfile            # Docker configuration
└── docker-compose.yml    # Docker Compose configuration

Environment Variables

• STANDARD_QUEUE_URL: Standard SQS queue URL
• FIFO_QUEUE_URL: FIFO SQS queue URL
• MAX_NUMBER_OF_MESSAGES: Max number of messages per SQS receive call (default: 5, max: 10)
• POLLING_INTERVAL: Queue polling frequency in ms (default: 2000)
• DELAY_BEFORE_CALLING_RECEIVE: Delay before polling after sending data in ms (default: 3000)
• SEGMENT_SIZE: Datapoints grouping size (default: 10)
• AWS_REGION: AWS Region for your queues
• AWS_ACCESS_KEY_ID: AWS Access Key ID
• AWS_SECRET_ACCESS_KEY: AWS Secret Access Key
• AWS_SESSION_TOKEN: (Optional) For temporary sessions with IAM roles

Getting Started

Run Directly with Node.js

1. Install dependencies:

cd new-version
npm install

2. Run the application:

Bash/Linux/macOS:

# Set environment variables first
export STANDARD_QUEUE_URL=https://sqs.REGION.amazonaws.com/ACCOUNT_ID/QUEUE_NAME
export FIFO_QUEUE_URL=https://sqs.REGION.amazonaws.com/ACCOUNT_ID/QUEUE_NAME.fifo
export AWS_REGION=REGION
export AWS_ACCESS_KEY_ID=YOUR_ACCESS_KEY
export AWS_SECRET_ACCESS_KEY=YOUR_SECRET_KEY

# Start the server
node index.js

PowerShell:

# Set environment variables first
$env:STANDARD_QUEUE_URL = "https://sqs.REGION.amazonaws.com/ACCOUNT_ID/QUEUE_NAME"
$env:FIFO_QUEUE_URL = "https://sqs.REGION.amazonaws.com/ACCOUNT_ID/QUEUE_NAME.fifo"
$env:AWS_REGION = "REGION"
$env:AWS_ACCESS_KEY_ID = "YOUR_ACCESS_KEY"
$env:AWS_SECRET_ACCESS_KEY = "YOUR_SECRET_KEY"

# Start the server
node index.js

3. Open the application in your browser: http://localhost:5000

Using Docker

Build Docker Image

docker build -t sqs-ordering-demo-modern .

Run with Docker

Bash/Linux/macOS:

docker run -p 8080:5000 \
  -e STANDARD_QUEUE_URL=https://sqs.REGION.amazonaws.com/ACCOUNT_ID/QUEUE_NAME \
  -e FIFO_QUEUE_URL=https://sqs.REGION.amazonaws.com/ACCOUNT_ID/QUEUE_NAME.fifo \
  -e AWS_REGION=REGION \
  -e AWS_ACCESS_KEY_ID=YOUR_ACCESS_KEY \
  -e AWS_SECRET_ACCESS_KEY=YOUR_SECRET_KEY \
  sqs-ordering-demo-modern

PowerShell:

docker run -p 8080:5000 `
  -e STANDARD_QUEUE_URL=https://sqs.REGION.amazonaws.com/ACCOUNT_ID/QUEUE_NAME `
  -e FIFO_QUEUE_URL=https://sqs.REGION.amazonaws.com/ACCOUNT_ID/QUEUE_NAME.fifo `
  -e AWS_REGION=REGION `
  -e AWS_ACCESS_KEY_ID=YOUR_ACCESS_KEY `
  -e AWS_SECRET_ACCESS_KEY=YOUR_SECRET_KEY `
  sqs-ordering-demo-modern

Launch with Docker Compose

1. Configure your environment variables in docker-compose.yml
2. Run the service:

docker-compose up

3. Open the application in your browser: http://localhost:8080

Development

Install Dependencies

npm install

Run Development Server

npm run dev

How to Use

1. Select a queue type (Standard or FIFO)
2. Choose a color and line thickness for drawing
3. Draw on the left canvas
4. Click "Start" to send your drawing to SQS
5. Watch as your drawing is reconstructed on the right canvas
   • With FIFO queue: Drawing should appear in the same order you drew it
   • With Standard queue: The order might be different
6. Toggle between light and dark mode using the switch in the header

Clean Up

Bash/Linux/macOS:

docker-compose down
docker rmi -f sqs-ordering-demo-modern

PowerShell:

docker-compose down
docker rmi -f sqs-ordering-demo-modern