Getting Started

Welcome to dcupl. This guide maps out your learning journey from understanding what dcupl does to building production applications.

Total time to production-ready: ~85 minutes

Your Learning Path

1. Introduction

Time: 5 minutes | Goal: Understand what dcupl solves

Start here to learn why dcupl exists and whether it fits your use case.

Topic Description
What is dcupl? The problem dcupl solves, core components, when to use it

After this section you will know:

  • What problems dcupl solves for frontend developers
  • The difference between SDK (open source) and Console (SaaS)
  • Whether dcupl is right for your project

2. Concepts Overview

Time: 10 minutes | Goal: Understand the architecture

Learn how the pieces fit together before writing code.

Topic Description
Architecture SDK packages, execution contexts, integration patterns
Data Flow How data moves through the dcupl pipeline

After this section you will know:

  • How SDK, Loader, and Console work together
  • Where queries execute (browser vs server)
  • The JSON-first configuration approach

3. Quick Start

Time: 5 minutes | Goal: Write your first code

Get hands-on immediately with a minimal working example.

Topic Description
Quick Start Install, define model, load data, query - in 30 lines

After this section you will have:

  • A working dcupl query
  • Understanding of the basic API pattern
  • Confidence to explore further

4. First App Tutorial

Time: 15 minutes | Goal: Build a complete application

Step-by-step tutorial building a real application from scratch.

Topic Description
Build Your First dcupl Application Complete walkthrough: models, data, queries, filters, facets

After this section you will know:

  • How to define models with typed properties
  • How to load and query data
  • How to filter with multiple conditions
  • How to get facet counts for filter UIs

5. Core Concepts Deep Dive

Time: 30 minutes | Goal: Master the fundamentals

Understand each concept in depth to build anything.

Topic Time Description
Core Concepts Overview 5 min The three core concepts and how they connect
Models 5 min Schema definition, properties, and references
Lists 5 min Creating and managing queryable views
Query 5 min The query interface in detail

After this section you will know:

  • All property types and when to use each
  • How to model relationships between data
  • How to create multiple filtered views
  • All query capabilities available to you

6. Product Catalog Tutorial

Time: 20 minutes | Goal: Build a real-world feature

Apply your knowledge to build a common pattern: faceted product navigation.

Topic Description
Build a Product Catalog Faceted search, price filters, multiple brands, sorting

After this section you will know:

  • How to build faceted navigation with dynamic counts
  • How to combine multiple filter conditions
  • How to handle price ranges and multi-select filters
  • Patterns used in production e-commerce applications

7. Choose Your Framework

Time: Variable | Goal: Integrate with your stack

Framework-specific guides with best practices, hooks, and patterns.

React Integration Guide

  • Custom hooks for dcupl state
  • Context providers
  • Async data loading patterns
  • TypeScript integration

Vue Integration Guide

  • Composables for dcupl
  • Reactive data with refs
  • Pinia integration
  • Vue 3 Composition API

Quick Reference

Minimum Viable dcupl

import { Dcupl } from '@dcupl/core';

const dcupl = new Dcupl();

dcupl.models.set({
  key: 'Product',
  properties: [{ key: 'name', type: 'string' }],
});

dcupl.data.set([{ key: 'p1', name: 'Laptop' }], { model: 'Product' });

await dcupl.init();

const list = dcupl.lists.create({ modelKey: 'Product' });
const items = list.catalog.query.items();

Common Operations

Operation Code
Filter list.catalog.query.addCondition({ attribute: 'x', operator: 'eq', value: 'y' })
Get results list.catalog.query.items()
Get count list.catalog.query.count()
Get facets list.catalog.fn.facets({ attribute: 'category' })
Sort list.catalog.query.items({ sort: { attributes: ['price'], order: ['asc'] } })
Paginate list.catalog.query.items({ start: 0, count: 10 })
Clear filters list.catalog.query.clear()

What's Next?

After completing this learning path, explore:

Querying

Analysis

Patterns

Best Practices

Need Help?