Creating Your Marketplace

Build a Custom Marketplace for Your Ecosystem

This comprehensive guide shows you how to create a custom marketplace for The Architech CLI — whether for your company, community, or a specific technology ecosystem.

⚠️ Important: A production marketplace involves significant infrastructure (scripts, types, validation). We're developing architech create marketplace to scaffold this for you. Until then, use our official marketplace as a reference.

Why Create a Marketplace?

For Companies

✅ Enforce standards across all projects
✅ Share knowledge through reusable modules
✅ Onboard faster with consistent patterns
✅ Maintain control over technology choices

For Communities

✅ Serve your ecosystem (Vue, Angular, Svelte)
✅ Share best practices with the community
✅ Build specialized tools for your domain
✅ Drive innovation in your space

For Individuals

✅ Codify your preferences in reusable modules
✅ Automate your workflow across projects
✅ Showcase expertise with a public marketplace
✅ Contribute to the ecosystem

Marketplace Types

Choose the type that fits your needs:

1. Ecosystem Marketplace

For: Specific framework communities (Vue, Angular, Svelte)

Example: Vue.js marketplace with Pinia, Vite, and Vue Router

Golden Core equivalent:

State: Pinia
Data Fetching: TanStack Query (framework-agnostic!)
Forms: VeeValidate + Zod
Testing: Vitest

2. Company Marketplace

For: Internal use with company-approved technologies

Example: ACME Corp marketplace with Angular, Firebase, and enterprise SSO

Golden Core equivalent:

State: NgRx
Data Fetching: Angular HttpClient + RxJS
Forms: Angular Forms + Custom validators
Auth: Company SSO provider

3. Domain Marketplace

For: Specific domains (blockchain, e-commerce, AI/ML)

Example: Web3 marketplace with ethers.js, wagmi, and wallet connectors

Golden Core equivalent:

Wallet: RainbowKit
Blockchain: wagmi + viem
State: Zustand
Data: TanStack Query

Getting Started

Current Approach: Fork Official Marketplace

Until the architech create marketplace command is ready, fork our official marketplace:

# Step 1: Clone as template
git clone https://github.com/the-architech-xyz/marketplace my-marketplace
cd my-marketplace
 
# Step 2: Install dependencies
npm install
 
# Step 3: Explore the structure
ls -la

Understanding the Structure

my-marketplace/
├── package.json              # Exports, scripts (30+ scripts!)
├── tsconfig.json             # TypeScript config
├── adapters/                 # Technology installations
│   ├── framework/
│   ├── database/
│   ├── ui/
│   └── ...
├── connectors/               # Technology bridges
│   ├── docker-nextjs/
│   ├── drizzle-nextjs/
│   └── ...
├── features/                 # Complete capabilities
│   ├── auth/
│   ├── payments/
│   └── ...
├── genomes/                  # Project templates
│   └── official/
├── scripts/                  # Infrastructure (KEEP THESE!)
│   ├── generation/           # Auto-generate types, manifests
│   ├── validation/           # Validate modules
│   └── utilities/            # Build tools
└── types/                    # Auto-generated (DON'T EDIT!)

What to Keep vs Replace

✅ KEEP (Infrastructure):

scripts/ folder — All 30+ utility scripts
package.json scripts — Build pipeline
tsconfig.json — TypeScript configuration
.husky/ — Pre-commit hooks
Build system — Type generation, validation

🔄 REPLACE (Content):

adapters/ — Your technology adapters
connectors/ — Your technology bridges
features/ — Your business features
genomes/ — Your project templates
README.md — Your documentation

🛠️ CUSTOMIZE:

package.json — Name, description, repository, author
marketplace.config.ts — Your standards (create this file)

Step-by-Step: Create Your Marketplace

Step 1: Customize Package Metadata

// package.json
{
  "name": "@yourcompany/marketplace",
  "version": "1.0.0",
  "description": "Your marketplace description",
  "repository": {
    "type": "git",
    "url": "https://github.com/yourorg/marketplace.git"
  },
  "author": "Your Team",
  "homepage": "https://your-marketplace-docs.com",
  
  // KEEP all the scripts!
  "scripts": {
    "validate": "tsx scripts/validation/validate-blueprints.ts",
    "generate:manifest": "tsx scripts/generation/generate-marketplace-manifest.ts",
    "types:generate:constitutional": "tsx scripts/generation/generate-constitutional-types-cli.ts",
    // ... 20+ more scripts - keep them all!
  }
}

Step 2: Define Your Standards

Create a configuration file (optional but recommended):

// marketplace.config.ts
export const marketplaceConfig = {
  name: 'my-marketplace',
  version: '1.0.0',
  
  // Your "Golden Core" equivalent
  standards: {
    framework: 'vue',               // Your primary framework
    stateManagement: 'pinia',       // Your state solution
    dataFetching: 'tanstack-query', // Works with any framework!
    forms: 'vee-validate',          // Your form solution
    testing: 'vitest',              // Testing framework
  },
  
  // Module categories
  categories: [
    'framework',
    'database',
    'auth',
    'ui',
    'state',
    'payment',
    'email',
  ],
  
  // Quality requirements
  requirements: {
    typescript: true,
    tests: true,
    documentation: true,
    examples: true,
  }
};

Step 3: Create Your First Adapter

Example: Vue 3 framework adapter

# Create directory
mkdir -p adapters/framework/vue
 
# Create adapter.json

// adapters/framework/vue/adapter.json
{
  "id": "framework/vue",
  "name": "Vue 3",
  "description": "Vue 3 framework with Vite and TypeScript",
  "category": "framework",
  "version": "1.0.0",
  "provides": [
    {
      "name": "vue",
      "version": "3.4.0",
      "description": "Vue 3 framework"
    },
    {
      "name": "vite",
      "version": "5.0.0",
      "description": "Vite build tool"
    }
  ],
  "capabilities": {
    "framework": {
      "version": "1.0.0",
      "provides": ["vue", "vite", "typescript"]
    }
  },
  "parameters": {
    "typescript": {
      "type": "boolean",
      "default": true,
      "description": "Enable TypeScript"
    },
    "router": {
      "type": "boolean",
      "default": true,
      "description": "Include Vue Router"
    }
  }
}

// adapters/framework/vue/blueprint.ts
import { BlueprintAction, BlueprintActionType } from '@thearchitech.xyz/types';
import { TypedMergedConfiguration } from '../../../types/blueprint-config-types.js';
 
export default function generateBlueprint(
  config: TypedMergedConfiguration<'framework/vue'>
): BlueprintAction[] {
  const actions: BlueprintAction[] = [];
  
  // Install Vue + Vite
  actions.push({
    type: BlueprintActionType.INSTALL_PACKAGES,
    packages: ['vue@^3.4.0', 'vite@^5.0.0']
  });
  
  if (config.module.parameters.typescript) {
    actions.push({
      type: BlueprintActionType.INSTALL_PACKAGES,
      packages: ['typescript', '@vitejs/plugin-vue'],
      dev: true
    });
  }
  
  // Create vite.config.ts
  actions.push({
    type: BlueprintActionType.CREATE_FILE,
    path: 'vite.config.ts',
    template: 'templates/vite.config.ts.tpl'
  });
  
  // Create main.ts
  actions.push({
    type: BlueprintActionType.CREATE_FILE,
    path: 'src/main.ts',
    template: 'templates/main.ts.tpl'
  });
  
  return actions;
}

Step 4: Create Your First Connector

Example: Pinia + Vue connector

// connectors/pinia-vue/blueprint.ts
export default function generateBlueprint(config) {
  const actions = [];
  
  // Install Pinia
  actions.push({
    type: BlueprintActionType.INSTALL_PACKAGES,
    packages: ['pinia']
  });
  
  // Create store setup
  actions.push({
    type: BlueprintActionType.CREATE_FILE,
    path: 'src/stores/index.ts',
    template: 'templates/store-setup.ts.tpl'
  });
  
  // Modify main.ts to add Pinia
  actions.push({
    type: BlueprintActionType.ENHANCE_FILE,
    path: 'src/main.ts',
    modifier: 'vue-plugin-injector',
    params: {
      plugin: 'pinia',
      import: { name: 'createPinia', from: 'pinia' }
    }
  });
  
  return actions;
}

Step 5: Define Your Golden Core

Document your architectural standards:

# Your Marketplace Standards
 
## Our Golden Core
 
### State Management: Pinia
Why: Official Vue state solution, simple API, excellent TypeScript support
 
### Data Fetching: TanStack Query
Why: Framework-agnostic, industry standard, works perfectly with Vue
 
### Forms: VeeValidate + Zod
Why: Type-safe validation, Vue-friendly API
 
### Testing: Vitest
Why: Fast, Vite-native, excellent Vue support
 
## Agnostic Edges
 
- UI Libraries: Vuetify, PrimeVue, Element Plus (user choice)
- Databases: Any ORM (Drizzle, Prisma, TypeORM)
- Auth: Any provider (Auth0, Supabase, custom)

Step 6: Build and Validate

# Generate types from your modules
npm run types:generate:constitutional
 
# Generate marketplace manifest
npm run generate:manifest
 
# Validate everything
npm run validate:all
 
# Build the marketplace
npm run build

The scripts automatically:

✅ Generate TypeScript types from your modules
✅ Create marketplace manifest with all modules
✅ Validate all blueprints for syntax
✅ Ensure contracts compliance (if using contracts)
✅ Check template existence

The Auto-Generated Infrastructure

Types (Don't Edit These!)

The types/ folder is automatically generated:

types/
├── adapters/              # Generated from adapter.json files
│   ├── framework/
│   │   └── vue/
│   │       └── index.d.ts
│   └── database/
├── connectors/            # Generated from connector.json files
├── features/              # Generated from feature.json files
├── contracts/             # Generated from contract definitions
├── genome-types.d.ts      # All module IDs for autocomplete
└── blueprint-parameters.d.ts  # Type-safe parameters

How it works:

You create module JSON files (adapter.json, connector.json)
Run npm run types:generate:constitutional
Scripts scan your modules
Generate complete TypeScript definitions
Your genomes get full autocomplete!

Scripts (Keep These!)

Generation scripts:

generate-marketplace-manifest.ts - Creates manifest.json
generate-constitutional-types-cli.ts - Generates types
generate-feature-manifests.ts - Creates feature manifests

Validation scripts:

validate-blueprints.ts - Blueprint syntax validation
validate-templates.ts - Template existence checks
validate-contract-correctness.ts - Contract compliance
validate-comprehensive.ts - All validations

Utility scripts:

blueprint-parser.ts - Parse blueprint files
template-path-resolver.ts - Resolve template paths

Don't modify these unless you know exactly what you're doing. They're complex but battle-tested.

Testing Your Marketplace

Local Testing

# Link your marketplace locally
cd my-marketplace
npm link
 
# Use in a test project
cd ../test-project
npm link @yourcompany/marketplace
 
# Test module installation
architech add adapter vue
architech add connector pinia-vue

Validation

# Run all validations
npm run validate:all
 
# Specific validations
npm run validate:blueprints
npm run validate:templates
npm run validate:contracts
 
# Check for issues
npm run validate:issues

Publishing Your Marketplace

npm Publishing (Recommended)

# Step 1: Update version
npm version 1.0.0
 
# Step 2: Build
npm run prepublishOnly
 
# Step 3: Publish
npm publish --access public

Users install with:

npm install @yourcompany/marketplace

Git-Based Distribution

# Users can install from Git
npm install git+https://github.com/yourorg/marketplace.git
 
# Or specific tag/branch
npm install git+https://github.com/yourorg/marketplace.git#v1.0.0

Private npm Registry

For company-internal marketplaces:

# Publish to private registry
npm publish --registry https://npm.yourcompany.com
 
# Users configure
npm config set @yourcompany:registry https://npm.yourcompany.com

Marketplace Configuration

Create marketplace.config.ts to define your standards:

export default {
  name: 'my-marketplace',
  version: '1.0.0',
  
  // Your architectural standards
  standards: {
    framework: 'vue',
    stateManagement: 'pinia',
    dataFetching: 'tanstack-query',
    forms: 'vee-validate',
    testing: 'vitest',
    linting: 'eslint',
    formatting: 'prettier'
  },
  
  // Module organization
  categories: [
    'framework',
    'database',
    'auth',
    'ui',
    'state',
    'payment',
    'email',
    'deployment'
  ],
  
  // Quality requirements for modules
  moduleRequirements: {
    typescript: true,
    tests: true,
    documentation: true,
    examples: true,
    contractCompliance: true
  },
  
  // Validation rules
  validation: {
    strictContracts: true,
    requireTemplates: true,
    enforceNaming: true
  }
};

This configuration drives:

Type generation
Validation rules
Module organization
Build pipeline

Module Development Workflow

Creating an Adapter

# 1. Create directory
mkdir -p adapters/category/adapter-name
 
# 2. Create adapter.json (metadata)
# 3. Create blueprint.ts (generation logic)
# 4. Create templates/ (optional)
# 5. Test locally
# 6. Run validation
npm run validate

Creating a Connector

# 1. Create directory
mkdir -p connectors/connector-name
 
# 2. Create connector.json (declares requirements)
# 3. Create blueprint.ts (integration logic)
# 4. Create templates/
# 5. Follow your Golden Core patterns
# 6. Test and validate

Creating a Feature

# 1. Create contract (interface definition)
features/feature-name/contract.ts
 
# 2. Create tech-stack (headless logic)
features/feature-name/tech-stack/
 
# 3. Create backend implementation
features/feature-name/backend/provider-framework/
 
# 4. Create frontend implementation
features/feature-name/frontend/ui-library/
 
# 5. Validate contract compliance
npm run validate:contracts

Real-World Examples

Example 1: Vue.js Ecosystem Marketplace

Structure:

@vue-marketplace/core/
├── adapters/
│   ├── framework/vue
│   ├── framework/nuxt
│   ├── state/pinia
│   ├── router/vue-router
│   └── ui/vuetify
├── connectors/
│   ├── pinia-vue
│   ├── tanstack-query-vue
│   └── vee-validate-vuetify
└── features/
    ├── auth-vue
    ├── payments-vue
    └── i18n-vue

Golden Core:

State: Pinia
Data: TanStack Query
Forms: VeeValidate + Zod
Routing: Vue Router

Example 2: Enterprise Angular Marketplace

Structure:

@acme/enterprise-marketplace/
├── adapters/
│   ├── framework/angular
│   ├── state/ngrx
│   ├── auth/company-sso
│   └── monitoring/datadog
├── connectors/
│   ├── ngrx-angular
│   ├── company-sso-angular
│   └── datadog-angular
└── genomes/
    ├── microservice-api.genome.ts
    ├── admin-portal.genome.ts
    └── mobile-app.genome.ts

Golden Core:

State: NgRx
Data: HttpClient + RxJS
Forms: Angular Reactive Forms
Auth: Company SSO

Example 3: Blockchain Domain Marketplace

Structure:

@web3/marketplace/
├── adapters/
│   ├── blockchain/ethers
│   ├── blockchain/wagmi
│   ├── wallet/rainbowkit
│   └── wallet/web3modal
├── connectors/
│   ├── wagmi-rainbowkit
│   ├── ethers-nextjs
│   └── web3-auth
└── features/
    ├── wallet-connect
    ├── nft-gallery
    └── token-swap

Golden Core:

Wallet: RainbowKit
Blockchain: wagmi + viem
State: Zustand
Data: TanStack Query

Understanding the Scripts

Generation Scripts

These auto-generate infrastructure:

# Generate TypeScript types from modules
npm run types:generate:constitutional
 
# Generate marketplace manifest (for landing pages)
npm run generate:manifest
 
# Generate feature manifests (for feature resolution)
npm run generate:feature-manifests

Validation Scripts

These ensure quality:

# Validate all blueprints
npm run validate
 
# Validate templates exist
npm run validate:templates
 
# Validate contracts (if using feature contracts)
npm run validate:contracts
 
# Comprehensive validation (runs all)
npm run validate:all

Build Pipeline

# Clean, validate, generate, compile
npm run build
 
# Pre-publish checks
npm run prepublishOnly

Module Organization Best Practices

Naming Conventions

Adapters:

adapters/category/technology-name/
Example: adapters/database/drizzle/

Connectors:

connectors/tech1-tech2/
Example: connectors/drizzle-nextjs/

Features:

features/feature-name/implementation-type/provider-framework/
Example: features/auth/frontend/shadcn/

File Organization

Each module must have:

✅ Metadata JSON (adapter.json, connector.json, or feature.json)
✅ Blueprint (blueprint.ts)
✅ README.md (documentation)

Optional:

Templates folder (for code generation)
Tests folder (unit/integration tests)
Examples folder (usage examples)

Quality Standards

For All Modules

✅ TypeScript: All code must be TypeScript
✅ Documentation: README with examples
✅ Tested: Unit tests for blueprints
✅ Validated: Pass all validation scripts

For Features

✅ Contract: Define clear interface
✅ Headless logic: Separate business logic from UI
✅ Multiple implementations: Support different tech stacks
✅ Golden Core: Follow your marketplace's standards

Maintenance

Version Management

Follow semantic versioning:

1.0.0 → Initial release
1.1.0 → New module added
1.0.1 → Bug fix in existing module
2.0.0 → Breaking change (API change, dropped module)

Changelog

Maintain CHANGELOG.md:

# Changelog
 
## [1.1.0] - 2025-10-20
 
### Added
- New adapter: `ui/vuetify`
- New connector: `vuetify-vue`
 
### Fixed
- Template path resolution in pinia-vue connector
 
### Changed
- Updated Vue to 3.4.0

CI/CD Pipeline

# .github/workflows/validate.yml
name: Validate Marketplace
 
on: [push, pull_request]
 
jobs:
  validate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm install
      - run: npm run validate:all
      - run: npm run build

Success Criteria

A successful marketplace:

For Users

✅ Easy to start — Clear docs and templates
✅ Productive — Reduces boilerplate
✅ Reliable — High-quality, well-tested modules
✅ Flexible — Enough options without overwhelming

For Maintainers

✅ Organized — Clear structure and conventions
✅ Automated — Scripts handle types, validation
✅ Documented — Comprehensive guides
✅ Sustainable — Manageable maintenance burden

Getting Help

Building a marketplace? We're here to help:

Discord: #marketplace-creators channel (opens in a new tab)
Discussions: GitHub Discussions (opens in a new tab)
Official Marketplace: Study our implementation
Contributing: See Contributing Guide →

Future: CLI Scaffold Command

We're developing:

# Coming soon!
architech create marketplace my-marketplace
 
# Templates:
# - minimal: Basic structure + essential scripts
# - full: Everything from official marketplace
# - ecosystem: For framework communities (Vue, Angular)
# - company: For internal enterprise use

This will:

✅ Create complete directory structure
✅ Copy all necessary scripts
✅ Set up type generation
✅ Configure build pipeline
✅ Create example modules

Until then, fork the official marketplace — the infrastructure is production-ready!

Next Steps

Custom Modifiers → - Extend CLI functionality
CLI Configuration → - Advanced config
Contributing → - Add to official marketplace
CLI Internals → - Understand the engine

The official marketplace is your template. Copy the infrastructure, replace the modules, define your standards. Build the marketplace that fits your world.

Marketplace Adapter Interface AI Blueprint Guide