Niftys

reactnext.jstailwindcssexpress
Niftys

Niftys is an innovative hybrid platform that combines the features of an NFT/Collectibles Marketplace and a blockchain-powered platform for communities to interact with their favorite brands.

The platform enables fans of different brands to connect with their favorite creators and brands, buy, sell and trade their digital collectibles in a secure and decentralized environment.

Through the power of blockchain, the platform provides a unique and authentic experience to its users, while also offering transparency and security to the transactions on the platform.

Overall, Niftys is an exciting and cutting-edge platform that aims to revolutionize the way fans interact with their favorite brands and creators.

Primary Sale Widget

I develop a primary sale widget for Niftys, which lets users purchase NFTs from their favorite communities using crypto (through Coinbase Commerce) or with debit/credit card (through Stripe Payments). The experience is gas-free, which means that there are no fees involved in the minting of purchased NFTs.

d
Initial Screen

The first thing the widget shows, is the price of each NFT, the number of NFTs available, and how many have been minted.

We also show the amount of NFTs the user is allowed to buy, which is completely controlled in the backend.

d
Quantity Selector
d
Accept Terms

Users can select the quantity they want to buy and choose to pay with either credit/debit card or crypto.

Depending on the selected payment method, the user goes through either two steps for debit/credit card payments or two options for Coinbase Commerce.

d
Select Payment Method

We created a "reserved" system to guarantee that NFTs would be available for a certain amount of time. The Widget would show a timer at the top right corner of the widget to show the user how much time was left to complete the purchase. This system gives users plenty of time to buy their NFTs, while also benefiting those who arrive earlier.

Debit/Credit Card Payment (With Stripe)

d
Pay with Debit Card

When users chose to pay with credit/debit card, the payment was implemented using Stripe. This step was straightforward, requiring the user to enter their card information and click the "Pay Now" button to submit their payment and start minting their NFTs.

Crypto Payments (With Coinbase Commerce)

d
Pay with Debit Card

With Coinbase Commerce, users can pay with crypto. They have two options: use their Coinbase balance by logging in with their Coinbase account or send the crypto payment to a wallet.

Minting the NFTs

d
Finishing the Purchase Flow

Once the purchase is complete, the user sees a success screen, and the NFTs are minted and sent to their wallets.

What is cool about out primary sale flow is that the minting of the NFTs is gas-free as our backend team created an innovate "Mint Queue" system where NFTs were being minted without the user to worry about things like failed transactions, gas fees, FOMO, etc.


Community Leaderboards

At Niftys, we're always striving to enhance the user experience and foster a sense of community among fans and creators. With that in mind, we proudly introduce our innovative Leaderboard feature designed to engage users and encourage interaction with their favorite NFTs.

d
Community Leaderboards

How the Leaderboard Works

The Leaderboard showcases a ranking of NFTs based on the amount of Experience Points (XP) assigned to each one. Users can earn XP by participating in various activities within the platform.

Once they've collected XP, they can burn it and allocate it to any NFT they own, boosting its position on the Leaderboard.

Leaderboard User Interface

The user interface of the Leaderboard page has been meticulously designed for an intuitive and enjoyable experience. The main section of the page features a paginated Leaderboard, with NFTs sorted by the amount of XP assigned to them. To add a sense of urgency and excitement, a countdown timer is displayed on the right side of the Leaderboard, indicating the time remaining for users to burn their XP and allocate it to their preferred NFTs.

Once the countdown reaches zero, the Leaderboard locks, and users can no longer burn XP or allocate it to their NFTs. This creates a thrilling race to the finish, as users vie to improve the ranking of their favorite NFTs before time runs out.

d
Burn XP Modal

Personalized NFT Overview

In addition to the main Leaderboard, users can also view a personalized section displaying all the NFTs in their wallet eligible for participation in the Leaderboard. This section includes the current position of each NFT, making it easy for users to track the performance of their collection and strategize their XP allocation accordingly.