Mobile
Desktop
- 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 | 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. |
| 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. |
| 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. |
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.
- 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.