Technology Stack Deep Dive

Comprehensive overview of all technologies, frameworks, and libraries used in Staque IO.

Frontend Stack

Core Framework

Technology	Version	Purpose
Next.js	14.x	React framework with SSR, routing, and API routes
React	18.x	UI library for component-based development
TypeScript	5.x	Type-safe JavaScript with compile-time checking

UI & Styling

Technology	Version	Purpose
Tailwind CSS	3.x	Utility-first CSS framework
Lucide React	Latest	Icon library for React
Google Fonts	-	Playfair Display, Manrope typography

State Management

// React Context API for global state
AuthContext        → User authentication state
ConversationsContext → Conversation management

// Local Component State
useState()   → Component-level state
useEffect()  → Side effects and lifecycle
useCallback() → Memoized callbacks
useMemo()    → Memoized values

Backend Stack

Runtime & Server

Technology	Version	Purpose
Node.js	18+	JavaScript runtime
Next.js API Routes	14.x	Serverless API endpoints

Authentication & Security

Technology	Version	Purpose
jsonwebtoken	9.x	JWT token generation and verification
bcryptjs	2.x	Password hashing and verification

Database Stack

Database & ORM

Technology	Version	Purpose
PostgreSQL	13+	Primary relational database
node-postgres (pg)	8.x	PostgreSQL client for Node.js

Database Features Used

JSONB: Flexible schema for metadata storage
UUID: Primary keys for all tables
Indexes: Optimized queries on frequently accessed fields
Foreign Keys: Referential integrity
Connection Pool: Efficient connection management
Transactions: Atomic operations for data consistency

Cloud Services & APIs

AWS SDK Packages

Package	Version	Purpose
@aws-sdk/client-bedrock	3.x	List and describe Bedrock models
@aws-sdk/client-bedrock-runtime	3.x	Invoke Bedrock models
@aws-sdk/client-sagemaker	3.x	Manage SageMaker endpoints
@aws-sdk/client-sagemaker-runtime	3.x	Invoke SageMaker endpoints
@aws-sdk/client-pricing	3.x	Fetch AWS pricing data

External APIs

Service	Purpose	Integration Method
OpenAI API	AI recommendations (o1-mini model)	REST API (fetch)
NVIDIA NIM	Hosted AI models	REST API (fetch)

Development Tools

Build & Development

Tool	Purpose
TypeScript Compiler	Type checking and compilation
Next.js Dev Server	Hot module replacement
ESLint	Code linting and quality
PostCSS	CSS processing

Package Management

{
  "name": "staque-io",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    // Core
    "next": "^14.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    
    // AWS SDKs
    "@aws-sdk/client-bedrock": "^3.x",
    "@aws-sdk/client-bedrock-runtime": "^3.x",
    "@aws-sdk/client-sagemaker": "^3.x",
    "@aws-sdk/client-sagemaker-runtime": "^3.x",
    "@aws-sdk/client-pricing": "^3.x",
    
    // Database
    "pg": "^8.x",
    
    // Authentication
    "jsonwebtoken": "^9.x",
    "bcryptjs": "^2.x",
    
    // Styling
    "tailwindcss": "^3.x",
    "lucide-react": "latest",
    
    // TypeScript
    "typescript": "^5.x"
  }
}

Architecture Patterns

Design Patterns Used

Repository Pattern: Database access abstraction
Factory Pattern: AWS client creation
Strategy Pattern: Platform-specific model invocation
Provider Pattern: React context for state management
Middleware Pattern: Authentication and authorization

Code Organization

src/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   ├── dashboard/         # Dashboard pages
│   ├── docs/              # Documentation pages
│   └── ...
├── components/            # React components
│   ├── layout/           # Layout components
│   ├── dashboard/        # Dashboard-specific
│   └── ...
├── contexts/             # React contexts
│   ├── AuthContext.tsx
│   └── ConversationsContext.tsx
├── lib/                  # Libraries and utilities
│   ├── db.ts            # Database connection
│   └── ...
├── types/               # TypeScript type definitions
│   └── database.ts
└── utils/               # Utility functions
    ├── auth/            # Authentication utilities
    ├── aws/             # AWS utilities
    └── ...

🚀 Technology Highlights

Modern Stack: Latest versions of Next.js, React, and TypeScript
Type Safety: Full TypeScript coverage for compile-time error detection
Serverless: Next.js API routes enable automatic scaling
Performance: Server-side rendering for fast initial page loads
Developer Experience: Hot module replacement and fast refresh