Skip to content

Latest commit

 

History

History
executable file
·
227 lines (204 loc) · 8.78 KB

README.md

File metadata and controls

executable file
·
227 lines (204 loc) · 8.78 KB

Tri Marketplace

Decentralized marketplace with bundling-like features for sellers and buyers. Buy and sell your everyday items in a POV-like fungible/non-fungible token marketplace.

⚡ Preview

Mobile
Desktop

🎯 Features

  • Create a seller account and sell goods on the marketplace.
  • Personalize your seller account with a name and picture to stand out from other sellers.
  • List unique ERC-1155 Multi Token Standard items and their initial quantities.
  • Listings are hosted and stored on the decentralized IPFS network.
  • Listings can be made up of common items, e.g. A burger could have extras, like cheese, bacon, etc...
  • When a buyer buys a listing, they're buying bundled NFTs listed on the blockchain.
  • Track your inventory, know when you're running low and re-stock.
  • Hide/Show listings from potential buyers.
  • Keep a history of all your orders and invoices.
  • Create a buyer account to browse and buy goods from sellers.
  • Filter your search by sellers or listings.
  • Display your owned tokens.
  • Track your order history.
  • Friendlier currency interface. Users can toggle between USD and ETH currencies.
  • Up to date ETH prices.

‎‍💻 Tech Stack

Client

Tech What for
TypeScript Make coding fun again.
React Build a component based user interface.
Next.js Server-side rendering (SSR) of React components.
Tailwind CSS Fast & powerful way to build a beautiful UI.
IPFS Http Client Upload files to the IPFS network.
MetaMask Crypto wallet used to interact with the Ethereum blockchain.
NFT.Storage NFT storage system with a great free plan.
React Three Fiber 3D Modeling of the MetaMask head animation.
Formidable Parse multipart form data.
React Hook Form Form state management and validation.
React Dropzone Upload image files.
SWR Cache & data fetching.
Axios HTTP promise-based data fetching requests.
Moment.js Parse & display dates.

Server

Tech What for
TypeScript Make coding fun again.
Solidity Write smart contracts.
Hardhat Ethereum development environment to compile smart contracts.
Ethers.js Interact with the Ethereum blockchain.
TypeChain Generate types for smart contracts.
OpenZeppelin Community approved implementations of ERC token standards.
PostgreSQL SQL database.
Supabase Host & interact with the database.
NextAuth.js Local and social authentication solution.
Axios Fetch data with promise based HTTP requests.
REST API HTTP API architecture.

DevOps

Tech What for
Polygon Mumbai Testnet network to deploy smart contract.
IPFS File hosting.
NFT.Storage NFT storage system with a great free plan.
Alchemy Blockchain development tools. Access the blockchain locally.
Vercel Host the client.

💡 Inspiration

I've always stayed up to date with cryptocurrencies and the blockchain. The how and why they work always made sense, but it wasn't until the first NFTs came along that I opened my mind to the many use cases and potential solutions Web3 and the blockchain offer. A quick search on blockchain development pointed me towards Solidity. To my surprise Solidity looked a lot like Javascript, and these "smart contracts" were very logical function based data structures. I was intrigued. A more thorough search introduced me to libraries like HardHat and Ethers.js, where TypeScript was encouraged. That's all I needed. TypeScript, React and Next.js are my specialty, and to see the future of blockchain and Ethereum development point towards my favourite tech stack convinced me to dwelve into blockchain development. What better way to learn than to create an full-on OpenSea NFT Marketplace competitor, leveraging the newest token standards, integrating off-chain databases, and overall introducing practices that I believe make the platform friendlier to the non-adapting public that will see themselves forced to turn to an inevitable Web3 internet space.

🚀 Learning Objectives

  • Learn the differences between the ERC-20, ERC-721 and ERC-1155 token standards.
  • Optimize for gas efficiency.
  • IPFS/Filecoin decentralized file storage programatically with NFT.storage.
  • Learn Supabase integration with Postgres and NextJS.
  • Store some information off chain, to save on gas costs and save personal info (seller data) to mimic for potential hybrid solutions.
  • Practice extensibility, modular and clean code.
  • Abstract/Interfaces similarities and differences.
  • On-chain and off-chain storage architecture.
  • Learn to think of a gas efficient architecture. Gas first code.
  • Reduce MetaMask requests per action.
  • Separation of concerns & folder structure in the frontend.

📜 License

License

Contact me