DEV Community

Cover image for Unlock Digital Collectables Using Mintbase JS
Jordan
Jordan

Posted on • Edited on

Unlock Digital Collectables Using Mintbase JS

anime alien lady in a warp speed vortex

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!

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) and SweatCoin (gamified exercise since 2015). 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 is a perfect demonstration of the seamless onboarding process. Especially worth checking if you're participating in the contest as you'll need a NEAR name to claim prizes. 

You'll also need to create a testnet account 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

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

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

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.

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
An example marketplace repository 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.

Connecting a git host to fork the marketplace example repository
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
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 to rename the .env.example file and update the variables.

Editing .env.example on Github

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 for another two entries!

Next Steps

Follow Mintbase on Twitter 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 leveraging Mintbase JS?

If you have any questions as you continue to explore, pop into the Telegram chat for timely responses.

For my next article I'm planning to cover the Meritocracy Wordpress Plugin, subscribe so you don't miss it!

Top comments (5)

Collapse
 
maheshb41968404 profile image
Mahesh Bhagat

This tutorial on using Mintbase JS to unlock digital collectibles and engage with the NEAR blockchain is a fantastic resource for both beginners and experienced developers alike. Kudos to the author for providing a gateway into the world of web3 technology and digital collectibles, and for making it accessible to a wider audience. Keep up the great work! 👏🌟🚀🚀

Collapse
 
violetspades profile image
violetspades

This DEV Community post introduces Mintbase JS and its capabilities for integrating digital collectibles into web development projects. It's a great opportunity for developers, especially beginners, to explore the web3 industry's growth and even have a chance to win from a $1,000 prize pool if they complete the tutorial by October 11th, 2023. Mintbase's integration with the NEAR blockchain is highlighted for its scalability and carbon-neutral nature. Overall, it's a promising tutorial for those interested in the world of digital collectibles and blockchain technology.

Collapse
 
bivab profile image
Bivab❤️

Exciting opportunity to dive into web3 with Mintbase. Will gonna try this out for sure...🤩🚀

Collapse
 
starpause profile image
Jordan

Good to hear 🤝 Let me know if you hit any blockers as you dive in!

Collapse
 
dipak_matteo profile image
Dipak Matteo

I must say, It's a great opportunity for developers, especially beginners, to explore the web3