Custom NFT marketplace starter repo built on Next.js, Tailwind, and Decent, deployed on Vercel.
The purpose of this repository is to get you up & running quickly with a curated NFT marketplace. You can filter the Decent Protocol for any set of creator addresses, contract addresses, or contract symbols to showcase those NFTs on your marketplace page. The primary functionality demonstrated in this repo is the ability to mint NFTs from Decent's Editions & Rentable contracts and search for specific sets of contracts using Decent's API.
To create a custom minting page for just one NFT release, please visit this repository's companion repo: Custom Minting Page. The Minting Page repository also includes a video tutorial.
You will need to create a Decent NFT, Decent API Key, and Alchemy API Key to use this starter. Here are the steps:
-
Go to https://hq.decent.xyz/create/Editions and create a new NFT
-
From the success page, copy the contract address and note the chain ID number. You can deploy your NFT to Ethereum, Polygon, Arbitrum or Optimism. These chains have the following IDs:
| Chain | ID Number |
|---|---|
| Ethereum | 1 |
| Polygon | 137 |
| Arbitrum | 42161 |
| Optimism | 10 |
On the index.tsx page, enter the identifiers (contract address(es), creator address(es), contract symbol(s)), identifier type, and chain Ids in the getServerSideProps request.
export async function getStaticProps() {
const identifiers = ["RCGS1"];
const chainIds = ['1', '137', '10', '42161'];
const matchItem = 'symbol';
let { data: nfts } = await axios.get(`${absoluteUrl().origin}/api/getReleases`, { params: {
chainIds: `${chainIds}`,
matchItem: matchItem,
matchingArray: `${identifiers}`,
}});
return {
props: {nfts},
};
}-
Request a Decent API Key and add it to your .env file. Once inputted, your minting page will automatically populate with your NFT's data and metadata. If you would like to add or swap information, please visit Decent's API Documentation to query for your contract and view the JSON response to see the available information.
-
Create an Alchemy account and visit your dashboard to create an Alchemy API key. Alchemy facilitates the connection between your application and the chain of your choice.
Reach out to @cdurbinxyz on Twitter if you run into any issues.
First, install dependencies using npm:
npm iNext, run cp .env.example .env.local to create your file to enter the information detailed above. It should look like:
DECENT_API_KEY=<your-decent-api-key>
ALCHEMY_API_KEY=<your-alchemy-api-key>Lastly, run the development server:
npm run dev