Hero City

• 

  Viewing Page

• 

  NFT on Rarible

• 

  Design 3

• 

  Design 1

• 

  Design 2

Inspiration

My inspiration for this was the show CNN Heroes. It showed how many people in this world are really good and deserve to continue their mission to help support people around the world. Due to this, I felt that there needed to be a place to share their work, help fund them, and help the world through their work.

What it does

My application, Hero City, allows a user to create a post about their favorite hero. This allows their story to be shared to people around the world to inspire future users and also the hero that they write about. My application has the following features

Viewing Posts:

Users can view posts of many of the world's heroes and their stories. They can also donate to the hero in order to help fund their missions and help change the world.

Creating Posts:

Users can use the create post functionality in order to share their post with the world, they can talk about their favorite hero(s), share their story, and help the hero continue their mission into helping the world.

Creating NFTs:

People can create NFTs from our application. These NFTs can show the hero, their works, and much much more. This can not only popularize the hero and help them change the world faster but also to let the users have fun which is always good.

How I built it

Hero City was built using technologies that related to web 3.0 development. I used React as a framework in order to gain Web tools. I used Moralis for my authentication and NFT system as well as its plugin for Rarible in order to create and upload the NFTs. I used Sanity.io for a headless decentralized database CRM. This allowed me to easily view the data and add data to it from its interface. For storing the files, I used the IPFS or InterPlanetary File System that allowed me to store them in a decentralized manner. I used Web 3 UI Kit for some components that had styling and built-in functionality.

Challenges I ran into

Since I was still unfamiliar with web 3 technologies such as Moralis, IPFS, Sanity, and Rarible it was hard at first to get the main system running to work. I also ran into issues with Web 3 UI Kit because I had never used it before and I was giving it a try. Other challenges included uploading NFTs and learning GROQ (the Sanity Query Language)

Accomplishments that I am proud of

I am proud to complete a web 3 application. I am also proud to empower heroes from around the world to continue their mission and create change around the world.

What I learned

I learned how to use the web 3 frameworks mentioned above. I also learned how to use the interface from Sanity to build with a database. I also learned what struggles heroes face and what they need to overcome those challenges

What's next for Hero City

There are many features that could be implemented. The NFT section could be a marketplace on the site itself which would also allow comments on the NFT itself. I could improve the styling for the page to make it look better. I could also add better support for Markdown files and more fields for the content. There are also other features that could be implemented if I had more time.

Built With

• ipfs
• moralis
• rarible
• react
• sanity
• web3
• web3uikit