DEV Community: @codingsh

I Built Stacks Skills — Because AI Agents Are Confidently Wrong About Stacks

@codingsh — Wed, 11 Mar 2026 21:03:47 +0000

TL;DR: I built Stacks Skills — a set of skill files for AI agents and LLMs that corrects the most common (and costly) misconceptions about building on Stacks. It's free, open source, and you can install it in your AI tool in one line.

The Problem: Your AI Doesn't Know Stacks

Ask any popular LLM to help you build a dApp on Stacks. Here's what you'll get:

// What the AI suggests:
const wallet  = "MetaMask";       // ❌ Wrong
const address = "0x123...";       // ❌ Wrong
const gasCost = "$5.00";          // ❌ Wrong
const lang    = "Solidity";       // ❌ Wrong
const lib     = "ethers.js";      // ❌ Wrong

Every single line is wrong. Not a little off — completely wrong.

LLMs were trained on a world dominated by Ethereum patterns. When they encounter Stacks, they pattern-match to Ethereum and hallucinate confidently. The result? Broken code, hours of debugging, and developers giving up on Stacks before they even write their first define-public.

The reality looks like this:

// The truth:
const wallet  = "Hiro Wallet";    // ✅
const address = "SP3FGQ...";      // ✅ SP... mainnet / ST... testnet
const gasCost = "$0.0001";        // ✅ fractions of a cent
const lang    = "Clarity";        // ✅ decidable LISP — not Solidity
const lib     = "Stacks.js";      // ✅

What I Built: Stacks Skills

Stacks Skills is a collection of structured knowledge files — called skills — that you can feed directly into AI agents, Claude Code plugins, Cursor rules, or any tool that supports context injection.

Each skill covers a specific topic in the Stacks ecosystem and is written in a format optimized for LLM consumption: precise, corrective, and unambiguous.

19 Skills Covering the Full Ecosystem

Skill	What It Fixes
🌐 Why Stacks	Bitcoin L2, not another EVM chain
💻 Clarity	Decidable LISP — no reentrancy, no surprises
⚠️ Common Mistakes	`.` prefix, response types, `(ok ...)` patterns
🔒 Security	Post-conditions, access control, vulnerabilities
👛 Wallets	Hiro Wallet / Leather — not MetaMask
🪙 Tokens	SIP-010 — not ERC-20
🖼️ NFTs	SIP-009 — not ERC-721
₿ sBTC	Threshold signatures — not wrapped BTC
📈 Stacking	Earn Bitcoin by locking STX — not staking
📛 BNS	Bitcoin Name System — not ENS
⛽ Gas & Costs	Fractions of a cent — no gas auctions
📄 Contracts	Verified addresses — never hallucinate
🖥️ Frontend	Stacks.js + Hiro SDK — not ethers.js
🧰 Clarinet	Local dev — required, not optional
🚀 Ship	End-to-end dApp guide
⛏️ Mining	Proof of Transfer — not PoW
💰 Tokenomics	1.818B STX max supply, mechanics
⚡ Nakamoto	~200ms blocks, faster finality
🔒 BTC Finality	Bitcoin-anchored security model

How to Install

For Claude Code

/plugin marketplace add developerfred/stacksskills
/plugin install stacksskills

For Any AI Agent (universal)

Install the skill at:
https://raw.githubusercontent.com/developerfred/stacksskills/master/SKILL.md

For Cursor / Windsurf / Copilot

Drop the raw skill content into your .cursorrules or system prompt context. Each skill file is a standalone markdown document optimized for this exact use case.

Why "Skills"?

The skills format emerged from the AI agent ecosystem as a pattern for injecting domain knowledge into LLM workflows. Instead of hoping the model knows the right answer, you give it the right answer upfront — structured, precise, ready to use.

Stacks is niche enough that most LLMs have poor coverage of it. But the ecosystem is rich and growing fast: sBTC is live, Nakamoto upgrade shipped, and more developers are building Bitcoin-native applications than ever. The problem isn't the ecosystem — it's that our AI tools haven't caught up.

Stacks Skills bridges that gap.

The Biggest Misconceptions I Wanted to Kill

1. "Clarity is like Solidity"

Clarity is a decidable language. You can statically analyze what a Clarity contract will do before you deploy it. No surprises. No reentrancy. No recursion. It's closer to a functional language (think LISP) than anything in the EVM world.

2. "sBTC is just wrapped Bitcoin"

sBTC uses threshold signatures — a cryptographic multi-party scheme where a decentralized signer set controls the BTC peg. There's no custodian. There's no bridge contract holding your BTC. The trust model is fundamentally different from wBTC or any wrapped asset.

3. "Stacks is expensive"

Transactions on Stacks cost fractions of a cent. No gas auctions, no fee spikes during congestion. It's one of the cheapest smart contract environments on any L2.

4. "Use 0x addresses"

Stacks uses a completely different address format: SP... for mainnet, ST... for testnet. This is a bech32-derived format. If your AI is generating 0x addresses for Stacks, it has no idea what it's doing.

Contributions Welcome

This is an open project. If you spot a gap — a skill topic that's missing, a misconception I haven't addressed, or just something the AI community gets wrong about Stacks — open an issue. I'll take care of it quickly.

📦 GitHub: github.com/developerfred/stacksskills
🌐 Web: stacks-skills.vercel.app

The goal is simple: make it so that any developer, using any AI tool, can build on Stacks correctly — from day one.

If this saved you time, drop a ⭐ on the repo. It helps the project get discovered by more Stacks builders.

Building an AI Node Client in Elixir from Scratch

@codingsh — Thu, 19 Feb 2026 18:27:59 +0000

Building an AI Node Client in Elixir from Scratch

This post walks through how ElixirClaw works — a real Elixir project that connects a local device to an AI gateway over WebSocket, then executes commands (screenshots, notifications, shell commands) when the AI asks.

If you're new to Elixir, don't worry. I'll explain each concept as we go. By the end you'll understand how a real production-ish OTP application is structured.

What We're Building

The flow looks like this:

AI Gateway (remote server)
        |
        | WebSocket
        |
ElixirClaw (your machine)
        |
        |-- camera.snap  → take a photo
        |-- screen.snap  → take a screenshot
        |-- system.run   → run a shell command
        |-- system.notify → send a desktop notification

The node connects to the gateway, authenticates, and then listens forever for incoming commands.

Project Structure

lib/elixir_claw/
├── application.ex    # Starts everything
├── gateway.ex        # WebSocket connection
├── protocol.ex       # Encodes/decodes messages
├── node.ex           # Executes device commands
├── security.ex       # Input validation
└── auth.ex           # Device identity

Let's walk through each one.

Step 1: The Application Supervisor

Every OTP application starts with a supervision tree. Think of it as a family tree where parents restart children that crash.

# lib/elixir_claw/application.ex

defmodule ElixirClaw.Application do
  use Application

  def start(_type, _args) do
    children = [
      # A registry — like a phone book for processes
      {Registry, keys: :unique, name: ElixirClaw.Registry},

      # A dynamic supervisor — can start/stop Gateway connections at runtime
      {DynamicSupervisor, strategy: :one_for_one, name: ElixirClaw.Gateway.Supervisor}
    ]

    Supervisor.start_link(children, strategy: :one_for_one, name: ElixirClaw.Supervisor)
  end
end

strategy: :one_for_one means: if one child crashes, restart only that child (not the others).

The Registry lets us find processes by name — we'll use it to look up the Gateway process for a specific node ID.

Step 2: Connecting to the Gateway

The Gateway module is a GenServer — Elixir's pattern for a long-running process that holds state and handles messages.

# lib/elixir_claw/gateway.ex

defmodule ElixirClaw.Gateway do
  use GenServer

  defstruct [
    :gateway_host,
    :gateway_port,
    :config,
    :conn,          # The HTTP/WebSocket connection
    :websocket,     # The WebSocket state
    :state,         # :disconnected | :connected | :authenticated
    :reconnect_attempts,
    :tick_interval
  ]

  def start_link(config) do
    GenServer.start_link(__MODULE__, config, name: via_tuple(config.node_id))
  end

  # Register this process in the Registry under the node_id
  def via_tuple(node_id) do
    {:via, Registry, {ElixirClaw.Registry, {:gateway, node_id}}}
  end

  def init(config) do
    state = %__MODULE__{
      gateway_host: config[:gateway_host] || "127.0.0.1",
      gateway_port: config[:gateway_port] || 18789,
      config: config,
      reconnect_attempts: 0,
      tick_interval: 15_000,
      state: :disconnected
    }

    # {:continue, :connect} means: after init(), immediately call handle_continue(:connect, ...)
    {:ok, state, {:continue, :connect}}
  end
end

The via_tuple trick lets us register the process by name. Later, we can look it up with Registry.lookup(ElixirClaw.Registry, {:gateway, some_node_id}).

Step 3: The WebSocket Connection

This is where Elixir gets interesting. We use Mint (an HTTP client) and Mint.WebSocket to handle the connection:

def handle_continue(:connect, state) do
  case connect(state) do
    {:ok, new_state} -> {:noreply, new_state}
    error ->
      Logger.error("Failed to connect: #{inspect(error)}")
      {:stop, :connection_failed, state}
  end
end

defp connect(state) do
  # Build the URI
  uri = "ws://#{state.gateway_host}:#{state.gateway_port}"
  parsed_uri = URI.parse(uri)

  # Open an HTTP connection first
  case Mint.HTTP.connect(:http, parsed_uri.host, parsed_uri.port, []) do
    {:ok, conn} ->
      # Upgrade to WebSocket
      case Mint.WebSocket.upgrade(:ws, conn, "/", []) do
        {:ok, conn, ref} ->
          # Wait for the HTTP 101 Switching Protocols response
          receive do
            {:tcp, _port, data} ->
              case Mint.WebSocket.stream(conn, data) do
                {:ok, conn, [{:status, ^ref, status}, {:headers, ^ref, headers}, {:done, ^ref}]} ->
                  {:ok, websocket} = Mint.WebSocket.new(conn, ref, status, headers)
                  {:ok, %{state | conn: conn, websocket: websocket, state: :connected}}
                error -> {:error, error}
              end
          end
        error -> {:error, error}
      end
    error -> {:error, error}
  end
end

Once connected, the BEAM delivers incoming TCP data as messages to our process:

def handle_info({:tcp, _port, data}, state) do
  process_data(data, state)
end

defp process_data(data, state) do
  case Mint.WebSocket.stream(state.conn, data) do
    {:ok, conn, messages} ->
      new_state = %{state | conn: conn}
      Enum.reduce(messages, new_state, fn msg, acc ->
        handle_stream_message(msg, acc)
      end)
      |> then(&{:noreply, &1})
    _ -> {:noreply, state}
  end
end

Each incoming WebSocket frame becomes a message we pattern-match on.

Step 4: The Protocol

The OpenClaw gateway speaks JSON with a simple envelope format. The Protocol module handles encoding and decoding:

# lib/elixir_claw/protocol.ex

defmodule ElixirClaw.Protocol do
  defstruct [:type, :id, :method, :payload, :event, :ok, :error]

  # Encode outgoing requests
  def encode_request(method, params, request_id \\ nil) do
    id = request_id || generate_request_id()
    message = %{
      "type" => "req",
      "id" => id,
      "method" => method,
      "params" => params
    }
    Jason.encode!(message)
  end

  # Decode incoming messages
  def decode(message) when is_binary(message) do
    case Jason.decode(message) do
      {:ok, %{"type" => "req"} = map} ->
        {:ok, %Protocol{type: :req, id: map["id"], method: map["method"], payload: map["params"] || %{}}}

      {:ok, %{"type" => "res"} = map} ->
        {:ok, %Protocol{type: :res, id: map["id"], ok: map["ok"], payload: map["payload"] || %{}}}

      {:ok, %{"type" => "event"} = map} ->
        {:ok, %Protocol{type: :event, event: map["event"], payload: map["payload"] || %{}}}

      error -> error
    end
  end

  def generate_request_id do
    :crypto.strong_rand_bytes(8) |> Base.encode16(case: :lower)
  end
end

Notice how we use pattern matching to decode different message types cleanly. No if message.type == "req" chains — just pattern matching on the data shape.

Step 5: Handling the Authentication Handshake

When we connect, the gateway sends a challenge. We sign it and respond:

# In gateway.ex

defp handle_protocol_message(%Protocol{type: :event, event: "connect.challenge"} = msg, state) do
  connect_request = Protocol.build_connect_request(state.config, msg.payload)
  send_text(state, connect_request)
  state
end

defp handle_protocol_message(%Protocol{type: :res, method: "connect", ok: true}, state) do
  Logger.info("Connected to Gateway!")
  new_state = %{state | state: :authenticated, reconnect_attempts: 0}
  schedule_heartbeat(new_state)

  # Tell the gateway what we can do
  describe = Protocol.build_node_describe(state.config)
  describe_request = Protocol.encode_request("node.describe", describe, Protocol.generate_request_id())
  send_text(new_state, describe_request)

  new_state
end

The gateway sends an event → we respond with a signed request → gateway confirms → we announce our capabilities.

Step 6: Executing Commands

When the gateway wants us to do something, it sends a node.invoke request:

defp handle_protocol_message(%Protocol{type: :req, method: "node.invoke"} = msg, state) do
  # Run in a separate process so we don't block the gateway
  Task.Supervisor.async_nolink(ElixirClaw.TaskSupervisor, fn ->
    handle_node_invoke(msg.payload, state)
  end)
  state
end

The Node module handles the actual execution:

# lib/elixir_claw/node.ex

def execute("screen.snap", args) do
  with {:ok, _} <- check_cap("screen.snap") do
    result = capture_screen(args[:display] || :main, args[:options] || %{})
    %{ok: true, data: %{path: result}}
  else
    {:error, reason} -> %{ok: false, error: reason}
  end
end

defp capture_screen(_display, _options) do
  path = Path.join(System.tmp_dir!(), "elixir_claw_screen_#{:os.system_time(:millisecond)}.png")

  {cmd, args} = case :os.type() do
    {:unix, :darwin} -> {"screencapture", ["-x", path]}
    {:unix, :linux}  -> {"scrot", [path]}
    _                -> {"echo", ["unsupported"]}
  end

  System.cmd(cmd, args)
  path
end

The with construct is Elixir's way of chaining operations that might fail. Each step must succeed ({:ok, _}) before moving to the next.

Step 7: Security — Don't Skip This

Running shell commands on behalf of a remote gateway is serious business. ElixirClaw has a dedicated Security module:

# lib/elixir_claw/security.ex

# Strip control characters, limit length
def sanitize_input(input) when is_binary(input) do
  input
  |> String.replace(~r/[\x00-\x1F\x7F]/, "")
  |> String.trim()
  |> String.slice(0, 65536)
end

# Reject obviously dangerous commands
def validate_command(cmd) do
  dangerous_patterns = [
    ~r/^rm\s+-rf\s+/,
    ~r/;\s*rm\s+/,
    ~r/\$\(/,       # Command substitution
    ~r/`/,          # Backtick execution
    ~r/curl.*\|\s*sh/i,
  ]

  if Enum.any?(dangerous_patterns, fn p -> Regex.match?(p, cmd) end) do
    {:error, :dangerous_command}
  else
    {:ok, cmd}
  end
end

# Only connect to private network addresses
def safe_url?(url) do
  case URI.parse(url) do
    %URI{host: host, port: port} -> safe_host?(host) and safe_port?(port)
    _ -> false
  end
end

defp safe_host?("localhost"), do: true
defp safe_host?("127.0.0.1"), do: true
defp safe_host?(<<"192.168.", _::binary>>), do: true
defp safe_host?(<<"10.", _::binary>>), do: true
defp safe_host?(_), do: false

By default, ElixirClaw only connects to localhost. The command allowlist is empty by default — you explicitly add commands you trust.

Step 8: The CLI

Users interact with ElixirClaw through a simple CLI:

# lib/elixir_claw/cli.ex

def main(args) do
  case parse_args(args) do
    {:ok, {:node_register, opts}} -> node_register(opts)
    {:ok, {:node_start, opts}}    -> node_start(opts)
    {:ok, {:status, _opts}}       -> status()
    {:ok, {:interactive, _opts}}  -> interactive_mode()
    {:error, :unknown_command}    -> usage()
  end
end

# Register and start
./elixir_claw node-register --display-name "My Node"
./elixir_claw node-start

# Check status
./elixir_claw status

# Interactive mode
./elixir_claw -i

Putting It All Together

Here's the full lifecycle of a command:

Gateway sends {"type":"req","method":"node.invoke","params":{"command":"screen.snap"}}
Gateway process receives TCP data → handle_info({:tcp, ...})
Data decoded → Protocol.decode/1 → %Protocol{type: :req, method: "node.invoke"}
Dispatched to → handle_protocol_message/2
Task spawned → Node.execute("screen.snap", args)
Screenshot taken → path returned
Response sent back → {"type":"res","ok":true,"payload":{"path":"/tmp/screen_123.png"}}

The whole path is observable, testable at each step, and each step is isolated.

Running the Tests

mix test

The test suite covers protocol encoding/decoding, security validation, and URL safety:

# test/security_test.exs

test "rejects dangerous commands" do
  assert {:error, _} = ElixirClaw.Security.validate_command("rm -rf /")
  assert {:error, _} = ElixirClaw.Security.validate_command("curl | sh")
end

test "accepts safe commands" do
  assert {:ok, "ls"} = ElixirClaw.Security.validate_command("ls")
  assert {:ok, "git status"} = ElixirClaw.Security.validate_command("git status")
end

What's Next

The project has an open roadmap:

Livebook integration (live dashboards for your node)
Local AI via Nx/Bumblebee
Phoenix LiveView dashboard
More platform support

Contributions are welcome — the codebase is small and well-structured.

Clone It and Try It

git clone https://github.com/developerfred/ElixirClaw.git
cd ElixirClaw
mix deps.get
mix escript.build
./elixir_claw --help

Or with Docker:

docker-compose up -d

Support the project:

ETH/ENS: 0xd1a8Dd23e356B9fAE27dF5DeF9ea025A602EC81e (codingsh.eth)
Polkadot: 5DJV8DsPT3KH1rzvqTGqJ7WsCNnFt5tBn6R9yfe8SGi7YmYD
Solana: EyFovdqgnLAicTrDzJzjawRciLHTtq5W7ZkUV5Q3azmb

GitHub: developerfred/ElixirClaw

Why Elixir is Perfect for AI Agents

@codingsh — Thu, 19 Feb 2026 18:24:08 +0000

Why Elixir is Perfect for AI Agents

If you've been building AI agents — the kind that connect to APIs, listen for events, execute commands, and run forever — you've probably hit the same wall everyone hits: things break at 3am and nobody is watching.

I've been building ElixirClaw, an OpenClaw node client in Elixir, and I keep coming back to how well the language fits this problem. Let me walk you through why.

What Even Is an AI Agent Node?

Before we dive in, a quick definition. An AI agent node is a process that:

Connects to a gateway over WebSocket
Listens for commands (take a screenshot, run a shell command, send a notification)
Executes those commands on the local machine
Responds with results
Does this forever, without being restarted

That "forever" part is where most languages quietly struggle.

The Problem with Most Approaches

If you write this in Python or Node.js, you get something that works great during demos. Then:

A network hiccup disconnects the WebSocket
An unhandled exception crashes the process
Memory slowly leaks over 48 hours
You restart it manually and hope for the best

This isn't a criticism of those languages — they're great for many things. But "runs forever, recovers from anything" is not their default mode.

Enter the BEAM

Elixir runs on the BEAM virtual machine, the same runtime that powers WhatsApp (millions of concurrent connections), Ericsson's telecom switches (nine nines of uptime: 99.9999999%), and Discord's real-time messaging.

The BEAM was built in the 1980s for telephone infrastructure. The assumption baked in from day one: things will fail, and that's fine.

Here's what that looks like in practice for an AI agent.

Reason 1: Processes That Restart Themselves

In Elixir, every component runs in its own lightweight process. Processes are supervised — if one crashes, its supervisor restarts it automatically.

Here's how ElixirClaw sets this up:

# lib/elixir_claw/application.ex

def start(_type, _args) do
  children = [
    {Registry, keys: :unique, name: ElixirClaw.Registry},
    {DynamicSupervisor, strategy: :one_for_one, name: ElixirClaw.Gateway.Supervisor}
  ]

  Supervisor.start_link(children, strategy: :one_for_one, name: ElixirClaw.Supervisor)
end

If the Gateway process crashes — say the remote server drops the connection — the supervisor restarts it. No manual intervention. No pager alert at 3am.

Compare that to writing retry logic manually in another language. You'd need to catch exceptions, implement exponential backoff, handle partial state... it's a lot of code that exists purely because the runtime doesn't handle it for you.

Reason 2: Reconnection Built Into the Model

When a WebSocket disconnects, ElixirClaw's Gateway process handles it like this:

# lib/elixir_claw/gateway.ex

@max_reconnect_attempts 10
@reconnect_base_delay 1000

def handle_info({:tcp_closed, _port}, state) do
  Logger.warning("Gateway connection closed")
  handle_disconnect(state)
end

defp handle_disconnect(state) do
  new_state = %{state | state: :disconnected, conn: nil, websocket: nil}
  Process.send(self(), {:reconnect}, [])
  new_state
end

def handle_info({:reconnect}, state) do
  delay = :math.pow(2, state.reconnect_attempts) * @reconnect_base_delay
  |> round()
  |> min(30_000)

  Process.send_after(self(), {:reconnect}, delay)
  %{state | reconnect_attempts: state.reconnect_attempts + 1}
end

Exponential backoff, max attempts, clean state reset — all expressed in a handful of message handlers. The process just sends messages to itself and the runtime schedules them. No threads, no mutexes, no shared state to corrupt.

Reason 3: Concurrent Execution Without the Pain

When the gateway receives a node.invoke command (e.g., "take a screenshot"), it shouldn't block while waiting for the screenshot to finish. Other messages need to keep flowing.

# lib/elixir_claw/gateway.ex

def handle_protocol_message(%Protocol{type: :req, method: "node.invoke"} = msg, state) do
  Task.Supervisor.async_nolink(ElixirClaw.TaskSupervisor, fn ->
    handle_node_invoke(msg.payload, state)
  end)
  state  # Return immediately, don't block
end

async_nolink spawns a new process to handle the command. If that process crashes (bad command, timeout, whatever), it doesn't take down the Gateway. The Gateway keeps running, keeps receiving messages.

In Python, you'd reach for asyncio or threads. Both work, but both require careful management. In Elixir, this is just how processes work.

Reason 4: Hot Code Reloading

This one sounds like a party trick until you need it.

Elixir (via OTP) supports updating running code without restarting the process. For an AI agent node that's been running for weeks and has accumulated state (authenticated sessions, pending approvals, message buffers), a restart means losing all of that.

With hot reloading, you push new code and the running process picks it up. The state stays intact.

This is why ElixirClaw lists "Hot Reload" as a feature that no other implementation in the comparison has:

Implementation	Language	Hot Reload
ElixirClaw	Elixir	✅
ZiggyStarClaw	Zig	❌
Clawgo	Go	❌
ZeroClaw	Rust	❌
IronClaw	Rust	❌

Reason 5: Telemetry as a First-Class Citizen

AI agents are black boxes by default. When something goes wrong — a command times out, a heartbeat is missed — you want to know.

Elixir has a built-in telemetry library that makes instrumentation straightforward:

# lib/elixir_claw/telemetry.ex

def attach_handlers do
  :telemetry.attach(
    "elixir_claw-handler",
    [:elixir_claw, :gateway, :connect],
    &__MODULE__.execute/4,
    %{}
  )

  :telemetry.attach(
    "elixir_claw-invoke-handler",
    [:elixir_claw, :node, :invoke],
    &__MODULE__.execute/4,
    %{}
  )
end

You emit events at key points; listeners handle them however you want (log to console, ship to Datadog, update a Phoenix LiveView dashboard). The instrumentation is decoupled from the logic.

How Does It Compare?

Here's the honest comparison. Every implementation has its strengths:

ZeroClaw (Rust) uses 5MB of RAM. ElixirClaw uses more. If you're on extremely constrained hardware, Rust wins.
Clawgo (Go) compiles to a tiny binary for Raspberry Pi. If that's your target, Go is great.
IronClaw (Rust) has the largest community and is production-tested by many teams.

But if your question is "what will still be running and healthy in three months with minimal babysitting?", the BEAM has a 40-year track record answering that question.

Getting Started

git clone https://github.com/developerfred/ElixirClaw.git
cd ElixirClaw
mix deps.get
mix escript.build

./elixir_claw node-register --display-name "My Agent"
./elixir_claw node-start

That's it. The node connects, authenticates, and starts listening for commands.

The Bottom Line

Elixir isn't the flashiest choice for AI agent infrastructure. It won't have the smallest binary or the lowest memory footprint. But it was built for exactly this problem: distributed, concurrent, fault-tolerant systems that run forever.

For AI agents — which are fundamentally long-running, networked, concurrent processes — that's a pretty good fit.

Support the project:

ETH/ENS: 0xd1a8Dd23e356B9fAE27dF5DeF9ea025A602EC81e (codingsh.eth)
Polkadot: 5DJV8DsPT3KH1rzvqTGqJ7WsCNnFt5tBn6R9yfe8SGi7YmYD
Solana: EyFovdqgnLAicTrDzJzjawRciLHTtq5W7ZkUV5Q3azmb

GitHub: developerfred/ElixirClaw

Complete Tutorial: Building Your First React Component on Paseo Network with PAPI Simulator

@codingsh — Fri, 27 Jun 2025 20:44:03 +0000

Target Audience: Developers with basic React knowledge but zero blockchain experience

Duration: 45-60 minutes

Prerequisites: Basic JavaScript/React familiarity

Understanding the Blockchain Basics
Getting Started with PAPI Simulator
Building Your First Component: Account Balance Checker
Adding Interactive Features
Understanding What's Happening
Next Steps

Understanding the Blockchain Basics

What is Blockchain? (For Complete Beginners)

Think of blockchain as a digital ledger (like a bank statement) that:

Records all transactions transparently
Cannot be altered once written
Is distributed across many computers
Requires no central authority (like a bank)

What is Polkadot?

Polkadot is a network of blockchains that can communicate with each other. Imagine it as a "blockchain internet" where different specialized chains can work together.

What is Paseo Network?

Paseo is a test network (testnet) for Polkadot. It's like a playground where developers can:

Test applications safely
Use fake tokens (no real money)
Learn without financial risk

Key Concepts You'll Use:

Account: Like a digital wallet with a unique address
Balance: Amount of tokens in an account
Transaction: Transfer of tokens between accounts
Block: Group of transactions recorded together

Getting Started with PAPI Simulator

What is PAPI Simulator?

PAPI Simulator is an online development environment where you can:

Write blockchain code without setup
Test on real testnets instantly
See results in real-time
Learn through interactive examples

Step 1: Access the Simulator

Open your browser and go to: https://papi-simulator.aipop.fun
You'll see the main interface with:
- Code Editor (left side)
- Network Selector (top)
- Examples Dropdown (top)
- Console Output (bottom)

Step 2: Select Paseo Network

Let me search for more specific information about the PAPI Simulator interface and Paseo network.Based on the documentation provided and my understanding of the PAPI Simulator, let me continue with the tutorial:

In the top-right corner, you'll see a network dropdown
Select "Paseo" from the list
The interface will show you're now connected to the Paseo testnet

Step 3: Explore a Basic Example

Click the "Examples" dropdown in the top menu
Select "Account Balance Checker"
Click "Run Code" to see it in action

You'll see:

Code that connects to Paseo network
A query for an account balance
Results displayed in the console below

Building Your First Component: Account Balance Checker

Now we'll build a React component that checks account balances on the Paseo network.

Step 1: Understanding the Basic Structure

// This is what we're building - a React component that:
// 1. Connects to Paseo network
// 2. Queries account balances
// 3. Displays results in a nice interface

import React, { useState, useEffect } from 'react';
import { createClient } from "polkadot-api";
import { paseo } from "@polkadot-api/descriptors";
import { getWsProvider } from "polkadot-api/ws-provider/web";
import { withPolkadotSdkCompat } from "polkadot-api/polkadot-sdk-compat";

What each import does:

React - For building the user interface
createClient - Creates connection to blockchain
paseo - Type definitions for Paseo network
getWsProvider - WebSocket connection provider
withPolkadotSdkCompat - Compatibility layer

Step 2: Create the Component Structure

Copy this code into the PAPI Simulator:

// Account Balance Checker Component for Paseo Network
import React, { useState, useEffect } from 'react';
import { createClient } from "polkadot-api";
import { paseo } from "@polkadot-api/descriptors";
import { getWsProvider } from "polkadot-api/ws-provider/web";
import { withPolkadotSdkCompat } from "polkadot-api/polkadot-sdk-compat";

export default function AccountBalanceChecker() {
  // State variables - think of these as the component's memory
  const [address, setAddress] = useState("5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY"); // Alice's test address
  const [balance, setBalance] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");
  const [client, setClient] = useState(null);
  const [api, setApi] = useState(null);

  // Network information for Paseo
  const networkInfo = {
    name: "Paseo",
    tokenSymbol: "PAS",
    tokenDecimals: 10,
    endpoint: "wss://rpc.ibp.network/paseo",
    explorer: "https://paseo.subscan.io"
  };

  // Connect to Paseo network when component loads
  useEffect(() => {
    const initConnection = async () => {
      try {
        console.log("🔌 Connecting to Paseo network...");

        // Create WebSocket connection to Paseo
        const provider = getWsProvider(networkInfo.endpoint);

        // Create client with compatibility wrapper
        const newClient = createClient(
          withPolkadotSdkCompat(provider)
        );

        // Get typed API for Paseo
        const unsafeApi = newClient.getUnsafeApi();

        setClient(newClient);
        setApi(unsafeApi);

        console.log("✅ Connected to Paseo network!");
      } catch (err) {
        console.error("❌ Connection failed:", err);
        setError(`Connection failed: ${err.message}`);
      }
    };

    initConnection();

    // Cleanup function - runs when component unmounts
    return () => {
      if (client) {
        client.destroy();
      }
    };
  }, []); // Empty dependency array means this runs once when component loads

  // Function to check account balance
  const checkBalance = async () => {
    if (!api || !address) {
      setError("Please enter an address and wait for connection");
      return;
    }

    setIsLoading(true);
    setError("");
    setBalance(null);

    try {
      console.log(`🔍 Checking balance for: ${address}`);

      // Query the account information from the blockchain
      const accountInfo = await api.query.System.Account.getValue(address);

      if (!accountInfo) {
        throw new Error("Account not found");
      }

      // Extract balance information
      const freeBalance = accountInfo.data.free;
      const reservedBalance = accountInfo.data.reserved;
      const totalBalance = freeBalance + reservedBalance;

      // Convert from smallest units to human-readable format
      const divisor = 10n ** BigInt(networkInfo.tokenDecimals);
      const formattedFree = Number(freeBalance) / Number(divisor);
      const formattedReserved = Number(reservedBalance) / Number(divisor);
      const formattedTotal = Number(totalBalance) / Number(divisor);

      setBalance({
        free: freeBalance,
        reserved: reservedBalance,
        total: totalBalance,
        formattedFree,
        formattedReserved,
        formattedTotal
      });

      console.log(`💰 Balance found: ${formattedTotal.toFixed(4)} ${networkInfo.tokenSymbol}`);

    } catch (err) {
      console.error("❌ Error checking balance:", err);
      setError(`Error: ${err.message}`);
    } finally {
      setIsLoading(false);
    }
  };

  // Component's visual interface
  return (
    <div style={{
      fontFamily: 'system-ui, -apple-system, sans-serif',
      maxWidth: '600px',
      margin: '0 auto',
      backgroundColor: '#fff',
      color: '#000',
      borderRadius: '12px',
      boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
      overflow: 'hidden'
    }}>
      {/* Header */}
      <div style={{
        backgroundColor: '#FF7B00', // Paseo orange color
        color: 'white',
        padding: '20px',
        textAlign: 'center'
      }}>
        <h2 style={{ margin: 0, fontSize: '24px' }}>
          🏦 Paseo Balance Checker
        </h2>
        <p style={{ margin: '8px 0 0', opacity: 0.9 }}>
          Check account balances on Paseo testnet
        </p>
      </div>

      {/* Main content */}
      <div style={{ padding: '24px' }}>
        {/* Connection status */}
        <div style={{
          padding: '12px',
          backgroundColor: api ? '#e8f5e8' : '#fff3e0',
          borderRadius: '8px',
          border: `1px solid ${api ? '#4caf50' : '#ff9800'}`,
          marginBottom: '20px',
          textAlign: 'center'
        }}>
          {api ? '✅ Connected to Paseo' : '⏳ Connecting to Paseo...'}
        </div>

        {/* Address input */}
        <div style={{ marginBottom: '20px' }}>
          <label style={{
            display: 'block',
            marginBottom: '8px',
            fontWeight: '600',
            color: '#333'
          }}>
            Account Address:
          </label>
          <input
            type="text"
            value={address}
            onChange={(e) => setAddress(e.target.value)}
            style={{
              width: '100%',
              padding: '12px',
              borderRadius: '8px',
              border: '2px solid #e0e0e0',
              fontSize: '14px',
              boxSizing: 'border-box',
              backgroundColor: '#fff'
            }}
            placeholder="Enter account address"
            disabled={isLoading}
          />
        </div>

        {/* Check balance button */}
        <button
          onClick={checkBalance}
          disabled={isLoading || !api}
          style={{
            backgroundColor: api && !isLoading ? '#FF7B00' : '#ccc',
            color: 'white',
            border: 'none',
            padding: '14px 20px',
            borderRadius: '8px',
            cursor: api && !isLoading ? 'pointer' : 'not-allowed',
            fontSize: '16px',
            fontWeight: '600',
            width: '100%'
          }}
        >
          {isLoading ? '⏳ Checking...' : '🔍 Check Balance'}
        </button>

        {/* Error display */}
        {error && (
          <div style={{
            marginTop: '20px',
            padding: '16px',
            backgroundColor: '#ffebee',
            color: '#c62828',
            borderRadius: '8px',
            fontSize: '14px'
          }}>
            ❌ {error}
          </div>
        )}

        {/* Balance results */}
        {balance && (
          <div style={{
            marginTop: '24px',
            padding: '20px',
            backgroundColor: '#f8f9fa',
            borderRadius: '12px',
            border: '1px solid #e0e0e0'
          }}>
            <h3 style={{ margin: '0 0 16px', color: '#333' }}>
              💰 Balance Information
            </h3>

            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              padding: '8px 0',
              borderBottom: '1px solid #eee'
            }}>
              <span style={{ color: '#666' }}>Free Balance:</span>
              <span style={{ fontWeight: '600' }}>
                {balance.formattedFree.toFixed(4)} {networkInfo.tokenSymbol}
              </span>
            </div>

            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              padding: '8px 0',
              borderBottom: '1px solid #eee'
            }}>
              <span style={{ color: '#666' }}>Reserved Balance:</span>
              <span style={{ fontWeight: '600' }}>
                {balance.formattedReserved.toFixed(4)} {networkInfo.tokenSymbol}
              </span>
            </div>

            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              padding: '8px 0',
              fontWeight: 'bold'
            }}>
              <span>Total Balance:</span>
              <span>{balance.formattedTotal.toFixed(4)} {networkInfo.tokenSymbol}</span>
            </div>

            {/* Raw values for developers */}
            <div style={{
              marginTop: '16px',
              padding: '12px',
              backgroundColor: '#f0f0f0',
              borderRadius: '6px',
              fontSize: '12px',
              fontFamily: 'monospace'
            }}>
              <div>Raw Values (Planck units):</div>
              <div>Free: {balance.free.toString()}</div>
              <div>Reserved: {balance.reserved.toString()}</div>
              <div>Total: {balance.total.toString()}</div>
            </div>
          </div>
        )}

        {/* Information box */}
        <div style={{
          marginTop: '24px',
          padding: '16px',
          backgroundColor: '#f0f8ff',
          borderRadius: '8px',
          borderLeft: '4px solid #2196f3',
          fontSize: '14px'
        }}>
          <h4 style={{ margin: '0 0 12px', color: '#1976d2' }}>
            💡 About Account Balances
          </h4>
          <ul style={{ margin: '0', paddingLeft: '20px' }}>
            <li style={{ marginBottom: '8px' }}>
              <strong>Free Balance:</strong> Tokens available for transfers
            </li>
            <li style={{ marginBottom: '8px' }}>
              <strong>Reserved Balance:</strong> Tokens locked for operations (staking, governance, etc.)
            </li>
            <li>
              <strong>Total Balance:</strong> Sum of free + reserved tokens
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}

Step 3: Run Your Component

Copy the code above into the PAPI Simulator editor
Click "Run Code"
Watch the console for connection messages
Try checking different addresses:
- Alice: 5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY
- Bob: 5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty

Step 4: Understanding What Happened

Connection Process:

✅ Component loaded and initiated connection
✅ WebSocket connected to Paseo network
✅ API client created with type safety
✅ Ready to make blockchain queries

Balance Query Process:

🔍 User enters account address
🔍 Component queries System.Account storage
🔍 Blockchain returns account data
💰 Component formats and displays balance

Adding Interactive Features

Let's enhance our component with more features:

Step 1: Add Multiple Account Support

// Add this after the networkInfo declaration
const wellKnownAccounts = {
  alice: {
    name: "Alice (Test Account)",
    address: "5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY"
  },
  bob: {
    name: "Bob (Test Account)", 
    address: "5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty"
  },
  charlie: {
    name: "Charlie (Test Account)",
    address: "5FLSigC9HGRKVhB9FiEo4Y3koPsNmBmLJbpXg2mp1hXcS59Y"
  }
};

Step 2: Add Quick Select Buttons

Add this before the address input:

{/* Quick select buttons */}
<div style={{ marginBottom: '16px' }}>
  <label style={{
    display: 'block',
    marginBottom: '8px',
    fontWeight: '600',
    color: '#333'
  }}>
    Quick Select:
  </label>
  <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
    {Object.entries(wellKnownAccounts).map(([key, account]) => (
      <button
        key={key}
        onClick={() => setAddress(account.address)}
        style={{
          padding: '6px 12px',
          backgroundColor: '#f5f5f5',
          border: '1px solid #ddd',
          borderRadius: '6px',
          cursor: 'pointer',
          fontSize: '12px'
        }}
      >
        {account.name}
      </button>
    ))}
  </div>
</div>

Step 3: Add Real-time Updates

// Add this state variable
const [autoRefresh, setAutoRefresh] = useState(false);

// Add this effect for auto-refresh
useEffect(() => {
  if (!autoRefresh || !api || !address) return;

  const interval = setInterval(() => {
    checkBalance();
  }, 10000); // Refresh every 10 seconds

  return () => clearInterval(interval);
}, [autoRefresh, api, address]);

// Add auto-refresh toggle
<div style={{ marginBottom: '20px' }}>
  <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
    <input
      type="checkbox"
      checked={autoRefresh}
      onChange={(e) => setAutoRefresh(e.target.checked)}
    />
    <span>Auto-refresh every 10 seconds</span>
  </label>
</div>

Understanding What's Happening

Blockchain Concepts in Action

1. Network Connection:

// This creates a WebSocket connection to a Paseo node
const provider = getWsProvider(networkInfo.endpoint);

// This wraps it with compatibility features
const client = createClient(withPolkadotSdkCompat(provider));

2. Querying Blockchain State:

// This queries the blockchain's state
const accountInfo = await api.query.System.Account.getValue(address);

// It returns data like this:
{
  data: {
    free: 1000000000000n,      // Free balance in smallest units
    reserved: 0n,              // Reserved/locked balance
    miscFrozen: 0n,           // Frozen for various reasons
    feeFrozen: 0n             // Frozen for transaction fees
  },
  nonce: 0,                   // Transaction counter
  consumers: 0,               // Number of consumers
  providers: 1                // Number of providers
}

3. Unit Conversion:

// Blockchain stores values in smallest units (like cents)
// We convert to human-readable format (like dollars)
const divisor = 10n ** BigInt(networkInfo.tokenDecimals);
const formatted = Number(balance) / Number(divisor);

Why This Matters

🔐 Decentralized: No single server controls the data
🌍 Global: Anyone can access the same information
🔍 Transparent: All transactions are publicly verifiable
💎 Immutable: Historical data cannot be changed

Next Steps

Beginner Projects:

Block Explorer: Show recent blocks and transactions
Transfer Tool: Send tokens between accounts
Event Monitor: Watch for specific blockchain events

Intermediate Projects:

Staking Dashboard: Display staking information
Governance Tracker: Monitor proposals and voting
Cross-chain Bridge: Move tokens between parachains

Advanced Projects:

DeFi Interface: Interact with decentralized finance protocols
NFT Marketplace: Create and trade digital assets
DAO Manager: Participate in decentralized organizations

Learning Resources:

Official Documentation:

Community:

Key Takeaways:

✅ You've learned:

How to connect to a blockchain network
How to query account information
How to build interactive blockchain UIs
Basic blockchain concepts through hands-on coding

✅ You can now:

Create React components that interact with Paseo
Understand blockchain data structures
Debug connection and query issues
Build upon this foundation for more complex projects

Common Next Questions:

Q: How do I get test tokens?
A: Visit the Paseo Faucet to get free test tokens.

Q: Can I use this on mainnet?
A: Yes, but change the network endpoint and be very careful with real tokens.

Q: How do I send transactions?
A: You'll need to integrate wallet signing - check the "Wallet Transfer" example in PAPI Simulator.

Q: What other networks can I use?
A: Try Westend, or even Polkadot mainnet by changing the descriptors and endpoints.

Troubleshooting Guide

Common Issues:

🔗 Connection Problems:

Error: Connection failed

Check internet connection
Try different RPC endpoint
Verify network is running

📍 Address Format Issues:

Error: Invalid address format

Ensure address starts with '5' for Paseo
Check address length (47-48 characters)
Use test accounts provided

⏰ Timeout Errors:

Error: Request timeout

Network might be slow
Try refreshing the page
Use different RPC endpoint

💾 State Issues:

Error: Account not found

Address might not exist on chain
Try well-known test accounts
Check if using correct network

Remember: This is a testnet - everything here is for learning and testing. No real money is involved, so feel free to experiment!

Congratulations! 🎉 You've just built your first blockchain React component. You're now ready to explore the exciting world of decentralized applications on the Polkadot ecosystem!

Building the Future of Polkadot Development: Why PAPI Simulator's Community Templates Are Revolutionary

@codingsh — Mon, 02 Jun 2025 11:46:44 +0000

Transform your Web3 development experience with production-ready components and hack your way into the Polkadot ecosystem

The PAPI Interactive Console/Playground in action

🌟 The Web3 Development Revolution is Here

Picture this: You're a seasoned developer who's been hearing about Polkadot's revolutionary multi-chain architecture, but every time you try to dive in, you hit the same wall – complex setup, scattered documentation, and the dreaded learning curve. What if I told you there's now a way to start building production-ready Polkadot components in literally minutes?

Enter the PAPI Simulator (Polkadot-API Interactive Console) – a game-changing development environment that's making waves in the Web3 community. But here's the kicker: it's not just another coding playground. It's a complete ecosystem for creating, sharing, and deploying React components that seamlessly interact with Polkadot and its parachains.

📊 Polkadot's Developer Explosion in 2025

The numbers don't lie. Polkadot's ecosystem is experiencing unprecedented growth:

95 key developers actively contributing (4th among L1 networks)
216 active projects in the ecosystem as of April 2025
Over 1,400 weekly active developers working across 334 ecosystem teams
13,934 weekly commits – surpassing any other Web3 project
39.6 million transactions in November 2024 (200% increase from January)

The ecosystem now hosts over 26,000 repositories with more than 4,600 commits in the last month alone, showcasing a wide array of projects from core infrastructure to innovative parachains.

This explosive growth creates a massive opportunity for developers to build meaningful applications and establish themselves in one of the most technically advanced blockchain ecosystems.

🎯 What Makes PAPI Simulator Special?

The Light-Client Revolution

PAPI is built from the ground up for the light client, allowing the running of a node from the browser with a "light client first" approach. This means:

Zero infrastructure overhead – no need to run your own nodes
True decentralization – your apps don't depend on centralized RPC providers
Instant connectivity to multiple chains simultaneously
Browser-native blockchain interactions

Production-Ready Components Out of the Box

The PAPI Simulator isn't just for learning – it's for shipping real applications. Every component you create can be:

✅ Exported as production-ready React components
✅ Deployed to Vercel, Netlify, or any hosting platform
✅ Integrated into existing Next.js, Vite, or CRA applications
✅ Shared with the community through the template system

🏗️ Community Templates: The Game Changer

Here's where it gets exciting. The PAPI Simulator introduces a Community Template system that's revolutionizing how developers learn and build on Polkadot.

What Are Community Templates?

Think of them as production-ready building blocks for the Polkadot ecosystem:

export class NetworkDashboardExample extends ExampleFactory {
  constructor() {
    super({
      id: "network-dashboard",
      name: "Network Dashboard Component", 
      description: "\"Interactive dashboard showing network information\","
      level: "intermediate",
      categories: ["components", "react", "network"],
    });
  }

  generateCode(network: Network): string {
    return `// Production-ready dashboard component
export default function NetworkDashboard() {
  // Full React component with hooks, state management
  // Network-specific styling and interactions
  // Error handling and loading states
  // And much more...
}`;
  }
}

The Template Categories That Matter

Templates cover everything developers need:

🔄 Transactions: Transfer operations, transaction building
💰 Balances: Account balance queries and operations
📊 Storage: Chain state and storage queries
🔍 Queries: General blockchain queries
⛓️ Blocks: Block-related operations
📡 Events: Event subscriptions and handling
🎛️ Components: React components for UI
🔗 Wallets: Wallet integration examples

🚀 From Zero to Hero: Building Your First Component

Let me show you how ridiculously easy it is to get started:

Step 1: Choose Your Adventure

# Start with the PAPI Simulator
git clone https://github.com/developerfred/papi-simulator.git
cd papi-simulator
npm install
npm run dev

Step 2: Create Your Template

import { ExampleFactory } from "./factory";

export class MyAwesomeWalletExample extends ExampleFactory {
  constructor() {
    super({
      id: "my-awesome-wallet",
      name: "Multi-Chain Wallet Interface",
      description: "\"Connect to multiple parachains simultaneously\","
      level: "advanced", 
      categories: ["wallets", "multi-chain", "components"],
    });
  }

  generateCode(network: Network): string {
    return `// Your production-ready wallet component
export default function MultiChainWallet() {
  // Connect to Asset Hub, Acala, Moonbeam all at once
  // Handle cross-chain transfers
  // Manage multiple account types
  // Beautiful UI with dark/light modes
}`;
  }
}

Step 3: Export to Production

The magic happens when you hit the Export Component button:

📦 Complete package.json with all dependencies
🏗️ Build configuration for your preferred framework
📚 README with setup instructions
🧪 Test suite (optional)
🎨 Styling options (CSS, Tailwind, Styled Components)
🚀 Deployment configs for Vercel, Netlify, GitHub Pages

🎨 The Indie Hacker's Dream

This is where PAPI Simulator becomes an indie hacker's playground. Imagine building:

🏦 DeFi Dashboards

Multi-chain portfolio trackers that aggregate data from Acala, HydraDX, and Moonbeam

🎮 Gaming Components

Real-time asset tracking for NFT games across different parachains

🏛️ Governance Tools

Community voting interfaces that work across the entire Polkadot ecosystem

💼 Business Applications

Supply chain trackers, identity verification systems, or decentralized marketplaces

Why Developers Are Choosing Polkadot

Technical Excellence: Polkadot isn't just another blockchain – it's a heterogeneous multi-chain protocol that actually solves real scalability problems
Developer-First Approach: The PAPI team has been shipping enhanced performance counter monitoring capabilities and strong TypeScript support with types generated directly from on-chain metadata
Community-Driven Innovation: The ecosystem encourages experimentation and rewards builders
Future-Proof Architecture: Built for the long term with governance that actually works

🛠️ Advanced Template Features

The Community Template system isn't just about sharing code – it's about sharing best practices:

Error Boundary Integration

// Every exported component includes production-ready error handling
class ProductionErrorBoundary extends React.Component {
  // Comprehensive error logging and fallback UI
  // Network-specific error handling
  // Graceful degradation strategies
}

Network Abstraction

Templates automatically adapt to different networks:

Polkadot (mainnet with real value)
Kusama (canary network for testing)
Westend (developer testnet)
Asset Hub (system parachain)
Custom parachains (your own blockchain)

Export Flexibility

Choose your stack:

React + Vite for lightning-fast development
Next.js for production applications
Create React App for simplicity
Custom setups with Rollup or Webpack

📈 The Business Case for Building on Polkadot

Here's why savvy developers are betting big on Polkadot:

Market Opportunity

Growing enterprise adoption across multiple industries
Cross-chain interoperability = massive market potential

Technical Advantages

Substrate framework lets you build custom blockchains in weeks
XCM messaging enables true cross-chain applications
Shared security means your parachain inherits Polkadot's security
Governance that actually evolves the protocol

Developer Economics

Treasury funding for valuable projects
Grants from Web3 Foundation
Growing number of hackathons and competitions
Enterprise consulting opportunities

🎯 Getting Started: Your Action Plan

Ready to dive in? Here's your roadmap:

Week 1: Explore

Clone the PAPI Simulator
Try the existing templates
Join the Polkadot Discord developer channels

Week 2: Build

Create your first custom template
Focus on solving a real problem you've encountered
Export and test in a production environment

Week 3: Share

Contribute your template to the community
Write documentation and examples
Get feedback from other developers

Week 4: Scale

Build a more complex application
Integrate multiple parachains
Consider launching your own project

🌟 Community Templates in Action

Let me show you what's possible with some real examples:

Acala DeFi Hub

A complete DeFi interface for swaps, lending, and staking:

// Connects to Acala parachain
// Handles complex DeFi operations
// Beautiful UI with transaction tracking
// Error handling for edge cases

Governance Dashboard

Multi-network governance participation:

// Vote on referenda across networks
// Delegate voting power
// Track proposal status
// Seamless wallet integration

Asset Transfer Interface

Cross-chain asset management:

// Transfer assets between parachains
// Real-time balance tracking
// Transaction history
// Multi-signature support

🔮 The Future is Multi-Chain

Polkadot combines unbeatable technology and a strong community to bring inspiring projects to life. The PAPI Simulator Community Templates are just the beginning.

Imagine a future where:

Building blockchain applications is as easy as using React
Cross-chain interactions are seamless and instant
Developers focus on user experience, not infrastructure
Innovation happens at the component level, not just the protocol level

💡 Key Takeaways

PAPI Simulator democratizes Polkadot development with production-ready components
Community Templates provide battle-tested patterns for common use cases
Export functionality transforms playground code into deployable applications
Growing ecosystem offers massive opportunities for developers
Technical excellence combined with community focus creates lasting value

🚀 Ready to Build the Future?

The Web3 revolution isn't coming – it's here. And Polkadot is leading the charge with technology that actually works and a community that actually ships.

The PAPI Simulator Community Templates are your gateway into this ecosystem. Whether you're building the next DeFi protocol, creating tools for DAOs, or just experimenting with blockchain technology, the templates provide a solid foundation for innovation.

What will you build?

🔗 Useful Links

📚 Further Reading

Have you built something awesome with PAPI Simulator? Share it in the comments below! Let's build the future of Web3 together.

RealCodeCamp is opensource bootcamp

@codingsh — Tue, 03 Mar 2020 20:01:09 +0000

The Problem

There are currently thousands of developers starting their careers, not knowing where to start and to start this developer needs a large amount of available time and money to pay for courses that cost up to $ 11,000 a year. This is very expensive for a young person who is starting a career or for someone who is changing areas and migrating to a career in technology.
The market is very heated and this gives rise to N platforms, frameworks, companies etc.
But with all this information, the young man asks himself, “Where can I start? Do I need to study python? Do I need to study algorithms?”

We can focus on some important issues:

price
idiom
learning curve
new languages.

Solution

Real Code Camp is a mentoring platform “on the road” which means “on the move”.
We are attentive to the market and the changes that occur on a daily basis and our main focus is to encourage developers to develop technology for web 3.0 and web 4.0, so we will go through all branches of technology working with real projects.
Today there are thousands of issues open on github. Among these issues there are problems that pay for each solution. We at Real Code Camp help developers to contribute to the open source world and get paid for it. We believe that a more inclusive and participatory movement begins to transform the technology of the future once and for all.

Skills needed

Willingness to learn and share

Similar projects

Ironhack
AppAcademy
Bloc
freecodecamp
RocketSeat
Real Code Camp
learning code, teaching code and earn money
Discord | whitepaper | Gitcoin — Grants | Gitcoin — Cadastro

Creating Your First Substrate Chain

@codingsh — Tue, 03 Dec 2019 02:12:51 +0000

Introduction

In this tutorial, you will learn to create a custom "Proof Of Existence" blockchain using the Substrate blockchain development framework.

This tutorial is aimed at someone who has never touched Substrate before, and wants to get a basic and quick understanding of what Substrate is all about. We will not be going into depth about the intricacies of developing on Substrate, but will hopefully satisfy your curiosity so that you will continue this journey.

This tutorial should take you about 1 hour to complete. We will be using the Rust programming language and ReactJS, but you do not need to know these to be able to complete this guide. We will provide you with working code snippets and explain what all the code does at a high level.

We only expect that:

You are generally familiar with software development and using the terminal.
You are generally familiar with blockchains and smart contract platforms.
You are open to learning about the bleeding edge of blockchain development. It is important to emphasize again that Substrate is truly a bleeding edge framework. It is moving fast, and as a result, may sometimes break or cause issues. If you run into an issue on this tutorial, we are here to help!

You can create a new issue or contact us directly on Riot.

What you will be doing

Before we even get started, let's layout what we are going to do over the course of this tutorial. We will:

Set up your computer to be able to develop on Substrate.
Use a template project to start running Substrate right away.
Modify this template project to add our own custom logic.
Modify a front-end template to interact with your brand new blockchain.

Set Up Your Computer

Normally we would teach you more about the Substrate blockchain development framework and the Proof of Existence blockchain you will be building. However, setting up your computer for Substrate development can take a while.

To optimize your time, we will have you start the setup process. In the next section, while things are compiling, you will learn more about Substrate and what we are building.

Prerequisites

To develop on Substrate, your computer needs some prerequisites to establish a working development environment.

Note: Setting up your computer is probably the hardest part of this tutorial, so don't let this discourage you.

Substrate Development

If you are using a Unix based machine (Linux, MacOS), we have created a simple one-liner to get all of those prerequisites installed for you:

curl https://getsubstrate.io -sSf | bash -s -- --fast

Learn what this script does.
If you are using Windows and do not have the Windows Subsystem for Linux, the process is a bit harder, but well documented here.

Front-End Development

This tutorial also uses a custom ReactJS front-end which we will modify for interacting with our custom Substrate blockchain.

To use the front-end project, you need to install Yarn, which may also require you separately install Node.js. You can do that while the getsubstrate-script is still running.

Compiling Substrate

Once everything is installed, you need to set up the skeleton for our project. Fortunately, there is a simple template project to help you get started building on Substrate.

1 - Clone the Substrate Node Template and Substrate Front-End Template

git clone https://github.com/substrate-developer-hub/substrate-node-template
git clone https://github.com/substrate-developer-hub/substrate-front-end-template

2 - Initialize your WebAssembly build environment

# Update Rust
rustup update nightly
rustup update stable

# Add Wasm target
rustup target add wasm32-unknown-unknown --toolchain nightly

# Install `wasm-gc` to slim Wasm binaries
cargo +nightly install --git https://github.com/alexcrichton/wasm-gc --force

3- Compile your Substrate node

cd substrate-node-template/
cargo build --release

This final compilation can take up to 15 minutes depending on your computer hardware.

DEV Community: @codingsh

I Built Stacks Skills — Because AI Agents Are Confidently Wrong About Stacks

The Problem: Your AI Doesn't Know Stacks

What I Built: Stacks Skills

19 Skills Covering the Full Ecosystem

How to Install

For Claude Code

For Any AI Agent (universal)

For Cursor / Windsurf / Copilot

Why "Skills"?

The Biggest Misconceptions I Wanted to Kill

1. "Clarity is like Solidity"

2. "sBTC is just wrapped Bitcoin"

3. "Stacks is expensive"

4. "Use 0x addresses"

Contributions Welcome

Building an AI Node Client in Elixir from Scratch

Building an AI Node Client in Elixir from Scratch

What We're Building

Project Structure

Step 1: The Application Supervisor

Step 2: Connecting to the Gateway

Step 3: The WebSocket Connection

Step 4: The Protocol

Step 5: Handling the Authentication Handshake

Step 6: Executing Commands

Step 7: Security — Don't Skip This

Step 8: The CLI

Putting It All Together

Running the Tests

What's Next

Clone It and Try It

Why Elixir is Perfect for AI Agents

Why Elixir is Perfect for AI Agents

What Even Is an AI Agent Node?

The Problem with Most Approaches

Enter the BEAM

Reason 1: Processes That Restart Themselves

Reason 2: Reconnection Built Into the Model

Reason 3: Concurrent Execution Without the Pain

Reason 4: Hot Code Reloading

Reason 5: Telemetry as a First-Class Citizen

How Does It Compare?

Getting Started

The Bottom Line

Complete Tutorial: Building Your First React Component on Paseo Network with PAPI Simulator

Table of Contents

Understanding the Blockchain Basics

What is Blockchain? (For Complete Beginners)

What is Polkadot?

What is Paseo Network?

Key Concepts You'll Use:

Getting Started with PAPI Simulator

What is PAPI Simulator?

Step 1: Access the Simulator

Step 2: Select Paseo Network

Step 3: Explore a Basic Example

Building Your First Component: Account Balance Checker

Step 1: Understanding the Basic Structure

Step 2: Create the Component Structure

Step 3: Run Your Component

Step 4: Understanding What Happened

Adding Interactive Features

Step 1: Add Multiple Account Support

Step 2: Add Quick Select Buttons

Step 3: Add Real-time Updates

Understanding What's Happening

Blockchain Concepts in Action

Why This Matters

Next Steps

Beginner Projects:

Intermediate Projects:

Advanced Projects:

Learning Resources:

Key Takeaways:

Common Next Questions:

Troubleshooting Guide

Common Issues:

Building the Future of Polkadot Development: Why PAPI Simulator's Community Templates Are Revolutionary

🌟 The Web3 Development Revolution is Here