Experieco Demos — Architect What Comes Next

React · Claude API

Pre-Discovery Workshop App

AI-powered tool for Experieco consultants to run structured pre-discovery sessions. Replaces whiteboards and sticky notes with an intelligent, AI-facilitated discovery conversation.

AI-facilitated discovery with smart follow-up questions
Opportunity scoring across 5 dimensions
Auto service tier recommendation (Ignite, Propel, Accelerator, Advisory)
One-click branded PDF report & Word proposal

React 18ViteTailwind CSSClaude APIReact PDF

Full-Stack · TypeScript

Order Management System

Full-stack web application replacing a 25-year-old legacy system for an agricultural products distributor serving Pacific Island nations from Auckland, New Zealand.

Complete order lifecycle — Draft to Completed (9 stages)
Role-based access for 5 roles with granular permissions
7 PDF document types from customisable HTML templates
Container tracking with volume & weight capacity gauges
Customer portal for external distributors
Legacy data import — 262 customers, 5,371 products, 231 suppliers

React 18TypeScriptNode.jsExpressPostgreSQLDockerPuppeteer

n8n · API Integration

N8N Workflow Builder — ProjectWorks

Suite of n8n workflows automating ProjectWorks project setup — from reading breakdown data to creating modules, tasks, and placeholder resource allocations end-to-end.

Resourcing setup automation via webhook trigger
8 sub-workflows wrapping all 125 ProjectWorks API endpoints
Consistent calling convention across all operations
Data tables for project breakdown and role mapping

n8nProjectWorks APIRESTWebhooksClaude MCP

Next.js · Claude AI

UIGen — AI Component Generator

AI-powered React component generator with live preview. Describe what you want in natural language and get working React components in real time.

Natural language to React component generation
Live preview with hot reload
Virtual file system — no files written to disk
Syntax highlighting and code editor
Component persistence for registered users
Export generated code

Next.js 15React 19TypeScriptTailwind CSS v4PrismaSQLiteClaude AI

TypeScript

BOM Calculator App

Bill of Materials calculator application built with TypeScript for managing and calculating component costs, quantities, and material requirements.

Bill of Materials management
Cost and quantity calculations
TypeScript-based architecture

TypeScript

Setup	Client details, industry, service domain, stakeholders
Problem Definition	AI-led interview capturing pain points, goals, metrics
Current State	Maps systems, integrations, workflows, risks
Scoring	AI scores opportunity, recommends service tier
Scope & Alignment	Prioritised scope items, investment range, next steps
Outputs	Generate branded PDF report and Word proposal

Frontend	React 18, TypeScript, Vite, Tailwind CSS, Zustand, React Query
Backend	Node.js, Express, TypeScript, Zod
Database	PostgreSQL 16
PDF Generation	Puppeteer + Handlebars templates
Deployment	Docker Compose (Nginx, Node, PostgreSQL, pgAdmin)

Projects	list, get, create, update, delete, getTypes, getStatuses, getUsers
Clients	list, get, create, update, delete, getTypes, getRateCards, getBillingContacts
Tasks	list, get, create, update, delete, getTypes, assignUser, assignPlaceholder
Modules	list, get, create, update, delete, getBudgetTypes, getFeeTypes
Users	list, get, create, update, delete, getRoles, getTimesheets, getPostings
Timesheets	list, create, update, delete, submit, unsubmit
Common Lookups	currencies, countries, offices, locations, rateCards, teams, ranks
Leaves/Expenses	listLeaves, createLeave, listExpenses, createExpense, listInvoices, getForecasts

Architect What Comes Next

Projects

Pre-Discovery Workshop App

Session Flow

Order Management System

Architecture

Order Lifecycle

N8N Workflow Builder — ProjectWorks

Sub-Workflow Library

UIGen — AI Component Generator

BOM Calculator App