Click Below to Get the Code

Browse, clone, and build from real-world templates powered by Harper.
Tutorial
GitHub Logo

Building a Product Catalog and Shopping Cart with Harper's GraphQL API

Simplify e-commerce development with Harper’s unified architecture. Database, cache, and real-time updates all run in one high-performance system.
Tutorial

Building a Product Catalog and Shopping Cart with Harper's GraphQL API

Nenne Nwodo
Developer Relations
at Harper
August 14, 2025
Nenne Nwodo
Developer Relations
at Harper
August 14, 2025
Nenne Nwodo
Developer Relations
at Harper
August 14, 2025
August 14, 2025
Simplify e-commerce development with Harper’s unified architecture. Database, cache, and real-time updates all run in one high-performance system.
Nenne Nwodo
Developer Relations

Building e-commerce features with traditional stacks means dealing with complexity that grows with every new requirement. You start with a product database and API server. Then you need Redis for caching product data. Real-time inventory updates require a message broker. Shopping cart persistence needs session management. Each component solves a specific problem, but now you're managing data consistency across multiple systems, debugging connection timeouts between services, and writing integration code that's often more complex than your actual business logic.

The architecture works, obviously. Companies have built massive platforms this way. But the operational overhead is enormous. Every new feature requires coordinating updates across multiple services. A simple "add to cart" action might update two databases, invalidate three cache keys, and publish an inventory event. When something breaks during peak shopping hours, you're troubleshooting whether it's a database deadlock, a cache miss, or a message queue backup.

Harper changes the game completely. Instead of orchestrating multiple separate services, everything runs in one process. Database, cache, messaging, application logic, all fused together. This approach eliminates the network overhead and coordination complexity that makes traditional e-commerce architectures so brittle.

The Real Cost of Distributed E-commerce Architecture

The hidden expense isn't just in infrastructure costs or development time. It's in the cognitive load of maintaining consistency across systems that were never designed to work together. Your inventory service needs to know about your cart service. Your product catalog needs to coordinate with your pricing engine. Your real-time stock updates need to stay synchronized with your database writes.

Engineers spend more time writing glue code between services than building actual shopping features. A notification that an item is back in stock involves updating inventory in the database, clearing cached product data, publishing events to subscribers, and hoping all these operations complete successfully. When they don't, debugging becomes an exercise in distributed systems archaeology.

Setting Up Your Product Schema

Harper uses GraphQL syntax to define your data model, but here's the cool part, it automatically generates REST endpoints from your schema. No more writing boilerplate API routes.

type Product @table @export {
  id: ID @primaryKey
  name: String @indexed
  description: String
  price: Float @indexed
  categoryId: ID @indexed
  inStock: Boolean @indexed
  stockQuantity: Int
  imageUrl: String
  createdAt: String
  category: Category @relationship(from: categoryId)
}

type Category @table @export {
  id: ID @primaryKey
  name: String @indexed
  description: String
  products: [Product] @relationship(to: categoryId)
}

type CartItem @table @export {
  id: ID @primaryKey
  productId: ID @indexed
  sessionId: String @indexed
  quantity: Int
  addedAt: String
  product: Product @relationship(from: productId)
}

The @export directive is doing the heavy lifting here. As soon as you define this schema, Harper creates REST endpoints at /Product/, /Category/, and /CartItem/. The @relationship directive sets up joins that actually work fast because everything is in the same process.

Writing API controllers for basic CRUD operations becomes unnecessary. The schema definition handles all the boilerplate.

Building Product Browsing That Actually Works

Here's how clean the product browsing becomes:

GET /Product/?categoryId=electronics&inStock=true&limit=20
GET /Product/?price=lt=100&inStock=true&sort=name
GET /Category/electronics-123

What's happening under the hood is beautiful. These requests don't just query a database. Harper is simultaneously leveraging cached data, handling relationships, and keeping everything consistent. In a traditional setup, you'd need custom code to coordinate caching strategies and join queries. Harper handles it automatically.

Shopping Cart Operations

Adding items to a cart used to mean complex session management, database transactions, and crossing your fingers that inventory stayed accurate. Harper makes it straightforward:

POST /CartItem/
Content-Type: application/json

{
  "productId": "product123",
  "sessionId": "session456", 
  "quantity": 2,
  "addedAt": "2024-08-05T10:30:00Z"
}

GET /CartItem/?sessionId=session456
DELETE /CartItem/cartitem_id_here

These might look like simple REST calls, but remember that everything is happening in the same process. No network latency between cart operations and inventory checks. Harper's query engine can validate stock levels and update cart totals in ways that separate services never could.

Real-Time Inventory Updates

Harper has WebSockets built right into the database. Subscribe to inventory changes without a separate message broker:

ws://localhost:9926/Product/product123

Subscribe to Product/${productId} and you get notified whenever stock levels change. No separate message broker to maintain, no complex routing logic.

Why This Architecture Matters

Harper's single-process architecture addresses the core challenges of e-commerce development: performance, complexity, and operational overhead. Instead of managing multiple services that need to stay synchronized, you get sub-millisecond response times from a single system that handles data, caching, and real-time updates together.

The development experience reflects this simplicity. Schema definitions automatically generate both REST and GraphQL endpoints. Real-time features work without separate message brokers. Caching happens transparently at the storage level. You spend time building shopping features instead of debugging distributed system edge cases.

For e-commerce applications where customer experience depends on fast product searches and responsive cart interactions, Harper's performance characteristics translate directly into better conversion rates. Product pages load instantly. Cart updates feel immediate. Inventory changes reflect in real-time.

The architecture scales naturally through Harper's distributed deployment, allowing global product catalogs while maintaining the performance benefits of the unified system. E-commerce platforms can serve customers worldwide without the complexity typically associated with distributed architectures.

Building e-commerce features with traditional stacks means dealing with complexity that grows with every new requirement. You start with a product database and API server. Then you need Redis for caching product data. Real-time inventory updates require a message broker. Shopping cart persistence needs session management. Each component solves a specific problem, but now you're managing data consistency across multiple systems, debugging connection timeouts between services, and writing integration code that's often more complex than your actual business logic.

The architecture works, obviously. Companies have built massive platforms this way. But the operational overhead is enormous. Every new feature requires coordinating updates across multiple services. A simple "add to cart" action might update two databases, invalidate three cache keys, and publish an inventory event. When something breaks during peak shopping hours, you're troubleshooting whether it's a database deadlock, a cache miss, or a message queue backup.

Harper changes the game completely. Instead of orchestrating multiple separate services, everything runs in one process. Database, cache, messaging, application logic, all fused together. This approach eliminates the network overhead and coordination complexity that makes traditional e-commerce architectures so brittle.

The Real Cost of Distributed E-commerce Architecture

The hidden expense isn't just in infrastructure costs or development time. It's in the cognitive load of maintaining consistency across systems that were never designed to work together. Your inventory service needs to know about your cart service. Your product catalog needs to coordinate with your pricing engine. Your real-time stock updates need to stay synchronized with your database writes.

Engineers spend more time writing glue code between services than building actual shopping features. A notification that an item is back in stock involves updating inventory in the database, clearing cached product data, publishing events to subscribers, and hoping all these operations complete successfully. When they don't, debugging becomes an exercise in distributed systems archaeology.

Setting Up Your Product Schema

Harper uses GraphQL syntax to define your data model, but here's the cool part, it automatically generates REST endpoints from your schema. No more writing boilerplate API routes.

type Product @table @export {
  id: ID @primaryKey
  name: String @indexed
  description: String
  price: Float @indexed
  categoryId: ID @indexed
  inStock: Boolean @indexed
  stockQuantity: Int
  imageUrl: String
  createdAt: String
  category: Category @relationship(from: categoryId)
}

type Category @table @export {
  id: ID @primaryKey
  name: String @indexed
  description: String
  products: [Product] @relationship(to: categoryId)
}

type CartItem @table @export {
  id: ID @primaryKey
  productId: ID @indexed
  sessionId: String @indexed
  quantity: Int
  addedAt: String
  product: Product @relationship(from: productId)
}

The @export directive is doing the heavy lifting here. As soon as you define this schema, Harper creates REST endpoints at /Product/, /Category/, and /CartItem/. The @relationship directive sets up joins that actually work fast because everything is in the same process.

Writing API controllers for basic CRUD operations becomes unnecessary. The schema definition handles all the boilerplate.

Building Product Browsing That Actually Works

Here's how clean the product browsing becomes:

GET /Product/?categoryId=electronics&inStock=true&limit=20
GET /Product/?price=lt=100&inStock=true&sort=name
GET /Category/electronics-123

What's happening under the hood is beautiful. These requests don't just query a database. Harper is simultaneously leveraging cached data, handling relationships, and keeping everything consistent. In a traditional setup, you'd need custom code to coordinate caching strategies and join queries. Harper handles it automatically.

Shopping Cart Operations

Adding items to a cart used to mean complex session management, database transactions, and crossing your fingers that inventory stayed accurate. Harper makes it straightforward:

POST /CartItem/
Content-Type: application/json

{
  "productId": "product123",
  "sessionId": "session456", 
  "quantity": 2,
  "addedAt": "2024-08-05T10:30:00Z"
}

GET /CartItem/?sessionId=session456
DELETE /CartItem/cartitem_id_here

These might look like simple REST calls, but remember that everything is happening in the same process. No network latency between cart operations and inventory checks. Harper's query engine can validate stock levels and update cart totals in ways that separate services never could.

Real-Time Inventory Updates

Harper has WebSockets built right into the database. Subscribe to inventory changes without a separate message broker:

ws://localhost:9926/Product/product123

Subscribe to Product/${productId} and you get notified whenever stock levels change. No separate message broker to maintain, no complex routing logic.

Why This Architecture Matters

Harper's single-process architecture addresses the core challenges of e-commerce development: performance, complexity, and operational overhead. Instead of managing multiple services that need to stay synchronized, you get sub-millisecond response times from a single system that handles data, caching, and real-time updates together.

The development experience reflects this simplicity. Schema definitions automatically generate both REST and GraphQL endpoints. Real-time features work without separate message brokers. Caching happens transparently at the storage level. You spend time building shopping features instead of debugging distributed system edge cases.

For e-commerce applications where customer experience depends on fast product searches and responsive cart interactions, Harper's performance characteristics translate directly into better conversion rates. Product pages load instantly. Cart updates feel immediate. Inventory changes reflect in real-time.

The architecture scales naturally through Harper's distributed deployment, allowing global product catalogs while maintaining the performance benefits of the unified system. E-commerce platforms can serve customers worldwide without the complexity typically associated with distributed architectures.

Simplify e-commerce development with Harper’s unified architecture. Database, cache, and real-time updates all run in one high-performance system.

Download

White arrow pointing right
Simplify e-commerce development with Harper’s unified architecture. Database, cache, and real-time updates all run in one high-performance system.

Download

White arrow pointing right
Simplify e-commerce development with Harper’s unified architecture. Database, cache, and real-time updates all run in one high-performance system.

Download

White arrow pointing right

Explore Recent Resources

Livestream
GitHub Logo

1.5 Hour Build - Vibe Coding a Full Personal Site: Design to Deployment in One Session

Watch Austin rebuild his personal website live using Claude AI and Harper, including a custom Markdown CMS, GraphQL schema design, React scaffolding, and full deployment. A real-time pair coding session from design to launch.
Livestream
Watch Austin rebuild his personal website live using Claude AI and Harper, including a custom Markdown CMS, GraphQL schema design, React scaffolding, and full deployment. A real-time pair coding session from design to launch.
Person with short hair wearing a light blue patterned shirt, smiling widely outdoors with blurred greenery and trees in the background.
Austin Akers
Head of Developer Relations
Livestream

1.5 Hour Build - Vibe Coding a Full Personal Site: Design to Deployment in One Session

Watch Austin rebuild his personal website live using Claude AI and Harper, including a custom Markdown CMS, GraphQL schema design, React scaffolding, and full deployment. A real-time pair coding session from design to launch.
Austin Akers
May 2026
Livestream

1.5 Hour Build - Vibe Coding a Full Personal Site: Design to Deployment in One Session

Watch Austin rebuild his personal website live using Claude AI and Harper, including a custom Markdown CMS, GraphQL schema design, React scaffolding, and full deployment. A real-time pair coding session from design to launch.
Austin Akers
Livestream

1.5 Hour Build - Vibe Coding a Full Personal Site: Design to Deployment in One Session

Watch Austin rebuild his personal website live using Claude AI and Harper, including a custom Markdown CMS, GraphQL schema design, React scaffolding, and full deployment. A real-time pair coding session from design to launch.
Austin Akers
Blog
GitHub Logo

The Old Product Loop Is the New Bottleneck

AI has made it dramatically cheaper to get software to a working version, but most companies still plan like building is the expensive part. The new bottleneck is the product loop: forming sharp hypotheses, living inside the user experience, fixing friction as it appears, and feeding evidence back into the roadmap faster than ticket-based planning allows.
Blog
AI has made it dramatically cheaper to get software to a working version, but most companies still plan like building is the expensive part. The new bottleneck is the product loop: forming sharp hypotheses, living inside the user experience, fixing friction as it appears, and feeding evidence back into the roadmap faster than ticket-based planning allows.
Person with short dark hair and moustache, wearing a colorful plaid shirt, smiling outdoors in a forested mountain landscape.
Aleks Haugom
Senior Manager of GTM
Blog

The Old Product Loop Is the New Bottleneck

AI has made it dramatically cheaper to get software to a working version, but most companies still plan like building is the expensive part. The new bottleneck is the product loop: forming sharp hypotheses, living inside the user experience, fixing friction as it appears, and feeding evidence back into the roadmap faster than ticket-based planning allows.
Aleks Haugom
May 2026
Blog

The Old Product Loop Is the New Bottleneck

AI has made it dramatically cheaper to get software to a working version, but most companies still plan like building is the expensive part. The new bottleneck is the product loop: forming sharp hypotheses, living inside the user experience, fixing friction as it appears, and feeding evidence back into the roadmap faster than ticket-based planning allows.
Aleks Haugom
Blog

The Old Product Loop Is the New Bottleneck

AI has made it dramatically cheaper to get software to a working version, but most companies still plan like building is the expensive part. The new bottleneck is the product loop: forming sharp hypotheses, living inside the user experience, fixing friction as it appears, and feeding evidence back into the roadmap faster than ticket-based planning allows.
Aleks Haugom
Livestream
GitHub Logo

2 Hour Build - Live Stream for Non-Developers

A non-developer's live stream walkthrough of building Flow State, a Colorado river-flow app for rafters, in two hours using ChatGPT dictation, Claude Code, Claude Design, and Harper. Scaffold with npm create harper@latest and deploy to Harper Fabric. No coding background required.
Livestream
A non-developer's live stream walkthrough of building Flow State, a Colorado river-flow app for rafters, in two hours using ChatGPT dictation, Claude Code, Claude Design, and Harper. Scaffold with npm create harper@latest and deploy to Harper Fabric. No coding background required.
Person with short dark hair and moustache, wearing a colorful plaid shirt, smiling outdoors in a forested mountain landscape.
Aleks Haugom
Senior Manager of GTM
Livestream

2 Hour Build - Live Stream for Non-Developers

A non-developer's live stream walkthrough of building Flow State, a Colorado river-flow app for rafters, in two hours using ChatGPT dictation, Claude Code, Claude Design, and Harper. Scaffold with npm create harper@latest and deploy to Harper Fabric. No coding background required.
Aleks Haugom
May 2026
Livestream

2 Hour Build - Live Stream for Non-Developers

A non-developer's live stream walkthrough of building Flow State, a Colorado river-flow app for rafters, in two hours using ChatGPT dictation, Claude Code, Claude Design, and Harper. Scaffold with npm create harper@latest and deploy to Harper Fabric. No coding background required.
Aleks Haugom
Livestream

2 Hour Build - Live Stream for Non-Developers

A non-developer's live stream walkthrough of building Flow State, a Colorado river-flow app for rafters, in two hours using ChatGPT dictation, Claude Code, Claude Design, and Harper. Scaffold with npm create harper@latest and deploy to Harper Fabric. No coding background required.
Aleks Haugom
Tutorial
GitHub Logo

Production Quality at Vibe Code Velocity: Dispatched Agent Teams with Harper

Harper enables production-grade agentic engineering by collapsing database, cache, runtime, and messaging into one process, reducing agent complexity and review burden. A multi-model dispatch workflow lets specialized agents plan, code, QA, and review in parallel while humans retain control over critical decisions.
Tutorial
Harper enables production-grade agentic engineering by collapsing database, cache, runtime, and messaging into one process, reducing agent complexity and review burden. A multi-model dispatch workflow lets specialized agents plan, code, QA, and review in parallel while humans retain control over critical decisions.
Person with very short hair and a goatee wearing a plaid button‑up shirt over a white undershirt, smiling outdoors with leafy greenery behind.
Jeff Darnton
SVP, Professional Services & Customer Success
Tutorial

Production Quality at Vibe Code Velocity: Dispatched Agent Teams with Harper

Harper enables production-grade agentic engineering by collapsing database, cache, runtime, and messaging into one process, reducing agent complexity and review burden. A multi-model dispatch workflow lets specialized agents plan, code, QA, and review in parallel while humans retain control over critical decisions.
Jeff Darnton
May 2026
Tutorial

Production Quality at Vibe Code Velocity: Dispatched Agent Teams with Harper

Harper enables production-grade agentic engineering by collapsing database, cache, runtime, and messaging into one process, reducing agent complexity and review burden. A multi-model dispatch workflow lets specialized agents plan, code, QA, and review in parallel while humans retain control over critical decisions.
Jeff Darnton
Tutorial

Production Quality at Vibe Code Velocity: Dispatched Agent Teams with Harper

Harper enables production-grade agentic engineering by collapsing database, cache, runtime, and messaging into one process, reducing agent complexity and review burden. A multi-model dispatch workflow lets specialized agents plan, code, QA, and review in parallel while humans retain control over critical decisions.
Jeff Darnton
Tutorial
GitHub Logo

Change Data Capture Into a Runtime: One Pipeline for Pages, Search, and AI Agents

Learn how Harper turns CDC streams into real-time workflows that refresh cached pages, update search indexes, and keep AI agent context current. See why landing changes in an application runtime beats warehouses, queues, and traditional CDNs.
Tutorial
Learn how Harper turns CDC streams into real-time workflows that refresh cached pages, update search indexes, and keep AI agent context current. See why landing changes in an application runtime beats warehouses, queues, and traditional CDNs.
Person with very short hair and a goatee wearing a plaid button‑up shirt over a white undershirt, smiling outdoors with leafy greenery behind.
Jeff Darnton
SVP, Professional Services & Customer Success
Tutorial

Change Data Capture Into a Runtime: One Pipeline for Pages, Search, and AI Agents

Learn how Harper turns CDC streams into real-time workflows that refresh cached pages, update search indexes, and keep AI agent context current. See why landing changes in an application runtime beats warehouses, queues, and traditional CDNs.
Jeff Darnton
May 2026
Tutorial

Change Data Capture Into a Runtime: One Pipeline for Pages, Search, and AI Agents

Learn how Harper turns CDC streams into real-time workflows that refresh cached pages, update search indexes, and keep AI agent context current. See why landing changes in an application runtime beats warehouses, queues, and traditional CDNs.
Jeff Darnton
Tutorial

Change Data Capture Into a Runtime: One Pipeline for Pages, Search, and AI Agents

Learn how Harper turns CDC streams into real-time workflows that refresh cached pages, update search indexes, and keep AI agent context current. See why landing changes in an application runtime beats warehouses, queues, and traditional CDNs.
Jeff Darnton