System Documentation

Thanks for buying NFTBOX! Please read this documentation for step-by-step instructions on how to setup NFTBOX and also learn more about how our whole system works.


About NFTBOX

NFTBOX is the complete software solution for your Non-Fungible Token (NFT) Marketplace Business. Capable of minting NFTs over the blockchain whilst allowing consumers to Buy, Sell and Transfer their NFTs on the marketplace freely with indisputable proof of ownership and authenticity achieved using ERC-721 standard smart contracts. Additionally, NFTBOX also incorporates all the necessary features needed for a present-day NFT marketplace such as a bidding system, and NFT collections as well as granting creators the option to sell and trade their digital works in various forms such as images, GIFs, video, and audio.


Key Features of NFTBOX

  1. The Admin Panel dashboard is a hub where admins can effortlessly get information about:
    • Total active users in the marketplace.
    • Total NFTs minted in the marketplace.
    • Total NFTs listed for sale.
    • Total NFTs bought and sold in the marketplace.
    • Total inactive users in the marketplace.
    • Summary report of the total NFTs sold sorted by month and year in a graphical form.
    • Summary report of the total NFTs sold, total NFTs listed for sell and total NFTs minted all filterable by year in graphical view.
  2. Admin can add sub-admins to manage the marketplace software and also get information such as the last login and logout times along with the active and inactive statuses of all administrators.
  3. Admins can view all marketplace users information and can check on their activities.
  4. Through the admin panel, admins can view and manage the list of all NFTs minted on the marketplace as well as see their details, information such as NFT name, token ID, owner ID, owner name, NFT owner wallet address as well as the status of the NFT, etc.
  5. Admin wallet can be setup from the admin panel with ease.
  6. Admins can deploy their marketplace smart contract with ease directly from the admin panel.
  7. From the admin panel, admins can set the network information for the marketplace such as the network name, Chain ID, symbol, and RPC.
  8. In this system, you can edit the website's About, Contact, Terms, Privacy policy, F.A.Q and Social links section from the Conetent Manager System section present in the Admin panel.

Admin Panel Modules

  1. Dashboard
  2. Admin Users
  3. Add Admin Users
  4. Users
  5. Add New Users
  6. NFT List
  7. NFT Categories
  8. NFT Collections
  9. NFT Setup
  10. Smart Contract Deploy
  11. Content Manager
  12. App Settings
  13. Fees Setting
  14. Selling Type Setting
  15. Transfer Option Setting
  16. Email Gateway Setting
  17. Email Template Setting
  18. Update (New)
  19. Support

Technologies Used

Tools

  1. HTML (Docs)
  2. CSS (Docs)

Language

  1. PHP-CodeIgniter Framework (Docs)
  2. JavaScript (Docs)
  3. AJAX (Docs)
  4. Node.js (Docs)

Database

  1. MySQL (Docs)
  2. Solidity (Docs)

Requirements for NFTBOX System

In this section we will present the recommended configuration under which NFTBOX would work perfectly. These are not absolute values as the performance depends on many factors such as host performance, server configuration and the number of visitors.

Server requirements

  • Apache or IIS or Nginx
  • PHP version 7.4 > 8.0 (ie. recommended: Any PHP version greater than 7.4 and less than 8.0)
  • MySQL version 5.0 or greater (recommended: MySQL 5.5 or greater)
  • Node.js version 16.15.0 (LTS)
  • We recommend DigitalOcean for hosting.


NFTBOX Installation

  1. Please extract the NFTBOX_Main-v-1.0.zip folder. You will then get the following:

    • NFTBOX_Main-v-1.0.zip
    • Documentation (Folder)

    We highly recommend that you read the documentation first.

  2. Upload the NFTBOX_Main-v-1.0.zip file to your server using cPanel or FTP.
  3. Extract the NFTBOX_Main-v-1.0.zip file.
  4. Navigate into the extracted folder and then move all the folders and files present (eg. application, assets, index.php, install, and system folders) one directory up ie. into the public_html directory. Alternatively, you could create a comment folder and then move the files into that comment folder.
    CAUTION: Make sure that the .htaccess file is moved correctly or else you will be unable to access the admin panel.

  5. NOTE: The instructions above will be applicable for all other system!

  6. To setup your application, browse: http://yourdomain.com/install . Then enter your Envato User ID and Purchase Key. (NOTE: Your purchase key can be found at your envato download option: https://themeforest.net/downloads) Once the form has been filled, click on the Next button.

  7. Responsive image
  8. Installer second step checks to see whether your directory and server meet the application installation requirements.
    NOTE: SMTP server must be enabled to send emails. However, it is not mandatory during the installation process. You will have to setup your SMTP server later otherwise your emails will fail to deliver.

  9. Responsive image

    IMPORTANT NOTE: If you see errors in "Directory permissions & requirements" due to files not being writable as shown in the screenshot below then please change their read-write permissions in the file properties as guided by the screenshots below.

      Responsive image
    • install.sql (Location: /var/www/html/install/sql)

    • Responsive image
    • Database.php (Location: /var/www/html/app/Config)

    • Responsive image
    • Database.php (Location: /var/www/html/install/php)

    • Responsive image
    • App.php (Location: /var/www/html/app/Config)

    • Responsive image
    • captcha (folder) (Location: /var/www/html/public/assets/images)

    • Responsive image
    • session (folder) (Location: /var/www/html/writable)

    • Responsive image
    • cache (folder) (Location: /var/www/html/writable)

    • Responsive image
    • uploads (folder) (Location: /var/www/html/public)

    • Responsive image
    • flag (folder) (Location: /var/www/html/install)

    • Responsive image


  10. Enter your Database Name, Username, Password and Host Name then click on the Next button.

  11. Responsive image
  12. Then wait for 60 seconds.

  13. Responsive image
  14. Now use a temporary Username and Password to login to the system.
    NOTE: Please change this login information (Username and Password) after you are logged in.

  15. Responsive image
    Responsive image
    Installation successfully done!
  16. Now, Click on Click to launch your application button to access your application.
  17. Thank you for purchasing NFTBOX. If you have any questions, please contact us at info@bdtask.com.


Installing Dependancies


  • PHP
  • Run the following commands in Linux Terminal:

    1. sudo apt-get update

      Responsive image

    2. sudo apt-get upgrade

      Responsive image

    3. sudo apt-get install php

      Responsive image

    4. php -v

      Responsive image

    5. sudo apt-get install php*-curl

      Responsive image

    6. sudo apt-get install php*-xml

      Responsive image

    7. sudo apt-get install php*-mbstring

      Responsive image

    8. sudo apt-get install zip unzip

      Responsive image

    9. sudo apt-get install php*-gd

      Responsive image

    10. sudo service apache2 restart

      Responsive image


  • Node.js
  • Run the following commands in Linux Terminal:

    1. sudo apt-get install nodejs

      Responsive image

    2. node -v

      Responsive image

    3. sudo apt-get install python-software-properties

      Responsive image

    4. sudo apt install npm

      Responsive image

    5. npm -v

      Responsive image



    System Flowchart:

  • Admin Marketplace Deploy Flowchart

  • Responsive image


  • Seller Flowchart

  • Responsive image


  • Buyer Flowchart

  • Responsive image


    System Guideline:


    ADMIN PANEL

    1. Admin Login Form

      Admins and sub-admins need to login individually using the login form.


      Responsive image

    2. Admin Dashboard

      In the Admin Panel Dashboard you can see the total active users, total NFTs minted, total NFT's listed for sale, total NFT's sold, total buy, inactive users, monthly reports where the bar chart represents the number of NFT's that have been minted in the related months as well as a pie chart saying the number of NFT's listed in each respective month. As shown in the screenshot below:


    3. Responsive image

    4. Edit Profile

      After installation we highly recommend that you edit your admin profile if you haven't already. To find Edit Profile please refer to the screenshot provided below. Fill in the appropriate fields with your informations and also set your password then click on the Update button to confirm.


    5. Responsive image

      Responsive image

    6. Admin Users

      To see the list of administrators and sub-administrators and edit their roles, go to: Admin > Admin Users.


    7. Responsive image

    8. Add Admin Users

      To add new administrators go to: Admin > Add Admin Users.


    9. Responsive image

    10. NFT Setup - NFT Marketplace Blockchain Setup
      NOTE: Make sure your NodeJS server is running as you will need the port number during NFT marketplace setup.

      The default network set is the Polygon Mumbai Testnet. This can be changed to Polygon Mainnet by clicking on the Update button.


      Responsive image

      Then updating the fields using the Polygon Mainnet setting. (NOTE: These Polygon Mainnet settings can be found by clicking on the "Polygon Technology" link provided at the top of the form as shown below.

      Responsive image

      Network Name: Should be set to an appropriate name that can be used to easily identify the name of the blockchain network the NFT Marketplace software is connected to later on. We recommend that you set Network Name to “Smart Chain” as suggested in Binance Academy

      Chain ID: It is used for replay protection of transactions preventing attacks between the chains with same NetworkID’s. Signed Transactions will have a different hash due to the addition of the chain ID along with the previous standard of only using Network IDs. You must set the Chain ID to 56 as stated in Binance Academy

      Current Symbol: Binance Coin is the cryptocurrency issued by Binance exchange and trades with the BNB symbol. You must set Currency Symbol to “BNB” as stated in Binance Academy

      RPC URL: RPC(Remote Procedure Call) is a set of protocols and interfaces that the client interacts with blockchain system. RPC URL is a URL to which requests for blockchain data can be sent. (Similar to RPC Endpoint which is the node’s address). The Blockchain related information can be queried after. (Such as block number, blocks, node connection, etc.) and send the transaction request through RPC interface. For updated BNB mainnet RPC URL go to Binance Academy

      Block Explorer: A block explorer is an online tool that enables you to search for real-time and historical information about a blockchain, including data related to blocks, transactions, addresses, and more. We recommend that you set Block Explorer URL to “https://bscscan.com” as stated in Binance Academy

      Server IP: The IP of your domain server.

      Port: You can choose any open ports that are not used by any other services.

      Admin Wallet Setup

      The admin must use their Metamask Wallet to run the NFT Marketplace.

      Responsive image

      Then provide the Metamask Wallet's private key in the field shown below then click on the Import button.

      Responsive image

    11. NFT Setup - NFT Marketplace Contract Deploy

      To deploy your NFT Marketplace smart contract go to: NFT Setup > NFT Setup.

      IMPORTANT NOTE: The contract deploy function will no longer be visible once a contract has been deployed. And the hash of the contract transaction will appear here.


      Responsive image

      Contract Name: Preferably the name of your NFT Marketplace.

      Token Symbol: Token used to mint NFTs in your NFT marketplace must be given a symbol. (eg. BTC, ETH, BNB etc.)

      Max Supply: This is the max NFT minting limit you want to initially set for your NFT Marketplace. (Once the max limit is reached then no more NFT’s can be minted!). You can increase the max supply limit whenever you wish after deploying the smart contract. (Note: You will need to pay the gas cost for the transaction)


    12. After successfully deploying your NFT Marketplace smart contract you can see the deployed smart contract information such as Contract Address and Transaction here. To see more information you can click on the paper plane icon buttons and it will lead you to their Etherscan address.


      Responsive image

      Responsive image

      IMPORTANT: NFTBOX Smart Contract Verification


      (1) Go to Admin Panel > Contract Deploy and then click on Contract Address

      Responsive image

      (2) Click on Contract.

      Responsive image

      (3) Click on Verify and Publish.

      Responsive image

      (4) For the Compiler Type please click on Solidity (Single file) from the dropdown.

      Responsive image

      (5) For Compiler Verion please click on v0.8.4+commit.c7e474f2 from the dropdown.

      Responsive image

      (6) For Compiler Verion please click on v0.8.4+commit.c7e474f2 from the dropdown.

      Responsive image

      (7) Agree to the Terms of service then click on Continue

      Responsive image

      (8) Copy all of the text from the text file (.txt) provided with NFTBOX.


      Responsive image

      (9) Paste the copied text in the Enter the Solidity Contract Code below* text box.

      Responsive image

      (10) Pass the I'm not a robot test and then click on the Verify and Publish button.

      Responsive image

      You should now have a successfully verified marketplace smart contract!

      Responsive image

      To confirm that your smart contract has been verified you can go to Contract Deploy > Contract Address (as shown in the screeshot below) and you should be able to see the smart contract in the Contract section along with the green verified check mark indicating that the smart contract has been verified.

      Responsive image

      Responsive image

      Now for every transaction that takes place over the blockchain from your marketplace, you should be able to see what event took place by looking under the Method section.

      Responsive image

    13. Users List

      To see all users go to: Users > Users.


    14. Responsive image

    15. Add New Users

      To add new users from the admin panel go to: Users > Add New Users


    16. Responsive image

    17. NFTs List

      (1) To see the list of all NFTs in the marketplace go to: NFT's > NFT List.
      (2) Click on the Save as icon buttons to save a copy of the list in CSV, Excel and PDF formats or Print the user list.
      (3) Click on the Action button to see the full details of the respective NFTs such as Name, Category Name, Collection Name, Owner Name, Description, Properties, Token Standard, Status, Is Featured, Token ID, Owner Wallet, Contract Address, Transaction Hash etc.


    18. Responsive image

    19. NFT Categories

      (1) To see the all NFT categories: NFT's > Categories.
      (2) Click on Create New Category button to create a new category.
      (3) Click on the Action buttons to edit or delete the category. In this system you can edit the categories Category Name, Category Image, Description as well as the status.


    20. Responsive image

    21. NFT Collections

      (1) To see the all NFT collections: NFT's > Collections.
      (2) Click on Create New Collection button to create a new collection.
      (3) Click on the Action buttons to edit that respective collection details. In this system you can edit the collection's Collection Logo Image, Banner Image, Collection Name, Category as well as the user this colelction belongs to.


    22. Responsive image

    23. Content Manager

      Admin Panel has Content Manager System where you can edit various informations used in your website such as Home, About, Contact, Terms, Privacy Policy, F.A.Q as well as social links.

      Content Management System - Home
      Use Content Manager > Home > Action button to edit the Home section's Headline, Title, Sub Title and Banner Background Image.


      Responsive image

      Responsive image


      Content Management System - About
      Use Content Manager > About > Action button to edit the About section's Headline and text.


      Responsive image

      Responsive image

      Content Management System - Contact
      Use Content Manager > Contact > Action button to edit the Contact section's contact information such as Emails, Phone Numbers, Addresses etc.


      Responsive image

      Responsive image

      Content Management System - Terms and Condition
      Use Content Manager > Terms and Condition > Action button to edit the Contact section's Terms and Condition information.


      Responsive image

      Responsive image

      Content Management System - Privacy Policy
      Use Content Manager > Privacy Policy > Action button to edit the Contact section's Privacy Policy information.


      Responsive image

      Responsive image

      Content Management System - F.A.Q
      Use Content Manager > F.A.Q > Action button to edit the Contact section's F.A.Q information.


      Responsive image

      Responsive image

      Content Management System - Social Links
      Use Content Manager > Social Links > Action button to edit the Contact section's Social Links such as Instagram, Youtube, Google Plus, Twitter, Facebook etc.


      Responsive image

      Responsive image


    24. Setting

      Setting - Application Settings
      Go to Setting > App Setting to edit the Application's Application Title, Address, Email Address, Phone, Favicon, Dashboard Logo, Website Logo, Language, Time Zone, Admin Align, Office Time, Latitude and Longitude and Footer Text.


      Responsive image

      Responsive image

      Setting - Fees Settings
      Go to Setting > Fees Setting to edit the NFT Transfer and Sale Fees.


      Responsive image

      Setting - Selling Type
      Go to Setting > Selling Type to activate or deactivate the different methods of selling NFTs in your marketplace

      Explained:
      Bid: Consumers can sell NFTs using the bidding feature.
      Fix: Consumers can sell their NFTs at a fixed price.


      Responsive image

      Setting - Email Gateway
      (1) Go to Setting > Email Gateway to edit your email gateway settings.
      (2) Here you can configure your email gateway and then click Save to save the settings.
      (3) Here you can test your email gateway settings by filling the above form and then clicking on Send.


      Responsive image

      Setting - Email Template
      (1) Go to Setting > Email Template to edit your email templates.
      (2) Click on the Save as icon buttons to save a copy of the list in CSV, Excel and PDF formats or Print the user list.
      (3) Use the Action buttons to edit the templates.


      Responsive image

      Responsive image


    25. CUSTOMER VIEW

      1. Customer Metamask Login

        Customers can login using Metamask.

        Customer Metamask Setup & Signup


        (1) Go to the offical MetaMask website download page in your browser.

        Responsive image

        (2) Click on Add to Chrome. (NOTE: This may change respective to the browser you are using.)

        Responsive image

        (3) Click on Add extension when the notification pops up.

        Responsive image

        (4) Click on Get Started

        Responsive image

        (5) Click on Create a Wallet

        Responsive image

        (6) Click on I Agree.

        Responsive image

        (7) Type in your password.

        Responsive image

        (6) Click on Next.

        Responsive image

        (7) Click on the blurry box to reveal the secret words and then remember the sequence of words as we will need it the following step. Then click Next.

        Responsive image

        Responsive image

        (8) Click on the word buttons in the sequence that was in the previous step then click Confirm.

        Responsive image

        (9) Click on All done.

        Responsive image

        (10) The user should now have a new MetaMask Wallet that can be used to login.

        Responsive image

        The user will click on the Metamask Connect button found in the top-right corner of the website.

        Responsive image

        (1) The customer will select the wallet they want to use in the marketplace.
        (2) The customer will then press Next to proceed.

        Responsive image

        Lastly, the customer needs to click Connect to connect their wallet to the marketplace.

        Responsive image

        The customer should now be connected to the NFT Marketplace.

        Responsive image


      2. Profile

        Customers can manage their settings by clicking on their Profile Icon in the top right of the homepage and then selecting Profile.


        Profile - Edit
        Here customers can edit their profile information such as their First Name, Last Name, Bio, Personal Site or Portfolio and their Wallet Address.


        Responsive image

        Profile - Withdraw
        (1) Here the customer can withdraw their marketplace funds.
        (2) Customers must click on Reload Balance to check their current updated balance.
        (3) Here the customer must enter the amount they want to withdraw
        (4) Finally to commit their withdraw action they must press the Send button.


        Responsive image

        Profile - Transactions
        (1) The customer can check all of the previous transacitons on the marketplace that took place over the blockchain by going to the Transactions seciton.
        (2) To see more information about each individual transactions they can click on Trx details.


        Responsive image


      3. My NFT's

        Customers can see their owned NFT's, favorite NFTs and NFT Collections by clicking on their Profile Icon in the top right of the homepage and then selecting My NFT's.


        Responsive image

        Responsive image

      4. My Collections

        (1) Customers can see their Collections by clicking on their Profile Icon in the top right of the homepage and then selecting My Collections.
        (2) Customers can edit their collections by clicking on the Edit icon button on the top right of the collection image.


        Responsive image

        Responsive image

        Responsive image

        Responsive image

      5. Create NFTs

        Customers can create their own NFTs by clicking on the Create button on the left of their profile icon.


        Responsive image

        Responsive image

        Responsive image

      6. Search

        (1) Customers can see all NFTs minted by collection by going to Search located at the top right
        (2) Here they can search by collection.
        (3) They can then filter by the Blockchain network, Category and Collection


        Responsive image

      7. List NFT for Sale (Method: Bid Sell)

        Customers can sell their minted or owned NFT's (After the admin has verified the NFT in the marketplace) by bidding.


        List the NFT for sale by clicking on the List for Sell button.

        Responsive image

        (1) Make sure you are in the "Auction" section.
        (2) Enter the amount you want to sell the NFT for.
        (3) Edit The duration by selecting the start and end dates for the bidding via the calender as shown in the image given below.
        (4) Then press Complete listing button to confirm the listing in the NFT Marketplace.

        Responsive image

        Responsive image

        (5) Press Confirm button in the Metamask pop-up window to confirm the listing.

        Responsive image

      8. List NFT for Sale (Method: Fixed Price Sell)

        Customers can sell their minted or owned NFT's (After the admin has verified the NFT in the marketplace) by a fixed price.


        List the NFT for sale by clicking on the List for Sell button.

        Responsive image

        (1) Make sure you are in the "Fixed Sell" section.
        (2) Enter the price you want to sell the NFT for.
        (3) Click on Complete Listing to confirm the listing.

        Responsive image

        Press Confirm button in the Metamask pop-up window to confirm the listing.

        Responsive image


      9. Customer Logout

        Customers can logout from their profile by clicking on their Profile icon on the top right and then clicking on Log Out button on the left of their profile icon.


        Responsive image

      10. NOTE: Third-party images used in this documentation is strictly used for demo purposes only and will not be used or included in NFTBOX.

        Third-party images used (Sources):
        > PHANTA BEAR #2477, PhantaBear Collection: https://enefti.modeltheme.com/product/phanta-bear-2477/
        > Bored Ape Yacht Club (Logo): https://boredapeyachtclub.com/#/
        > Bored Ape Yacht Club, #5143 (OpenSea): https://opensea.io/assets/ethereum/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d/5143
        > Bored Ape Yacht Club, #3368 (OpenSea): https://opensea.io/assets/ethereum/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d/3368
        > Bored Ape Yacht Club, #6226 (OpenSea): https://opensea.io/assets/ethereum/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d/6226
        > Bored Ape Yacht Club, #8520 (OpenSea): https://opensea.io/assets/ethereum/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d/8520
        > Bored Ape Yacht Club, #3929 (OpenSea): https://opensea.io/assets/ethereum/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d/3929
        > Bored Ape Yacht Club, #2672 (OpenSea): https://opensea.io/assets/ethereum/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d/2672



      Bdtask Overview & Support

      Bdtask is a well known Envato based software development company. We are dedicated to create and deliver products to provide the best customer satisfaction.
      Please visit our company website: Bdtask

      NFTBOX Support

      If you wish to know anything about NFTBOX then please do not hesitate to contact our support team:

      For installation support: info@bdtask.com
      For software customization support: business@bdtask.com
      To get support via Skype: bdtask