3DQ is built using modern web technologies with a clear separation between frontend and backend components. This document outlines the technical stack and architecture of the application.

• Framework: React 18
• UI Library: Material-UI (MUI v5)
• State Management: React Context API
• Routing: React Router v6
• Styling: CSS-in-JS with Material-UI's styling solution

• Sidebar.js: Navigation sidebar with collapsible menu
• TopBar.js: App bar with page title and navigation controls
• DynamicLogo.js: SVG logo component with dynamic accent color theming

• ViewQuote.js: Displays quote details and actions
• QuoteBuilder.js: Interface for creating and editing quotes
• QuoteList.js: Displays a list of all quotes

• SettingsPage.js: Application configuration and preferences
• SettingsContext.js: Manages application-wide settings

• Runtime: Node.js (v20+ required)
• Web Framework: Express.js
• Database: SQLite with better-sqlite3
• API: RESTful JSON API

3dq/
├── client/                 # React frontend
│   ├── public/             # Static files
│   └── src/                # React source code
│       ├── components/     # Reusable components
│       │   ├── layout/     # Layout components (Sidebar, TopBar)
│       │   ├── logo/       # Logo components (DynamicLogo)
│       │   └── quote/      # Quote-related components
│       ├── context/        # React Context providers
│       ├── pages/          # Page components
│       ├── utils/          # Utility functions
│       └── App.js          # Main App component
├── config/                 # Configuration and data (persisted)
│   ├── 3dq.sqlite         # SQLite database
│   └── quotes/            # Directory for data persistence
├── routes/                 # Express API routes
│   ├── filaments.js       # Filament management routes
│   ├── quotes.js          # Quote management routes
│   ├── spoolman.js        # Spoolman integration routes
│   └── ...                # Other API routes
├── utils/                  # Utility scripts
│   └── init-db.js         # Database initialization script with example data
├── server.js              # Express server entry point
└── package.json           # Project dependencies

• Node.js v20 or higher
• npm v6 or higher

# Install dependencies
npm install

# Start development server
npm run dev

# Install dependencies
npm install

# Build the frontend
npm run build

# Start the production server
npm start

3DQ can be deployed using Docker for easy setup and deployment:

# Build the Docker image
docker build -t 3dq .


# Run the container
docker run -d \
  --name 3dq \
  -p 6123:6123 \
  -v ~/3dq-data:/config \
  3dq

The Docker image includes:

• Node.js 20 runtime
• All required dependencies
• Pre-built frontend assets
• Proper environment configuration

1. Make your changes to files in the client/src directory
2. Rebuild the frontend:

   npm run build

3. Restart the server to apply changes:

   npm start

1. Install the dependency in the root directory:

   npm install package-name

2. If the dependency is only needed for the frontend, install it in the client directory:

   cd client
   npm install package-name

The application uses the following logging conventions:

• console.log() for general information
• console.error() for errors
• console.warn() for warnings

In production, consider using a proper logging library for better log management.