ENS Gallery

The main idea of ENS gallery is to allow anyone with an ENS domain to proudly display the NFTs they hold. As long as the NFTs are in held in the same address as their domain, they can create a subdomain and point it to a sia:// address - the address where this project is deployed. The app will read use the ENS API to translate the domain name to an Ethereum address, then use the NFTPort API to fetch all the NFTs the address holds and display them in a gallery view on the web. Thanks to the elegance of ENS, this approach scales arbitrarily - whether its a single user (gallery.anon.eth) or a family (father.family.eth & daughter.family.eth), they all can display their NFTs independently. During the process, I realized the project can also be deployed as a standalone app under its own ENS domain so that even folks that don't yet have an ENS domain can use it to display their collection (e.g. nftgallery.ens/#/0xc0ffee would show the NFTs of 0xcoffee wallet). I plan to do that soon, purchase a domain and modify the app accordingly.

The project is pretty much a web interface to on-chain and off-chain data. At the beginning of the hackathon, it was just an idea in my head and I didn't know if it was technically feasible - I didn't understand how ENS works, where can I host the app and how to get the data I needed. In a triple stroke of luck, there was ENS, NFTPort and Skynet. First off, ENS supports sia:// links, so I could host the whole app on Skynet. Even better, other people can fork and host it on Skynet themselves. The GitHub action created by the Skynet team handles all the (I imagine) complicated stuff of pushing it to Siasky and it works smoothly, like a charm. Finally, thanks to NFTPort's API, I can get the NFTs owned by an address with just a single HTTP call. I would also like to thank the NFTPort team for their responsiveness and fast shipping cycles during the hackathon. The frontend itself is built using Redwood.js - a new-to-me JS framework. I evaludated a bunch of them at the beginning (I'm not a very experienced FE dev) and I settled on this one since it looked like it give me a lot of stuff out of the box and has a good community (both of which turned out to be true). One final tech I'd like to mention is Tailwind CSS - it's a godsend when it comes to creating web pages, at least for a frontend noob like me. It must have saved me days (!) of work.