quickstart.mdx

title	Set Up and Publish Your First Design Code Craft Project
sidebarTitle	Quickstart
description	Set up your first project in the hub — from creating a project and writing MDX pages to organizing navigation and publishing your docs.

You're about to go from zero to a fully published documentation project. By the end of this guide you'll have a named project, at least one MDX page, a working navigation config, and a live URL you can share with anyone.

Every piece of documentation in Design Code Craft lives inside a **project** — a self-contained bundle with its own pages, navigation, and settings.

Start by giving your project a clear identity:

- **Name** — short and recognizable, e.g. `Palette UI` or `forge-cli`
- **Description** — one sentence that explains what the project does
- **Tags** — one or more labels like `design-system`, `cli`, `typescript`, or `workflow`

Once you save the project, the hub creates a dedicated docs space and assigns it a unique URL slug based on the name you chose.

<Tip>
  Use the Design Code Craft CLI to scaffold a new project instantly. Run `dcc init my-project` and the CLI generates the folder structure, a starter `docs.json`, and an `introduction.mdx` in seconds.
</Tip>

Documentation pages are MDX files — Markdown with support for React components and Mintlify's built-in UI blocks. Create your first page at the root of your project folder:

<CodeGroup>
  ```mdx title="introduction.mdx"
  ---
  title: "Welcome to Palette UI"
  sidebarTitle: "Introduction"
  description: "A lightweight, themeable component library built for design-forward React apps."
  ---

  Palette UI gives you a set of accessible, composable components that adapt to your brand
  token system out of the box. Start with the quickstart, then explore the component reference.
  ```
</CodeGroup>

Every page needs three frontmatter fields — `title`, `sidebarTitle`, and `description` — so the hub can render the sidebar and SEO metadata correctly. Add as many MDX files as you need; each file becomes one page in the sidebar.

Open (or create) `docs.json` in your project root. This file controls everything about your sidebar — groups, page order, and tabs if you need them.

Here's a minimal config to get you started:

```json title="docs.json"
{
  "name": "My Project",
  "navigation": {
    "groups": [
      { "group": "Get Started", "pages": ["introduction", "quickstart"] }
    ]
  }
}
```

Add more groups as your project grows — for example `"Guides"`, `"Reference"`, or `"Changelog"`. Page values are file paths relative to the project root, without the `.mdx` extension.

<Note>
  The order of pages inside a group controls the order they appear in the sidebar. Put your most important entry points first so readers aren't left hunting.
</Note>

When you're happy with your content, use the CLI to build and publish your project:

```bash title="Build and publish your project"
dcc build       # compile and validate your docs
dcc deploy      # push to the Design Code Craft platform
dcc publish     # make the project publicly visible
```

Alternatively, committing and pushing to your connected repository triggers the same pipeline automatically:

```bash title="Deploy via Git"
git add .
git commit -m "docs: initial project documentation"
git push origin main
```

Either way, your project URL follows this pattern once published:

```text
https://designcodecraft.dev/projects/my-project
```

Copy the URL and share it — with collaborators, in a README, or as the canonical reference for your project.

The `dcc` CLI also includes a local preview server. Run `dcc dev` inside any project folder to spin up a hot-reloading preview at `http://localhost:3000` before you push.

---

What to explore next

Browse all your documented projects and learn how to manage them from one place. Explore the token architecture, component guidelines, and theming reference. Dive into the TypeScript libraries, hooks, and utilities available across projects. Full reference for every public API, CLI command, and configuration option.