Spark Program | CKB NFT Marketplace - On-Chain Digital Object Trading Platform

DAOs & Funding CKB Community Fund DAO
1

Project Name: CKB NFT Marketplace

One-Sentence Summary: A fully on-chain NFT marketplace built on Nervos CKB using Spore Protocol, enabling users to mint, list, buy, and sell digital objects with atomic swap transactions.

Project Type: DApp (Decentralized Application)

2. Team Profile

Core Members:

Brian Orwe
  • - Full-Stack Developer & Project Lead

Background:

  • Blockchain developer with experience in web3 application development

  • Proficient in TypeScript, React, Next.js, and blockchain SDK integration

  • Familiar with CKB’s Cell Model, Spore Protocol, and CCC SDK

  • GitHub: Brian OrweBorwe

Contact Information:

  • Discord: brianorwe@47

  • X: @BrianOrwe

3. Project Background

Background Description:

The CKB ecosystem has a powerful on-chain NFT standard (Spore Protocol) but lacks accessible marketplace infrastructure for everyday users. While Spore Protocol provides secure, efficient, and flexible creation and transfer of digital objects, there is no user-friendly interface that allows non-technical users to easily mint, discover, and trade Spores.

Scenario-Based:

Consider a digital artist who wants to sell their artwork as an NFT on CKB. Currently, they would need to:

  1. Understand CKB’s Cell Model and transaction structure

  2. Write custom code using Spore SDK to create a Spore cell

  3. Manually construct marketplace listing transactions

  4. Handle all the complexity of atomic swaps for buyers

This technical barrier prevents mainstream adoption. Most potential users simply give up and use centralized alternatives instead.

Ecosystem Relevance:

This problem directly impacts the CKB ecosystem’s growth because:

  • NFT marketplaces drive user adoption and engagement

  • On-chain trading volume increases CKBytes utilization

  • A working marketplace showcases CKB’s technical advantages (on-chain storage, zero-fee transfers, intrinsic value backing)

4. Solution

Core Solution:

CKB NFT Marketplace provides a complete, user-friendly web interface that abstracts away all blockchain complexity. Users can:

  • Connect Wallet - Support for MetaMask and JoyID through CCC SDK

  • Mint NFTs - Upload any digital content (images, videos, audio, text) and store it 100% on-chain as a Spore

  • List for Sale - Set a price in CKB and create a marketplace order

  • Buy NFTs - One-click purchase using atomic swap transactions

  • View Collection - Browse owned NFTs and track their value

User Perspective:

End users interact with the marketplace through a modern web interface. They connect their existing wallet (MetaMask), upload content, and click buttons to perform transactions. The marketplace handles all the complexity of:

  • Calculating required CKBytes for storage

  • Constructing proper Spore cells

  • Building marketplace order cells

  • Executing atomic swap transactions

Differentiation:

Unlike existing solutions:

  • Fully On-Chain - Content is stored directly on CKB, not IPFS or centralized servers

  • Zero-Fee Transfers - Spore Protocol enables free transfers with pre-funded capacity margins

  • Intrinsic Value - Spores are backed by CKBytes and can be melted back at any time

  • True Ownership - Each NFT is a unique Cell that the owner fully controls

5. Technical Approach

Tech Stack:

Layer Technology
Frontend Next.js 14, React 18, TypeScript
Styling Tailwind CSS
Blockchain SDK CCC SDK (@ckb-ccc/core, @ckb-ccc/connector-react)
NFT Standard Spore Protocol (@spore-sdk/core)
Network CKB Testnet (configurable for Mainnet)
Deployment Vercel (static hosting)

Architecture Overview:

┌─────────────────────────────────────────────────────────┐
│                    User Browser                          │
├─────────────────────────────────────────────────────────┤
│                    Next.js Frontend                      │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌─────────┐ │
│  │   Home   │  │   Mint   │  │ Profile  │  │ NFT     │ │
│  │  (Browse)│  │  (Create)│  │ (My NFTs)│  │ Detail  │ │
│  └──────────┘  └──────────┘  └──────────┘  └─────────┘ │
├─────────────────────────────────────────────────────────┤
│                    CCC SDK Layer                         │
│  ┌──────────────┐  ┌──────────────┐  ┌───────────────┐ │
│  │   Wallet     │  │  Transaction │  │    Spore      │ │
│  │  Connector   │  │   Builder    │  │   Protocol    │ │
│  └──────────────┘  └──────────────┘  └───────────────┘ │
├─────────────────────────────────────────────────────────┤
│                    CKB Testnet                           │
│  ┌──────────────┐  ┌──────────────┐  ┌───────────────┐ │
│  │  Spore Cells │  │ Order Cells  │  │   Indexer     │ │
│  │   (NFTs)     │  │ (Listings)   │  │   (Query)     │ │
│  └──────────────┘  └──────────────┘  └───────────────┘ │
└─────────────────────────────────────────────────────────┘

Core Modules:

  1. Wallet Module (components/ConnectButton.tsx)

    • CCC Provider integration

    • Multi-wallet support (MetaMask, JoyID)

    • Address display and balance tracking

  2. Spore Module (lib/spore.ts)

    • Content encoding/decoding

    • Spore cell creation

    • Transaction construction for mint/list/buy

  3. Indexer Module (lib/indexer.ts)

    • Active listings query

    • Owned NFTs query

    • Cell data decoding

  4. UI Components (components/)

    • SporeViewer - Multi-format content renderer

    • NftCard - Grid display with price

    • MintForm - Upload and mint workflow

Key Technical Challenges:

  1. CCC SDK API Evolution - The CCC SDK is actively developed with breaking changes between versions. Solution: Pin specific versions and document API surface used.

  2. Async Generator Handling - CCC’s findCells() returns an AsyncGenerator, not an array. Solution: Use for await...of loops for iteration.

  3. TypeScript Strictness - Modern TypeScript strict typing with ArrayBuffer/Uint8Array. Solution: Explicit type assertions where needed.

  4. On-Chain Storage Limits - Spore cells have a 500KB content limit. Solution: Clear error messaging and content size validation.

6. To-Do List

Week 1: Foundation & Core Infrastructure

  • Initialize Next.js project with TypeScript

  • Install and configure CCC SDK

  • Set up wallet connection (MetaMask support)

  • Create CKB Testnet client configuration

  • Build basic layout and navigation

  • Implement ConnectButton component

  • Milestone: Wallet connection working

Week 2: Spore Protocol Integration

  • Implement Spore content encoding/decoding

  • Build mint transaction builder

  • Create file upload and preview UI

  • Implement mint flow with wallet signing

  • Add transaction hash display

  • Test on CKB Testnet

  • Milestone: NFT minting working

Week 3: Marketplace Features

  • Implement order cell creation (listing)

  • Build buy transaction with atomic swap

  • Create indexer for active listings

  • Build NFT grid display with prices

  • Implement NFT detail page

  • Add buy and list UI components

  • Milestone: Buy/sell flow working

Week 4: Polish & Launch

  • Build “My Collection” page

  • Add loading states and error handling

  • Responsive design optimization

  • Deploy to Vercel

  • Write documentation

  • Test full user flow end-to-end

  • Milestone: MVP live on Testnet

7. Required Funding & Funding Breakdown

A. Required Funding

Total Amount Requested: $1,500 USD

B. Funding Breakdown

Category Amount Description
Development $400 Core marketplace development (4 weeks)
Testing $300 Testnet CKB acquisition, end-to-end testing
Infrastructure $300 Domain registration, Vercel deployment
Documentation $250 Technical docs, user guides, API reference
Marketing $250 Community outreach, demo content, launch promotion
Total $1,500

Justification:

This is a single-category technical development project. The $1,500 budget covers:

  • Development time for a complete MVP with 4 pages and 3 core features

  • Infrastructure costs for testnet deployment and domain

  • Marketing to drive initial user adoption

The project scope is well-defined and achievable within the standard Spark budget. The marketplace uses existing CKB infrastructure (Spore Protocol, CCC SDK) without requiring custom smart contract development, keeping the complexity manageable.

8. Deliverables and How to Verify

A. Deliverables

# Deliverable Acceptance Criteria Format
1 GitHub Repository All source code, configs, and docs Brian OrweBorwe
2 Deployed Application Working marketplace on CKB Testnet Vercel app (URL)
3 Mint Functionality Users can upload content and mint Spore NFTs Working demo
4 List for Sale Users can list NFTs with CKB price Working demo
5 Buy Functionality Users can purchase listed NFTs via atomic swap Working demo
6 My Collection Users can view their owned NFTs Working demo
7 Documentation Setup guide, architecture docs README.md, docs/

B. How to Verify

Verification Steps:

  1. Repository Verification

    • Check: All source files present, README complete

    • Command: git clone && npm install && npm run build

  2. Minting Verification

    • Connect MetaMask wallet to CKB Testnet

    • Navigate to /mint page

    • Upload an image file

    • Click “Mint NFT”

    • Approve transaction in MetaMask

    • Expected: Transaction hash displayed, link to testnet explorer

  3. Listing Verification

    • Navigate to NFT detail page (/nft/[id])

    • Enter price in CKB input field

    • Click “List”

    • Expected: Transaction hash, NFT appears in browse page

  4. Purchase Verification

    • Connect different wallet

    • Find listed NFT in browse page

    • Click “Buy Now”

    • Expected: NFT transfers to buyer wallet, seller receives CKB

Non-Code-Review Verification:

Yes - all verification can be completed through browser interaction and transaction hashes on the testnet explorer. No code review required.

Environment Requirements:

  • Modern web browser (Chrome, Firefox, Edge)

  • MetaMask extension installed

  • CKB Testnet configured in MetaMask

  • Testnet CKB for gas fees

Cost Control: Verification requires only a web browser and testnet CKB (free from faucet). Total verification time: ~15 minutes.

9. Current State vs. Funded Work

Current State (Completed):

  • Next.js project initialized and configured

  • CCC SDK integrated with wallet connection

  • Spore Protocol integration for minting

  • Mint page with file upload and on-chain storage

  • NFT detail page with buy and list functionality

  • My Collection page for viewing owned NFTs

  • Dark theme responsive UI

  • All components passing TypeScript compilation

  • Build successful (verified with npm run build)

  • Repository pushed to GitHub

Funded Work (During Spark Period):

  • End-to-end testing on CKB Testnet with real transactions

  • Deploy to Vercel with custom domain

  • Create demo video showing full user flow

  • Write comprehensive documentation

  • Community outreach and launch announcement

  • Gather user feedback and iterate

  • Apply for Mainnet deployment if successful

Clear Boundaries:

The current state includes a complete, working MVP. The funded work focuses on:

  1. Testing - Verifying all features work with real blockchain transactions

  2. Deployment - Making the application publicly accessible

  3. Documentation - Enabling others to understand and contribute

  4. Marketing - Driving initial user adoption

10. CKB Alignment

Connection Points:

This project directly leverages CKB’s unique technical features:

  1. Cell Model - Each NFT is a unique Cell with its own outpoint, enabling true ownership and independent transfer

  2. Spore Protocol - The on-chain NFT standard that provides:

    • Content stored directly on-chain (not IPFS)

    • Intrinsic value backed by CKBytes

    • Zero-fee transfers via capacity margins

    • Privacy through independent cell addresses

  3. CCC SDK - The official JavaScript/TypeScript SDK for CKB development, used for:

    • Wallet connection (MetaMask, JoyID)

    • Transaction composition

    • RPC communication with CKB nodes

  4. CKB-VM Compatibility - While not directly using smart contracts, the marketplace leverages CKB’s RISC-V VM through Spore’s pre-deployed type scripts

Specific Design:

The marketplace implements the standard CKB transaction pattern for NFT trading:

  • Input: Spore Cell and Order Cell (or payment cells)

  • Output: Transferred Spore and Payment Cell (or new Order Cell)

  • Lock Scripts: Marketplace lock for orders, user locks for payments

Honest Declaration:

This project is deeply aligned with CKB’s ecosystem. It is not a general-purpose tool but a CKB-specific DApp that showcases:

  • The advantages of on-chain storage

  • The efficiency of the Cell Model for digital assets

  • The user experience enabled by Spore Protocol

The marketplace demonstrates why CKB’s architecture is superior for NFT applications compared to account-model chains.

1 Like