Constructs

Everything you need to know about building production-ready Constructs.

What is a Construct?

A Construct is a self-contained React micro-app that runs on the Work platform. Think of it like a song on Spotify - users stream Constructs to solve business problems, and Runners earn from every stream.

Constructs ARE

• Vite + React projects
• Offline-first with IndexedDB
• Styled with Tailwind CSS
• Built with shadcn/ui components
• Deployable as standalone PWAs
• Accessible and responsive

Constructs are NOT

• Connected to external APIs
• Using custom CSS or styled-components
• Dependent on external npm packages
• Complex backend-dependent apps
• Multi-page routed applications

Architecture

Constructs are built with the SDK and follow a consistent architecture:

my-construct/
├── construct.json          # Metadata, tags, PWA config
├── package.json            # Dependencies (pre-configured)
├── vite.config.ts          # Build configuration
├── tailwind.config.js      # Styling configuration
└── src/
    ├── App.tsx             # Your main component
    ├── main.tsx            # Entry point
    ├── index.css           # Global styles
    └── components/ui/      # shadcn/ui components (pre-installed)

Core Requirements

Requirement	Details	Why
SDK Project	Initialize with construct-sdk	Consistent structure
shadcn/ui Only	Use pre-installed components	Consistent UX
Tailwind CSS	Utility classes only	No CSS conflicts
useConstructData	IndexedDB persistence	Offline-first, cloud sync
Lucide Icons	lucide-react only	Bundle size
No API Calls	No fetch, axios, etc.	Security sandbox
Accessible	WCAG AA compliance	Inclusive design
Responsive	Mobile-first design	Cross-device support

Development Workflow

# 1. Create a new construct
npx @useworkapp/construct-sdk init "My App"
cd my-app && npm install

# 2. Start local development
npm run dev

# 3. Build your app in src/App.tsx

# 4. Validate before publishing
npx @useworkapp/construct-sdk validate

# 5. Publish, submit, and deploy
npx @useworkapp/construct-sdk login
npx @useworkapp/construct-sdk publish
npx @useworkapp/construct-sdk submit <id>
npx @useworkapp/construct-sdk deploy <id>