Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions docs/build/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ description: Build powerful apps, secured by Bitcoin.

<summary><strong>New to building with Stacks? Check out these weekly virtual meets!</strong></summary>

* **Stacks DevRel office hours**: Follow and enable notifications for [@StacksDevs](https://x.com/StacksDevs) on Twitter to catch alerts for our weekly livestreams every Thursday at 10am EST. Office Hours are the easiest way to stay in the loop on product drops, live demos, community builder spotlights, and more. Stay up-to-date with release discussions, real-time walkthroughs, and builder highlights that matter.
* **Clarity Working Group**: An open, developer-focused initiative dedicated to supporting builders across the Stacks ecosystem. The group brings together experienced Clarity engineers (“Clarity giga chads”), auditors, educators, grant project teams, and new developers to collaborate, learn, and advance smart contract development on Bitcoin. Check out the calendar [link](https://www.addevent.com/event/yc0x95fky8y4) to join every other Tuesday.
* **AI BTC Working Group:** Join the **AI BTC Working Group**'s (WG) weekly meeting on AIBTC's twitter account, where they delve into the exciting intersection of AI and Bitcoin. Check out the calendar [link](https://www.addevent.com/event/c3qjy462xr82) to join every Thursday.
* **Runes Capsule Webinars:** Join a weekly deep-dive into Runes Capsule architecture, Bitcoin bridging, and trust minimized design patterns on Stacks. Check out this [link](https://calendar.google.com/calendar/u/0/r?cid=b247d75eb1a11dc3ebbf0c62eb4a1c83b4a53d4d2f903eaa19d685f28f087f92%40group.calendar.google.com) to join every Sundays.
- **Stacks DevRel office hours**: Follow [@StacksDevs](https://x.com/StacksDevs) on Twitter for weekly livestreams every Thursday at 10am EST. Office Hours keep you updated on product drops, demos, builder spotlights, and more. Get release discussions, walkthroughs, and highlights.
- **Clarity Working Group**: An open initiative supporting Stacks builders. It unites experienced engineers, auditors, educators, and new developers to collaborate and advance Clarity development on Bitcoin. Join every other Tuesday via [calendar](https://www.addevent.com/event/yc0x95fky8y4).
- **AI BTC Working Group:** Join the AI BTC Working Group's weekly meeting on AIBTC's Twitter, exploring AI and Bitcoin. Join every Thursday via [calendar](https://www.addevent.com/event/c3qjy462xr82).
- **Runes Capsule Webinars:** Weekly deep-dive into Runes Capsule architecture, Bitcoin bridging, and trust-minimized patterns on Stacks. Join every Sunday via [calendar](https://calendar.google.com/calendar/u/0/r?cid=b247d75eb1a11dc3ebbf0c62eb4a1c83b4a53d4d2f903eaa19d685f28f087f92%40group.calendar.google.com).

</details>

Expand All @@ -25,17 +25,17 @@ Stacks ranks #5 among all crypto ecosystems for new developers in 2025! \[source

Stacks is a fast, low-cost, builder-friendly layer 2 network on Bitcoin. It’s built on Bitcoin, inheriting Bitcoin’s battle-tested security. By jumping into our docs, you’re joining the Stacks builder community that’s bringing a global onchain economy to Bitcoin.

If you're here on this page, hopefully you've already gotten a good sense of _what_ Stacks' purpose is, if not, head to the [Learn](https://app.gitbook.com/o/hoh4mQXTl8NvI3cETroY/s/H74xqoobupBWwBsVMJhK/) section. Or if you're still on the edge of _why_ you should build with Stacks, head to [Why Build with Stacks](get-started/introduction/why-build-with-stacks.md).
If you don't know Stacks' purpose, check the [Learn](https://app.gitbook.com/o/hoh4mQXTl8NvI3cETroY/s/H74xqoobupBWwBsVMJhK/) section. For why to build with Stacks, see [Why Build with Stacks](get-started/introduction/why-build-with-stacks.md).

***
---

### Pick your learning path

We all have different styles of learning. If you've already got a good concept of web3 fundamentals and want to get a quick taste of what the DevEx is like on Stacks, then check out the [Developer Quickstart](get-started/developer-quickstart.md). Or find the path that clicks for you — and if bandwidth allows, tackle them all!
Learning styles vary. If you know web3 basics and want a quick DevEx taste, try [Developer Quickstart](get-started/developer-quickstart.md). Find your pathand tackle all if possible!

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Try the Developer Quickstart</strong></td><td><a href="get-started/developer-quickstart.md">developer-quickstart.md</a></td></tr><tr><td><strong>Start Learning Clarity</strong></td><td><a href="get-started/clarity-crash-course.md">clarity-crash-course.md</a></td></tr><tr><td><strong>Bitcoin Primer Tutorial</strong></td><td><a href="https://app.gitbook.com/s/skGYu79qDNfITOqDNU3s/bitcoin-primer">Bitcoin Primer</a></td></tr><tr><td><strong>Earn a Stacks Developer Degree</strong></td><td><a href="https://learnweb3.io/degrees/stacks-developer-degree/">https://learnweb3.io/degrees/stacks-developer-degree/</a></td></tr><tr><td><strong>Watch Our Hands-On Videos</strong></td><td><a href="https://www.youtube.com/@stacks-developers">https://www.youtube.com/@stacks-developers</a></td></tr><tr><td><strong>Clarity Development Using Clarinet</strong></td><td><a href="/broken/pages/UK5Kgh2MHLoQvfoFVnLr">Broken link</a></td></tr></tbody></table>

***
---

### Who should use what

Expand All @@ -48,12 +48,12 @@ We all have different styles of learning. If you've already got a good concept o
| Launching a token | [Create Tokens](get-started/create-a-token/) |
| Interested in security / auditing | [Stacks Bug Bounties](https://immunefi.com/bug-bounty/stacks/information/) |

***
---

### Still got questions?

We know, it's a lot. But we, along with our large community, are always more than welcome to help you throughout your journey with Stacks.
It's a lot, but our community is here to help with your Stacks journey.

* [**Stacks Discord**](https://discord.gg/stacks): Connect with other developers and our team
* [**Stacks Forum**](https://forum.stacks.org/): Ask questions and share projects
* [**Stacks Twitter**](https://x.com/StacksDevs)**:** Follow us on Twitter and ask us questions there&#x20;
- [**Stacks Discord**](https://discord.gg/stacks): Connect with other developers and our team
- [**Stacks Forum**](https://forum.stacks.org/): Ask questions and share projects
- [**Stacks Twitter**](https://x.com/StacksDevs)**:** Follow us on Twitter and ask us questions there&#x20;
97 changes: 59 additions & 38 deletions docs/build/get-started/developer-quickstart.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@ description: Your 0→1 guide for building a Clarity contract and app on Stacks.
<figure><img src="../.gitbook/assets/Frame 316125324 (1).jpg" alt=""><figcaption></figcaption></figure>

**Welcome to the Stacks Developer Quickstart Guide!**\
This is your fast-track path for understanding what you'll need to become a Stacks developer. In this guide, you’ll build a real Clarity smart contract, wire up a functioning Stacks app, and pick up about 75% of the practical knowledge every Stacks builder needs. Whether you’re shipping your first project or leveling up your skills, this guide takes you from zero to deployed—quickly and confidently.
This guide helps you become a Stacks developer quickly. You'll build a real Clarity smart contract, create a working Stacks app, and learn about 75% of the practical knowledge needed. From zero to deployed—fast and confidently.

### What you'll achieve

By the end of this quickstart, you’ll have built an onchain app by:

* Building a Clarity smart contract with Clarinet
* Utilize the 1:1 Bitcoin backed token, sBTC
* Deploying your smart contract to Stacks' testnet
* Interacting with your deployed contract from a frontend app
- Building a Clarity smart contract with Clarinet
- Utilize the 1:1 Bitcoin backed token, sBTC
- Deploying your smart contract to Stacks' testnet
- Interacting with your deployed contract from a frontend app

{% hint style="success" %}
**Why Stacks?**
Expand All @@ -26,19 +26,19 @@ Stacks is a fast, low-cost, builder-friendly layer 2 network on Bitcoin. It’s

### What You'll Build

The app you'll build will be a message board contract. Users can add a new message to store on-chain for a fee of 1 satoshi in sBTC. Other functionality to read data from the contract will also be handled. Besides sBTC, there will be other things that'll be introduced to you such as post-conditions, Bitcoin read access, unit testing, wallet connectivity, BNS, Hiro, and more. Hopefully all this will give you a good flavor of what you can expect in the Stacks builder ecosystem.
You'll build a message board contract. Users add messages on-chain for 1 satoshi in sBTC. It includes read functions. You'll learn about sBTC, post-conditions, Bitcoin read access, unit testing, wallet connectivity, BNS, Hiro, and more. This gives a good taste of the Stacks ecosystem.

Let's start building on Bitcoin! :orange\_square:
Let's start building on Bitcoin! :orange_square:

{% hint style="info" %}
**Prerequisites**

* Basic familiarity with web development
* Basic familiarity with web3 concepts
* A modern web browser
* Node.js
* Visual Studio Code or any other popular IDE
{% endhint %}
- Basic familiarity with web development
- Basic familiarity with web3 concepts
- A modern web browser
- Node.js
- Visual Studio Code or any other popular IDE
{% endhint %}

### Set Up Your Developer Environment

Expand All @@ -52,33 +52,41 @@ Below are a few different ways to install Clarinet on your machine using your te

{% tabs %}
{% tab title="Homebrew" %}

```bash
brew install clarinet
```

{% endtab %}

{% tab title="Winget" %}

```bash
winget install clarinet
```

{% endtab %}

{% tab title="Source" %}

```bash
sudo apt install build-essential pkg-config libssl-dev
git clone https://github.com/stx-labs/clarinet
cd clarinet
cargo clarinet-install
```

{% endtab %}

{% tab title="Binary" %}

```bash
wget -nv https://github.com/stx-labs/clarinet/releases/latest/download/clarinet-linux-x64-glibc.tar.gz -O clarinet-linux-x64.tar.gz
tar -xf clarinet-linux-x64.tar.gz
chmod +x ./clarinet
mv ./clarinet /usr/local/bin
```

{% endtab %}
{% endtabs %}
{% endstep %}
Expand Down Expand Up @@ -119,14 +127,17 @@ There are many Stacks supported wallets in the market. For this guide, we'll be
Let's start by creating a new Clarinet project which will house our smart contract. The `clarinet new` command sets up everything you need for smart contract development, including a testing framework, deployment configurations, and a local development environment.

{% code title="terminal" %}

```
clarinet new my-stacks-contracts
```

{% endcode %}

A Clarinet project will be scaffolded with the below:

{% code title="terminal" expandable="true" %}

```
Created directory my-stacks-contracts
Created directory contracts
Expand Down Expand Up @@ -159,6 +170,7 @@ Once you are ready to write your contracts, run the following commands:
$ clarinet check
Check contract syntax for all files in ./contracts.
```

{% endcode %}
{% endstep %}

Expand Down Expand Up @@ -189,8 +201,8 @@ Open `contracts/message-board.clar` and remove its existing content. This is whe

Let's first define some constants:

* contract owner to establish control access
* custom error codes to handle errors in functions
- contract owner to establish control access
- custom error codes to handle errors in functions

<pre class="language-clarity" data-title="message-board.clar"><code class="lang-clarity">;; Simple Message Board Contract
;; This contract allows users to read and post messages for a fee in sBTC.
Expand All @@ -212,8 +224,8 @@ You'll notice in the `CONTRACT_OWNER` constant that `tx-sender` is set in place

We'll then need to define some data storage:

* A map to store key-value pairs of the message id and it's related metadata
* A data variable to count the total number of messages added
- A map to store key-value pairs of the message id and it's related metadata
- A data variable to count the total number of messages added

<pre class="language-clarity" data-title="message-board.clar"><code class="lang-clarity">;; Define a map to store messages
;; Each message has an ID, content, author, and Bitcoin block height timestamp
Expand All @@ -229,6 +241,7 @@ We'll then need to define some data storage:
;; Counter for total messages
<strong>(define-data-var message-count uint u0)
</strong></code></pre>

{% endstep %}

{% step %}
Expand Down Expand Up @@ -286,8 +299,8 @@ There's quite a lot going on in this function above that covers in-contract post

By using the `define-public` function, we can literally create a public function where anyone can invoke.

* `(add-message ... )` : the custom name of the public function
* `(content (string-utf8 280))` : the custom paramater name and type
- `(add-message ... )` : the custom name of the public function
- `(content (string-utf8 280))` : the custom parameter name and type

</details>

Expand Down Expand Up @@ -339,7 +352,7 @@ The `restrict-assets?` acts as an in-contract post-condition to protect user and
})
```

The function `map-set` will allow the existing mapping of `messages` to add a new key-value pair consiting of the metadata of the new message.
The function `map-set` will allow the existing mapping of `messages` to add a new key-value pair consisting of the metadata of the new message.

We'll be using the current Bitcoin block height (via `burn-block-height`) as a way to capture the time of when this new message was added. Through `burn-block-height` , Clarity allows us to have read access into the Bitcoin state at anytime.

Expand Down Expand Up @@ -403,9 +416,11 @@ Since we're working with sBTC in our local developer environment, we'll need to
In our case, all we'll need to do is add the [`.sbtc-deposit`](https://explorer.hiro.so/txid/SM3VDXK3WZZSA84XXFKAFAF15NNZX32CTSG82JFQ4.sbtc-deposit?chain=mainnet) contract as a project requirement.

{% code title="terminal" %}

```
clarinet requirements add SM3VDXK3WZZSA84XXFKAFAF15NNZX32CTSG82JFQ4.sbtc-deposit
```

{% endcode %}

You'll notice in the `add-message` public function, we're making an external contract call to the [`.sbtc-token`](https://explorer.hiro.so/txid/0xead2080826685a98886891cbd9b288d367ae19b357353c71fff4a3330da582c8?chain=mainnet) contract. This is the official sBTC token contract that contains the [SIP-010](https://github.com/stacksgov/sips/blob/main/sips/sip-010/sip-010-fungible-token-standard.md) standard `transfer` function that we are invoking.
Expand Down Expand Up @@ -475,10 +490,10 @@ You'll notice the usage of a `at-block` function in the highlighted line of code

Now with the actual writing of your contract complete, we now need to test its functionality. There's a few different ways we can go about iterating and testing the functionality of your contract.

* Contract interaction in the [Clarinet REPL](../clarinet/contract-interaction.md)
* Running your contract in a [local blockchain environment](../clarinet/local-blockchain-development.md)
* Fuzz testing with [Rendezvous](https://stacks-network.github.io/rendezvous/)
* Writing unit tests with the [Clarinet JS SDK](/broken/pages/I1W2xGQYVmPwMEEfqje6)
- Contract interaction in the [Clarinet REPL](../clarinet/contract-interaction.md)
- Running your contract in a [local blockchain environment](../clarinet/local-blockchain-development.md)
- Fuzz testing with [Rendezvous](https://stacks-network.github.io/rendezvous/)
- Writing unit tests with the [Clarinet JS SDK](/broken/pages/I1W2xGQYVmPwMEEfqje6)

We'll go with unit testing for now. In your `tests` folder, open up the related `message-board.test.ts` file and let's use the unit test written below.

Expand Down Expand Up @@ -553,6 +568,7 @@ You'll notice we have two `it` blocks setup to test out 2 different scenarios:
Run the test via `npm run test` to confirm that the two scenarios are functioning as intended.

{% code title="terminal" %}

```bash
$ npm run test

Expand All @@ -566,6 +582,7 @@ $ npm run test
Start at 14:05:07
Duration 886ms (transform 40ms, setup 42ms, collect 8ms, tests 46ms, environment 699ms, prepare 4ms)
```

{% endcode %}

Great! Now that your contract is working as intended, let's deploy the contract to testnet.
Expand Down Expand Up @@ -625,13 +642,15 @@ For more information on configuring deployment plans, check out the specific gui
{% endhint %}

{% code title="terminal" %}

```bash
$ clarinet deployments generate --testnet --medium-cost
Analyzing contracts...
Calculating deployment costs...
Generating deployment plan
Created file deployments/default.testnet-plan.yaml
```

{% endcode %}
{% endstep %}

Expand All @@ -641,9 +660,11 @@ Created file deployments/default.testnet-plan.yaml
Once your deployment plan is generated and configured properly, go ahead and deploy the contract to testnet.

{% code title="terminal" %}

```bash
clarinet deployments apply --testnet
```

{% endcode %}

If the contract was successfully deployed, you should see the below confirmation:
Expand Down Expand Up @@ -818,36 +839,36 @@ For the complete set of available API endpoints for the Stacks network, check ou

And that's it, you've successfully created an sBTC powered Clarity smart contract which can be interacted with from a frontend app. There's obviously much more you can do to complete this but you've got some of the basics down pat now. Go ahead and finish creating the frontend functions to call on the other contract functions we have.

***
---

### Further Improvements

This is just the beginning. There are many ways we can improve upon this app. Here are some suggestions for you to extend the functionality of this app:

* Deploy to mainnet and share your project with the community
* Use [Chainhooks](https://docs.hiro.so/en/tools/chainhooks) to index emitted events from the contract
* Integrate the [`sbtc`](../more-guides/sbtc/bridging-bitcoin/) library so users can directly bridge their BTC to sBTC in-app
* Utilize SIP-009 NFTs to uniquely identify each message for each author
- Deploy to mainnet and share your project with the community
- Use [Chainhooks](https://docs.hiro.so/en/tools/chainhooks) to index emitted events from the contract
- Integrate the [`sbtc`](../more-guides/sbtc/bridging-bitcoin/) library so users can directly bridge their BTC to sBTC in-app
- Utilize SIP-009 NFTs to uniquely identify each message for each author

***
---

### Next Steps

Now that you have the basics down, here are some ways to continue your Stacks development journey:

**Learn More About Clarity**

* [**Clarity Crash Course**](https://docs.stacks.co/docs/clarity-crash-course): Quick introduction to Clarity concepts
* [**Clarity Book**](https://book.clarity-lang.org/): Comprehensive guide to Clarity development
* [**Clarity Reference**](https://docs.stacks.co/docs/clarity): Complete documentation of Clarity functions
- [**Clarity Crash Course**](https://docs.stacks.co/docs/clarity-crash-course): Quick introduction to Clarity concepts
- [**Clarity Book**](https://book.clarity-lang.org/): Comprehensive guide to Clarity development
- [**Clarity Reference**](https://docs.stacks.co/docs/clarity): Complete documentation of Clarity functions

**Development Tools**

* [**Clarinet**](https://github.com/stx-labs/clarinet): Local development environment for Clarity
* [**Hiro Platform**](https://platform.hiro.so/): Hosted development environment
* [**Stacks Explorer**](https://explorer.stacks.co/): View transactions and contracts
- [**Clarinet**](https://github.com/stx-labs/clarinet): Local development environment for Clarity
- [**Hiro Platform**](https://platform.hiro.so/): Hosted development environment
- [**Stacks Explorer**](https://explorer.stacks.co/): View transactions and contracts

**Community Resources**

* [**Stacks Discord**](https://discord.gg/stacks): Connect with other developers
* [**Stacks Forum**](https://forum.stacks.org/): Ask questions and share projects
- [**Stacks Discord**](https://discord.gg/stacks): Connect with other developers
- [**Stacks Forum**](https://forum.stacks.org/): Ask questions and share projects
Loading