Web3 NFT Open Platform For Novice Web3 Users

by Vue.js Examples

W3NS – Web3 NFT Social Platform

Web3 NFT Open Platform For Novice Web3 Users.

Currently with two main Features:

  • Linktree like home page for every wallet address that user can follow/unfollow it, and chat with the wallet address
  • chat system have a full functions filter logic that support with CyberConnect data and wallet address’s onChain data

Deploy Information and Demo Video

Technologies used

  • BlockChain Network
  • Smart Contract Dev Env
    • Hardhat
    • ChainIDE
  • RPC endpoints
    • Infura
  • Front-end hosting && image assets && CDN
    • Vercel
    • IPFS
    • Meson
  • User profiles / Blog posts store / Albumn Store / Permission Control
    • Ceramic
    • Self.ID
    • LIT
    • Bundlr
  • Social Graph
    • CyberConnect
    • KNN3
  • Chat
    • XMTP
  • Application Tech Stack
    • TailwindCSS
    • Vue3
    • Pinia (state store)
    • PWA
    • Vue-i18n
    • Villus (gql && pinia binding lib)
    • Vite2

Application Features

  • Support all web2 social platform login
    • Easier for new Web3 users (thanks to the Web3Auth)
    • Login by many social platforms
    • Login by metamask/walletconnect
    • While storing data to Ceramic, will trigger Self.ID login too
  • CyberConnect
    • Follow/unfollow actions
    • Followers list
    • Followings list
  • Profile data save on Ceramic
  • Web3 LinkTree
    • Users can add many social platform links to their W3NS home page
    • Data stored on Ceramic
    • Data permission control by LIT
  • Search any address to show the Web3 things
    • Use KNN3 to get the NFT user information
  • [WIP] Web3 Instagram Clone
    • With LIT to have content permission control (user must mint poster’s NFT to have access to the page)
  • [WIP] Web3 Blogger Clone
    • With LIT to have content permission control (user must mint poster’s NFT to have access to the article)
  • [WIP] Anyone can create an NFT marketplace without code to earn an exchange fee

Hackathon Tracks Bounty

XMTP Bounty #1, #2, CyberConnect and Infura

  • Gate messages with CyberConnect and LIT
    • User can filter by CyberConnect Social Data: friends, followings, followers
    • User can pick the all filter that means all the conversations will show up event they do not include in the CyberConnect Social Data
    • User can add LIT control filter too
      • User can select which chain to query for the conditions below
      • User can add ETH, ERC20, ERC721, ERC777, ERC1155 token filters with contract address, comparators (<,<=, =, >=, >), and number
      • All of conditions can be Intersection or Union
      • User hit the Calculate with LIT button will trigger query with LIT and also show the calculate result for each condition and the final result
      • The calculate result will be intersection with the CyberConnect Social Data
  • In the messages list, user can click on the avatar to go to the W3NS home page to check the user’s more detail social informations
    • User can follow / unfollow some one on W3NS home page
    • User can check someone’s followers / followings (something like Instagram)
    • User can click on the Chat button to jump to the XMTP application to chat with the user
  • use the Infura as rpc service

ChainIDE Bounty, Polygon

  • We deploy two contract with ChainIDE
  • NFT Contract
    • use the ERC721A to save gas fee while mint multiple NFTs
    • can paused anytime
    • can setup whitelist
    • any address can bind to different number, that means different whitelist address can have different max mint amount of NFTs
    • can setup royalties
  • NFT Marketplace Contract
    • everyone can use the marketplace to generate a new market that can earn exchange fee

Meson Network

  • try to deploy to Meson cdn, but while visiting index.html, it access the javascript file getting error, so I have to fallback to vercel.

What’s NEXT

  • Build the UI that supports the user to mint anyone’s page NFT
  • Build the UI for the user to create their own NFT-D-Market that could earn an exchange fee without any coding skills
  • Add traffic status information for every wallet address home page
  • Finish the Blog and Instagram clone with Ceramic and LIT permission control
  • Add $NTB token for the user to buy and work as the platform’s coin (every activity require paying with $NTB)
  • Add more functions that make the W3NS more like a Developer open platform that they do not re-invent the base gears and only need to focus on building application features (Think about Facebook Application Central but on the BlockChain Area!)
  • Build the Chat UI in the Tailwind Style

Contact Information

GitHub

View Github