The latest articles on Forem by starwiz-7 (@starwiz7). https://forem.com/starwiz7 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F364763%2F7bda8909-9b08-4d19-9f00-c90261d50663.jpg https://forem.com/starwiz7 en starwiz-7 Thu, 12 May 2022 19:01:38 +0000 https://forem.com/starwiz7/nft-fair-2008 https://forem.com/starwiz7/nft-fair-2008 <h3> Overview of Submission </h3> <p>You've probably seen numerous articles, dedicated websites, and even movies detailing what these NFTs are and how to obtain one . However, there should be a location where you can get your hands dirty, mint some NFTs, sell or buy your work of art, and even play with them.</p> <p>What did we use to build this:</p> <ul> <li>Backend - <strong>Appwrite</strong> </li> <li>React Framework - NextJs</li> <li>Everything Web3 - Thirdweb</li> <li>UI Components - Chakra UI</li> <li>CSS Framework - Tailwind CSS</li> </ul> <h2> Submission Category: </h2> <h3> Web3 Wunderkinds, Wacky Wildcards </h3> <h3> Link to Code </h3> <p><a href="https://github.com/starwiz-7/nft-write">Github</a></p> <h3> Additional Resources / Info </h3> <h3> The flow of the app </h3> <ul> <li>First, connect your wallet, right now only metamask support has been provided.</li> </ul> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--VIvhrPHW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sktl4x12vt4rbdqj1seg.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--VIvhrPHW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sktl4x12vt4rbdqj1seg.png" alt="Image description" width="880" height="819"></a></p> <ul> <li>You can create your own pixelated NFT by going into the create tab.</li> </ul> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--NUODRqAz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/co2knis3c8d3mckjrl17.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--NUODRqAz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/co2knis3c8d3mckjrl17.png" alt="Image description" width="880" height="365"></a></p> <ul> <li>Give the name, description and price of your very own NFT.</li> </ul> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hXM60gGW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1l85gumxs1dfmye8t9yv.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hXM60gGW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1l85gumxs1dfmye8t9yv.png" alt="Image description" width="880" height="432"></a></p> <ul> <li>If you visit the Marketplace tab, you can see our marketplace and buy any NFT that you like.</li> </ul> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--idQO8jO_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oozhyqs9medyofcjahuj.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--idQO8jO_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oozhyqs9medyofcjahuj.png" alt="Image description" width="880" height="532"></a></p> <ul> <li>You can also view the NFTs price, description on the specific NFT page.</li> </ul> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--wb4bSd-q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/175k1jzus87cene5tnp7.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wb4bSd-q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/175k1jzus87cene5tnp7.png" alt="Image description" width="880" height="475"></a></p> <ul> <li>To view the NFTs that you have owned, just click on the tab where you can see your account address.</li> </ul> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--TyckAaCd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xy45hpa3oukzn6ivztt9.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TyckAaCd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xy45hpa3oukzn6ivztt9.png" alt="Image description" width="880" height="440"></a></p> <ul> <li>You can edit your profile for giving it a personal touch!</li> </ul> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--VqbSFwha--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2xzxeopfka9cqcavv36.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--VqbSFwha--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2xzxeopfka9cqcavv36.png" alt="Image description" width="880" height="438"></a></p> <h3> Appwrite usage </h3> <ul> <li>We have used database to store the profile details of the user</li> </ul> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--locHvyz_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3iqhuvatw7fd8ye52kf9.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--locHvyz_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3iqhuvatw7fd8ye52kf9.png" alt="Image description" width="880" height="526"></a></p> <ul> <li>We have used storage to store the profile picture of the users</li> </ul> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--xqzQQSR2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6qkrnzi5b2kq5lj2bd8.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xqzQQSR2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6qkrnzi5b2kq5lj2bd8.png" alt="Image description" width="880" height="459"></a></p> <h3> Disclaimer </h3> <p>We look forward to deploy this so that anyone can use this! Currently it won't work without the private key :(</p> <h3> Team: </h3> <ul> <li>Me (Aryan Yadav)</li> <li>Charles (<a class="mentioned-user" href="https://dev.to/charlesvj">@charlesvj</a> )</li> <li>Cyril (<a class="mentioned-user" href="https://dev.to/cyril2019">@cyril2019</a> )</li> </ul> appwritehack