Template Examples

Templates are complete, deployable applications that combine Next.js pages, serverless scripts, and API resources into a single package. These examples demonstrate how to build templates for different use cases, from simple dashboards to complex multi-component applications.

Each example shows the complete template structure, customization options, and deployment workflow.

Examples

Building a cryptocurrency portfolio dashboard

This example demonstrates a complete dashboard template that tracks cryptocurrency portfolios in real-time. The template includes a Next.js frontend, serverless scripts for data processing, and integrations with cryptocurrency price APIs.

Creating the template

Create the template using the POST /api/sdk/v1/templates endpoint:

curl -X POST https://api.fxn.world/api/sdk/v1/templates \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "repository": "mirra-templates",
    "templatePath": "crypto-portfolio",
    "gitHash": "main",
    "name": "Crypto Portfolio Tracker",
    "description": "Real-time cryptocurrency portfolio tracking dashboard",
    "version": "1.0.0",
    "category": "crypto"
  }'

Template structure

The template manifest defines all included components:

{
  "includes": {
    "page": {
      "type": "nextjs",
      "entryPoint": "page.tsx"
    },
    "scripts": [
      {
        "name": "fetchPrices",
        "description": "Fetches cryptocurrency prices",
        "runtime": "nodejs18",
        "schedule": "*/5 * * * *"
      },
      {
        "name": "calculatePortfolio",
        "description": "Calculates portfolio value",
        "runtime": "nodejs18"
      }
    ],
    "resources": [
      {
        "id": "crypto-price-api",
        "required": true
      }
    ]
  }
}

Customization configuration

Define customizable fields that users can configure during installation:

{
  "customization": {
    "fields": [
      {
        "key": "branding.primaryColor",
        "label": "Primary Color",
        "type": "color",
        "default": "#3B82F6",
        "description": "Main brand color for the dashboard"
      },
      {
        "key": "api.refreshInterval",
        "label": "Refresh Interval (seconds)",
        "type": "number",
        "default": 60,
        "min": 30,
        "max": 300,
        "description": "How often to refresh price data"
      },
      {
        "key": "features.showCharts",
        "label": "Show Price Charts",
        "type": "boolean",
        "default": true,
        "description": "Display historical price charts"
      }
    ]
  }
}

Building the template

Build the template to prepare it for deployment:

curl -X POST https://api.fxn.world/api/sdk/v1/templates/TEMPLATE_ID/build \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "version": "1.0.0"
  }'

The build process compiles the Next.js application, validates all scripts, and verifies resource dependencies.

Publishing to marketplace

Make the template available to other users:

curl -X POST https://api.fxn.world/api/sdk/v1/templates/TEMPLATE_ID/publish \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "pricing": {
      "setupFee": 5.0,
      "monthlyFee": 2.0,
      "estimatedUsageCost": {
        "perUse": 0.001,
        "perMonth": 5.0
      }
    }
  }'

Result

The template appears in the marketplace with pricing information. Users can preview the template, check requirements, and install it with their custom configuration. You earn revenue from setup fees, monthly fees, and usage-based charges.

Creating an analytics dashboard

This example shows a simpler analytics dashboard template that demonstrates the minimum viable template structure. The template includes basic data visualization and metric tracking capabilities.

Template definition

curl -X POST https://api.fxn.world/api/sdk/v1/templates \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Analytics Dashboard",
    "description": "Track metrics and visualize data",
    "repository": "mirra-templates",
    "templatePath": "analytics",
    "version": "1.0.0",
    "category": "analytics",
    "includes": {
      "page": {
        "type": "nextjs",
        "entryPoint": "page.tsx"
      },
      "scripts": [
        {
          "name": "aggregateMetrics",
          "description": "Aggregates analytics data"
        }
      ]
    }
  }'

Result

The template provides a clean starting point for analytics applications. Users can extend it with additional metrics, custom visualizations, and data sources.

Installing and Using Templates

Checking template requirements

Before installation, verify that all required resources are available:

curl -X POST https://api.fxn.world/api/sdk/v1/templates/TEMPLATE_ID/check-requirements \
  -H "Authorization: Bearer YOUR_API_KEY"

The response indicates which resources need to be installed and whether the user has sufficient permissions and credits.

Installing a template

Install a template with custom configuration:

curl -X POST https://api.fxn.world/api/sdk/v1/templates/TEMPLATE_ID/install \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "customization": {
      "branding.primaryColor": "#10B981",
      "api.refreshInterval": 30,
      "features.showCharts": true
    }
  }'

Installation creates a new instance of the template with the specified configuration. The platform deploys the Next.js page, provisions all scripts, and configures resource connections automatically.

Template repository structure

A complete template repository includes:

crypto-portfolio/
├── page.tsx              # Next.js page component
├── template.json         # Template manifest
├── customization.json    # Customization schema
├── scripts/
│   ├── fetchPrices.js
│   └── calculatePortfolio.js
├── README.md
└── package.json

View a complete example: Example Template on GitHub

Managing Template Versions

Creating a new version

Release updates to your template:

curl -X POST https://api.fxn.world/api/sdk/v1/templates/TEMPLATE_ID/versions \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "version": "1.1.0",
    "gitHash": "v1.1.0",
    "changelog": "Added dark mode support and improved chart performance"
  }'

Users with existing installations can upgrade to the new version. The platform handles migration of customization settings and data.

Version compatibility

Maintain backward compatibility when updating templates:

Patch versions (1.0.1): Bug fixes only, no breaking changes
Minor versions (1.1.0): New features, backward compatible
Major versions (2.0.0): Breaking changes, may require user action

Document breaking changes clearly in the changelog to help users upgrade smoothly.

Best Practices

Template design principles

Build templates that are easy to install and customize:

✅ Do:

Focus on a single, well-defined use case
Provide sensible defaults for all customization fields
Make customization optional—templates should work out of the box
Include comprehensive README with screenshots
Test all dependencies and resource integrations
Document environment variables and configuration
Provide example data or seed scripts

❌ Avoid:

Overly complex templates with too many features
Too many required resources (increases installation friction)
Hard-coded values that should be customizable
Poor error handling in scripts
Missing or incomplete documentation
Untested customization options

Pricing strategies

Choose a pricing model that reflects your template's value:

Setup Fee: One-time cost for installation and initial configuration ($5-50)
Monthly Fee: Recurring fee for hosting and maintenance ($2-20)
Usage Cost: Based on script executions and API calls ($0.001-0.01 per use)

Consider your costs when setting prices. Include infrastructure, resource fees, and support overhead. Offer a free tier or trial period to encourage adoption.

Customization best practices

Design flexible customization options:

{
  "customization": {
    "fields": [
      {
        "key": "branding.primaryColor",
        "type": "color",
        "default": "#3B82F6",
        "validation": {
          "pattern": "^#[0-9A-Fa-f]{6}$"
        }
      },
      {
        "key": "api.refreshInterval",
        "type": "number",
        "default": 60,
        "min": 30,
        "max": 300,
        "step": 10
      },
      {
        "key": "features.enableNotifications",
        "type": "boolean",
        "default": false
      }
    ]
  }
}

Group related settings, provide validation rules, and include helpful descriptions.

Testing checklist

Before publishing your template:

Build locally: Test the build process with npm run build
Test all scripts: Execute each script with sample data
Verify resource access: Ensure all API integrations work
Check customization: Test all customization options
Test installation: Install the template in a clean environment
Validate dependencies: Confirm all required resources are available
Review documentation: Ensure README is complete and accurate
Test upgrades: Verify version migration works correctly

Error handling in templates

Implement robust error handling in template scripts:

export async function handler(event) {
  try {
    // Validate configuration
    if (!event.config?.apiKey) {
      return { 
        error: 'Missing API key in configuration',
        code: 'CONFIG_ERROR'
      };
    }
    
    // Execute logic
    const result = await fetchData(event.config.apiKey);
    return { success: true, data: result };
    
  } catch (error) {
    console.error('Script execution failed:', error);
    return { 
      success: false, 
      error: error.message,
      code: 'EXECUTION_ERROR'
    };
  }
}

Return structured error responses with error codes to help users diagnose issues.

Template Examples

Examples

Building a cryptocurrency portfolio dashboard

Creating the template

Template structure

Customization configuration

Building the template

Publishing to marketplace

Result

Creating an analytics dashboard

Template definition

Result

Installing and Using Templates

Checking template requirements

Installing a template

Template repository structure

Managing Template Versions

Creating a new version

Version compatibility

Best Practices

Template design principles

Pricing strategies

Customization best practices

Testing checklist

Error handling in templates

See also

On this page