NFT - Marketplace

CyberMarket: A full-stack, decentralized NFT marketplace for creators and collectors

Comment

Inspiration

The inspiration for CyberMarket came from a desire to demystify the core technology behind the NFT revolution. While platforms like OpenSea and Rarible have made digital assets mainstream, their inner workings can be opaque. I was driven to build a project that moved beyond surface-level understanding, creating a full-stack decentralized application (dApp) from scratch. My goal was to explore the fundamental architecture of a true NFT marketplace: how on-chain ownership, off-chain metadata, and a fluid, modern user experience could be seamlessly integrated. I wanted to prove that a complete, functional NFT platform could be architected and implemented, providing a clear window into the mechanics of decentralized commerce.

What it does

CyberMarket is a fully functional NFT marketplace built on the Ethereum Sepolia testnet. It empowers users to engage with digital assets in a secure, decentralized environment. The platform allows users to:

  • Connect: Easily connect their MetaMask wallet to interact with the dApp.
  • Create (Mint): Mint new NFTs by providing an image URL, a title, a description, and an initial price. This process creates a unique ERC-721 token on the blockchain, and its metadata is stored in a scalable off-chain database.
  • List for Sale: The NFT's owner can list their digital asset for sale on the marketplace. This securely transfers the NFT from the owner's wallet to the marketplace contract's custody, making it available for purchase by the community.
  • Buy: Any user can purchase a listed NFT. The transaction is trustless and atomic—funds are transferred to the seller (and a potential marketplace fee to the owner), and the NFT is transferred to the buyer in a single on-chain operation.
  • Manage Profile: Users can view their personal collection of owned NFTs, track their purchase history, and see a log of all sales they have made.

How we built it

The project's architecture is a three-layered approach combining blockchain, a modern frontend, and a cloud database:

  • Blockchain Layer: We developed two custom Solidity smart contracts:

    • MyNFT.sol: An ERC-721 token contract built on the trusted OpenZeppelin library. It handles the core logic for minting and managing on-chain NFT ownership.
    • NFTMarketplace.sol: The core of the platform's business logic. It securely facilitates transactions by acting as an escrow, validating payments, and coordinating the transfer of both the NFT and the cryptocurrency. These contracts were developed using Hardhat and deployed to the Ethereum Sepolia testnet.

  • Frontend Layer: The user interface is a dynamic and responsive web application built with React.

    • ethers.js v6 was used for all wallet interactions and communication with the smart contracts. This library enabled the frontend to send transactions, read contract data, and listen for on-chain events.
    • Styling was implemented using TailwindCSS for rapid development of a modern, clean aesthetic.

  • Off-Chain Data Layer: A Firebase Firestore database was integrated to store the non-critical but user-facing metadata. This approach provides a highly performant and scalable solution for storing NFT descriptions, image URLs, and transaction logs, without incurring the prohibitive gas costs of storing such data directly on the blockchain.

Challenges we ran into

Developing CyberMarket presented several significant challenges that required careful problem-solving:

  1. Synchronization of State: Ensuring that the real-time data displayed on the frontend (from Firestore) accurately reflected the true state of ownership on the blockchain was a persistent challenge. We overcame this by implementing robust, real-time event listeners and on-demand contract state reads.
  2. Solidity Development and Debugging: We encountered critical deployment issues, such as the OwnableUnauthorizedAccount error, which taught us the importance of understanding contract ownership and execution permissions. Debugging transaction failures also required a deep dive into the nuances of contract-to-contract communication and value transfer.
  3. ethers.js and Native JavaScript Types: A key hurdle was correctly handling large numbers from the blockchain (Wei values). The invalid BigNumberish string error taught us the strict requirements of ethers.js v6, which uses JavaScript's native BigInt type. We implemented robust type-checking and conversion logic to ensure smooth, error-free transactions.
  4. Full-Stack Integration: Orchestrating the three distinct technologies—React, Firebase, and Solidity—into a single, coherent application required a solid understanding of API design and asynchronous data flow.

Accomplishments that we're proud of

  • Creating a Full-Stack DApp: We successfully built a complete decentralized application from scratch, showcasing proficiency in smart contract development, frontend engineering, and cloud services integration.
  • Seamless On-Chain & Off-Chain Sync: The ability for users to perform a blockchain action (like buying an NFT) and immediately see the updated data in a real-time, fluid UI is a major accomplishment that required overcoming significant architectural challenges.
  • Production-Ready Architecture: The project's structure, utilizing audited smart contracts and a scalable database solution, provides a strong foundation for future development, demonstrating a professional approach to dApp design.
  • Successful On-Chain Transactions: We are proud that our dApp can successfully handle complex transactions like NFT transfers and value distribution between a buyer, a seller, and the marketplace owner, all verifiable on the blockchain.

What we learned

This project provided invaluable lessons that go beyond just coding:

  • Decentralized Architecture: We gained a deep understanding of the unique architectural patterns of Web3, learning when to store data on-chain versus off-chain, and how to build a trustless system.
  • Solidity and Smart Contract Security: We learned the importance of security-first development in a world of immutable code, and how to debug and fix complex contract-level errors.
  • Web3 Frontend Development: We mastered the use of ethers.js v6 for interacting with smart contracts, handling wallet connections, and parsing on-chain events.
  • The Power of Integration: We discovered how a seemingly complex stack of technologies can be made to work together to create an accessible and powerful user experience.

What's next for NFT - Marketplace

The future of CyberMarket is to evolve from a proof-of-concept into a specialized, valuable platform. Immediate next steps include:

  • Implementing a Marketplace Fee: Integrating a commission structure into the smart contract to establish a clear monetization model.
  • Adding Advanced Features: Developing additional features such as auctions, creator royalties, or even a token-gated access system to build a unique selling proposition.
  • Professional Onboarding: Creating a curated experience for artists and creators to submit their work for inclusion on the platform, building a reputation for high-quality digital art.
  • Deployment to a Mainnet: Preparing the contracts for deployment to a low-cost, high-throughput Layer 2 solution like Polygon to attract a real user base and enable real-money transactions.

Built With

Share this project:

Updates