anouci / NFT-Portfolio-Visualizer-with-React

Easily visualize all your ERC721 NFT holdings across multiple chains using this React-powered interactive dashboard.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

NFT Portfolio Visualizer with React 🎨 🖼️

Easily visualize all your ERC721 NFT holdings across multiple chains using this React-powered interactive dashboard.

NFT/React/Mobula Logo


Table of Contents 📖


Features ✨

  • Real-time NFT Viewing: Browse through your collection of ERC721 NFTs from multiple chains in one unified interface.

  • React Integration: A familiar and efficient React interface ensuring seamless browsing.

  • Secure and Reliable: Powered by Mobula API for accurate and up-to-date information.


Usage 💡

Simply input your EVM-compatible wallet address into the React dashboard interface to view your entire collection of NFTs. Benefit from the organized view, filter options, and more!


Dashboard Setup 🖥️

1. Initialize & Design:

2. Fetch & Display NFT Data:

  • Integrate with the Mobula API using Axios to fetch the NFT holdings. Display the fetched NFTs using React components.
  • Tip: Consider creating a custom hook to manage data fetching and state.

3. Enhance Interactivity & Filters:

  • Add features like click-to-enlarge for NFT images and implement basic filtering or search functionalities.
  • Tip: Use React's Context API for managing filter states across components.

4. Responsive Check & Deployment:

  • Ensure the dashboard is mobile-responsive using CSS frameworks like TailwindCSS. Once satisfied, deploy your application to platforms like Netlify or Vercel.

API Reference 🌐

Our React dashboard predominantly utilizes the Mobula API's following endpoint:

  • NFT Holdings:
    • Method: GET
    • Endpoint: https://api.app-mobula.com/api/1/wallet/nfts
    • Description: Get all ERC721 NFT holdings multi-chain from any EVM-compatible wallet.

More detailed information on this endpoint can be found in the official Mobula API documentation. Simple as that!


Crafted with ❤️ using React and powered by Mobula API.

About

Easily visualize all your ERC721 NFT holdings across multiple chains using this React-powered interactive dashboard.