<!--{"section": "tjs", "type": "example", "group": "fullstack", "order": 13, "parent": "tjs-fullstack.md"}-->

# Full-Stack Demo: Client App

Frontend that calls the User Service - run after saving user-service!

> **Needs a second module.** This example imports the `user-service` module from the "User Service" example, which a single example on this
> page cannot load. Run it in the [playground](https://tjs-platform.web.app) after saving that
> module, or locally with `tjs run` beside it.

```tjs:static
/#
## Client Application

A frontend that calls the User Service.

**First:** Run the "User Service" example and save it as "user-service"
**Then:** Run this client to see full-stack in action

This demonstrates:
- Importing local TJS modules
- Type-safe service calls
- Error handling
#/

// Import from local module (saved in playground)
import { createUser, getUser, listUsers, searchUsers } from 'user-service'

// Helper to display results
function display(label: '', data: {}) {
  console.log(`\\n\${label}:`)
  console.log(JSON.stringify(data, null, 2))
}

// Main app
async function main() {
  console.log('=== Client App ===')
  console.log('Connecting to user-service...\\n')

  // Create some users
  const user1 = createUser({ name: 'Dave', email: 'dave@startup.io' })
  display('Created user', user1)

  const user2 = createUser({ name: 'Eve', email: 'eve@startup.io' })
  display('Created user', user2)

  // Fetch a user
  const fetched = getUser({ id: user1.id })
  display('Fetched user', fetched)

  // List all
  const all = listUsers({ limit: 100, offset: 0 })
  display('All users', all)

  // Search
  const results = searchUsers({ query: 'eve' })
  display('Search results for "eve"', results)

  // Type error handling
  console.log('\\n--- Type Validation Demo ---')
  const badResult = createUser({ name: 999 })
  if (badResult instanceof Error) {
    console.log('Caught type error:', badResult.message)
  }

  console.log('\\n=== Full-Stack Demo Complete ===')
  console.log('Everything ran in the browser. No server. No build step.')
}

main()
```