Skip to main content

Examples & Scenarios

Welcome to the Vertical Template examples library. This section provides practical, real-world code examples and complete scenarios to help you build applications faster.

What You'll Find Here​

Code Snippets​

Ready-to-use TypeScript code examples covering all aspects of VT development. Copy, paste, and adapt these snippets to your needs.

View Code Snippets →

Industry Scenarios​

Complete vertical application examples for specific industries. Each scenario includes data models, configurations, components, and AI integration patterns.

View Industry Scenarios →

Tutorials​

Step-by-step guided walkthroughs for building features from scratch.

View Tutorials →

Quick Reference by Category​

Configuration Examples​

ExampleDescriptionComplexity
Minimal ConfigBare-bones tenant configurationBeginner
Full-Featured ConfigComplete config with all featuresIntermediate
Multi-Tenant SetupMultiple tenants with shared configAdvanced
Theme CustomizationCustom branding and stylingBeginner
Store PersistenceConfigure store slices with persistenceIntermediate
Conditional VisibilityShow/hide components based on stateIntermediate

Component Examples​

ExampleDescriptionComplexity
Custom Dashboard WidgetBuild a metrics dashboardIntermediate
Form with ValidationComplete form with field validationIntermediate
Data Table with FiltersSearchable, filterable tableIntermediate
File Upload ComponentMulti-file upload with progressAdvanced
Chat InterfaceAI chat with SSE streamingAdvanced
Conditional RenderingComponent visibility based on auth/stateBeginner

API Integration Examples​

ExampleDescriptionComplexity
Fetch ResourcesBasic CRUD with useResourcesBeginner
BFF Proxy PatternSecure API calls via BFFIntermediate
SSE StreamingReal-time chat streamingAdvanced
Document UploadUpload with progress trackingIntermediate
Batch OperationsBulk create/update resourcesAdvanced
Error HandlingRobust error handling patternsIntermediate

State Management Examples​

ExampleDescriptionComplexity
useStoreValue BasicsRead store valuesBeginner
useSetStore PatternsUpdate store stateBeginner
Computed SelectorsDerive state from storeIntermediate
Store SlicesOrganize state by featureIntermediate
PersistencePersist store to localStorageIntermediate
Reset StateClear store on logoutBeginner

AI Integration Examples​

ExampleDescriptionComplexity
Chat ComponentAI chat interfaceIntermediate
Document Q&ARAG-based document queriesAdvanced
ClassificationAuto-classify records with AIAdvanced
Prompt TemplatesReusable prompt patternsIntermediate
Streaming ResponsesHandle SSE streamsAdvanced
AI-Assisted FormsAuto-fill forms with AIAdvanced

Deployment Examples​

ExampleDescriptionComplexity
Azure DeploymentDeploy to Azure with GitHub ActionsAdvanced
Environment ConfigManage dev/staging/prod configsIntermediate
CI/CD PipelineAutomated testing and deploymentAdvanced
Docker SetupContainerize VT applicationAdvanced
MonitoringAdd logging and monitoringAdvanced

Understanding the Examples​

Complexity Levels​

  • Beginner: Basic concepts, minimal setup, single file
  • Intermediate: Multiple concepts, moderate setup, 2-3 files
  • Advanced: Complex patterns, full integration, multiple files and concepts

Code Conventions​

All examples follow these conventions:

  • TypeScript: All code is TypeScript with proper typing
  • Platform SDK: Uses official @eai/platform-sdk patterns
  • VT Hooks: Leverages VT React hooks (useResources, useStoreValue, etc.)
  • Error Handling: Includes proper error and loading states
  • Comments: Annotated to explain key concepts
  • Copy-Paste Ready: Minimal modifications needed to use

Example Structure​

Each code example includes:

  1. Description: What the code does and when to use it
  2. Prerequisites: Required setup or dependencies
  3. Code: Fully working TypeScript code
  4. Explanation: Key concepts and patterns used
  5. Customization: How to adapt it to your needs
  6. Related: Links to related examples or docs

Recipes Concept​

Recipes are small, focused examples that solve a specific problem. They're designed to be:

  • Focused: One concept or feature per recipe
  • Practical: Solves a real development task
  • Minimal: No unnecessary code
  • Adaptable: Easy to customize

Recipe Categories​

  1. Quick Wins: Simple patterns that save time
  2. Common Tasks: Frequently needed functionality
  3. Best Practices: Recommended approaches
  4. Troubleshooting: Solutions to common problems
  5. Performance: Optimization techniques
  6. Security: Auth and validation patterns

Industry Scenarios​

Complete examples of vertical applications for specific industries:

Available Scenarios​

  1. Immigration Case Management

    • Client intake and case tracking
    • Document collection workflows
    • Status updates and notifications
    • Attorney assignment and management

  2. Property Management Portal

    • Property and unit listings
    • Tenant management
    • Maintenance request tracking
    • Lease and document management

  3. Healthcare Patient Portal

    • Patient records and profiles
    • Appointment scheduling
    • Document upload and management
    • Provider communication

  4. Education Course Platform

    • Course catalog and enrollment
    • Student progress tracking
    • Assignment submission
    • Grade management

  5. Government Permits System

    • Permit application workflows
    • Review and approval process
    • Public status lookup
    • Document requirements

Each scenario includes:

  • Complete data model (Object Types)
  • Tenant configuration
  • Custom components
  • AI integration examples
  • Deployment guidance

Explore Industry Scenarios →

How to Use These Examples​

Use the category tables above to find examples by feature or complexity level.

2. Copy and Adapt​

All examples are production-ready. Copy the code and customize:

  • Replace placeholder names with your domain terms
  • Adjust TypeScript types to match your data
  • Modify styling to match your theme
  • Add business logic specific to your needs

3. Combine Patterns​

Mix and match examples to build complete features:

// Combine: Resource fetching + Custom component + Store
import { useResources } from '@eai/platform-sdk/react';
import { useStoreValue } from '@/lib/store';
import { CustomDashboard } from '@/components/CustomDashboard';

export const DashboardPage = () => {
  const { resources } = useResources({ objectType: 'case' });
  const filters = useStoreValue('dashboard.filters');

  return <CustomDashboard resources={resources} filters={filters} />;
};

4. Learn by Building​

Follow the tutorials for step-by-step guidance on building complete features.

Contributing Examples​

Have a useful pattern or example to share? Contributions are welcome!

What Makes a Good Example​

  • Solves a real problem developers face
  • Follows VT and platform best practices
  • Includes clear comments and explanation
  • Is type-safe with no any types
  • Handles errors and edge cases

Submission Guidelines​

  1. Use the example template format
  2. Test the code thoroughly
  3. Include TypeScript types
  4. Add comments for complex logic
  5. Link to related documentation

Getting Help​

Not Finding What You Need?​

Example Request​

Missing an example? Request it:

  1. Describe the use case
  2. Explain what you've tried
  3. Share relevant code or config
  4. Specify complexity level

Documentation​

Tutorials​

Tools​

Next Steps​

  1. Start Simple: Try the Code Snippets for quick wins
  2. Go Deeper: Explore Industry Scenarios for complete examples
  3. Learn by Doing: Follow a Tutorial step-by-step
  4. Get AI Help: Use AI Workflow Patterns to accelerate development

Happy coding with Vertical Template!