Unlock Digital Collectables Using Mintbase JS
Tags: javascript, beginners, web3, tutorial
Published: 2023-09-19 21:59:33


![anime alien lady in a warp speed vortex](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyqro6gjv8esilzsgd0z.gif)

The Mintbase API empowers web developers to integrate digital collectibles into their toolkit. By the end of this tutorial, you'll have a fully configured environment ready for diving deeper into web3 with a powerful JavaScript API. 

Even if you're just starting out with JavaScript, you'll find this guide easy to follow. This is your gateway to the web3 industry that witnessed a staggering 552% growth in developer demand in 2022! 

Plus, if you complete the tutorial by October 11th, 2023, you'll have a chance to [win a share of the $1,000 prize pool](https://starpause.com/mintbase)!

## Near Protocol 

Mintbase makes it easy to interact with the NEAR blockchain using Javascript. Why NEAR? Because It's carbon-neutral and has bullet proof scalability that's trusted by giants like [KAI-CHING (the #1 dApp in the world)](https://twitter.com/ilblackdragon/status/1702155228932718756) and [SweatCoin (gamified exercise since 2015)](https://sweatco.in/). With a commitment to great experiences for both developers and end users, NEAR is easy for anyone to pick up.  

Grabbing a NEAR account via [shard.dog link](https://shard.dog/mintbasegleam) is a perfect demonstration of the seamless onboarding process. Especially worth checking if you're participating in [the contest](https://starpause.com/mintbase) as you'll need a NEAR name to claim prizes. 

You'll also need to [create a testnet account](https://testnet.mynearwallet.com/) to follow along with the tutorial. Each testnet account comes with a bunch of tokens for experimenting and development. If you run out of testnet tokens you can always make another account!

## Mintbase on Testnet

![switch to testnet screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmac6y75xa3npsuofbuh.png)

Now that you have a Testnet account you can easily create your own Mintbase contract. On the top right of the site be sure you're logged in and that you've selected NEAR TESTNET.

![launch a contract screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8i3tro5g2y6jrc4jcra.png)

After confirming you're on Testnet head to `Manage -> My Contracts` and then use the `New Contract` button. You can fill in the Store Name/Symbol with anything and proceed to paying the contract storage fee. 

What's a storage fee? Instead of monthly payments to a hosting provider you make a one time payment to the Near network to keep your contract forever. 100kb costs ~1 NEAR token, which we're not too worried about with our play tokens on testnet. 

![mintbase api key screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvnenlbifqqvnu0o6b9i.png)

Next head over to `Build -> Developer API` to get your your Mintbase Testnet Developer Key. Use the `Generate New Key` button and Copy it for safe keeping. Normally you wouldn't share that key with anyone, but if you're participating in the contest you can [paste it on gleam for an entry](https://starpause.com/mintbase).

## Forking a Marketplace

Now that your store contract exists on the blockchain it's possible to use any interface to interact with it, thanks to the power of decentralization. However, most business clients will want a dedicated store with customized branding. 

![fork marketplace front end](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2u6t901suulv8x2e5pez.png)
An [example marketplace repository](https://github.com/Mintbase/examples/tree/main/simple-marketplace) demonstrates how you can use Mintbase JS to integrate web3 collectables into any front end you're familiar with. To clone and deploy the repository with Vercel go under `Build -> Deploy a Marketplace` on the testnet [Mintbase.xyz site](https://testnet.mintbase.xyz/).

![Connecting a git host to fork the marketplace example repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae0b4ostkcji2xzs761j.png)
Once you get to the Vercel page you'll need to specify a git host. This is where your fork will live so that you have a copy and can edit it. 

![Forked marketplace building](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8p2zuyiw4jwtyi0j63su.png)
After connecting your git host the Mintbase simple-marketplace repository will clone and you'll get a progress indicator of how the deployment is going. It should take less than 5 minutes for the entire process to run.

## Configure Your Marketplace

The last step is configuring the cloned marketplace to connect with the contract you created earlier. Follow the [Simple Marketplace README.md](https://github.com/Mintbase/examples/tree/main/simple-marketplace) to rename the `.env.example` file and update the variables. 

![Editing .env.example on Github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ld0rwtst6ghcro0y3cxw.png)

If you forked the marketplace using Github you can edit directly on their website (as pictured). Otherwise clone the repo to your computer and edit it there.

Submit your marketplace URL and the updated `.env` variables to the [gleam contest](https://starpause.com/mintbase) for another two entries!

## Next Steps

Follow [Mintbase on Twitter](https://twitter.com/mintbase) to find out about upcoming opportunities to earn like the grants program and hackathons! How cool would it be to see a [FOREM listing extension](https://admin.forem.com/docs/advanced-customization/extensions/listings) leveraging Mintbase JS?

If you have any questions as you continue to explore, pop into the [Telegram chat](https://t.me/mintdev) for timely responses.

For my next article I'm planning to cover the [Meritocracy Wordpress Plugin](https://www.youtube.com/watch?v=pGNErpFe8Kk), subscribe so you don't miss it!