Build a Custom Marketplace
This guide walks you through building a custom marketplace using the Sequence stack. It covers token minting, wallet authentication, displaying collections, creating and purchasing listings, making and accepting offers, and managing inventory—all seamlessly integrated with an embedded wallet and Web SDK.
In this guide we will go through the process of creating a custom marketplace from a few simple tools from the Sequence stack.
The tools will enable you to perform:
- Minting: Minting of tokens to your wallet from the Sequence Builder
- Wallet Authentication: Use of Web SDK to authenticate a user
- Marketplace SDK set up: Basic Guide to Configure the Marketplace SDK
- Displaying collections: Retrieve and display the marketplace’s available collections.
- Listings and Offers: Enable users to list tokens for sale or make offers
1. Minting
The first step is to create a collectible from the Sequence Builder and mint a few tokens, which can be accomplished with this guide and to use the tokenId
you minted in the following steps to query and fulfill orders.
2. Wallet Authentication
For your project, you’ll need a way to authenticate your user with a wallet.
For this guide we’ll use an Embedded Wallet
with Web SDK
connector which can authenticate users using Google or Apple auth, in addition to user brought wallets like Coinbase or Metamask.
Install Packages
Either you can start from a great foundation with our Marketplace Boilerplate, which already includes all of this integrated with a great UI, or we will walk you through how to use React from scratch here.
Start by creating a project in a folder of your name choosing:
Then, begin by installing the required packages in the <project_name> folder
Create a config
Make sure to add all the chainIds you’re going to use
Create a layout in the main.tsx
Authentication Component
To complete the Authentication, you will need the authentication component
3. Marketplace SDK set up
Marketplace SDK is a comprehensive toolkit that seamlessly integrates our Marketplaces into applications. More about Marketplace SDK
Add the required CSS imports to your main styles file
Configure Tailwind CSS plugin in vite.config.ts
Create a config
Add the Marketplace SDK Providers Alongside Your Web SDK Providers
4. Displaying collections
To display the marketplace collections we need to create a folder named Collections
inside the src/app/components
directory. Within this folder, we will create two files: index.tsx
and Collection.tsx
.
To finish we will add the Collections component in the App.tsx
5. Listings and Offers
This section is for integrating the listings and offers from our marketplace into our UI.
Create a Types File
Before starting this, we need a file with some types for our components inside src/utils
. We’ll use this to type our functions and keep our codebase consistent and maintainable.
Set Up the Collectibles Components
To create the Items page and its components, we need to add a new folder named Collectibles inside the src/app/components directory. Within this folder, we will create two files: index.tsx
and Collectible.tsx
.
Finally, add the component for Listings and Offers into our App.tsx
file
Run and test
You’ve successfully added the items to your new page, and they should now be visible in the UI. To see them in action, run pnpm dev. From the landing page, select any of your collections to view the NFTs it contains. Make sure everything works as expected by testing key flows like listing, purchasing, making offers, and accepting offers on an NFT.