Accidental Art

A DApp with an easy to use front end - generating on chain generative art with a single click. Utilising Chainlink VRF, Moralis, Alchemy, Polygon and a custom external adapter.

Comment 3

Inspiration

Accidental Art was inspired by a fascination with generative art, and a desire to make things as simple as can be.

What it does

Accidental Art is a DApp that mints NFTs based of a random number produced by Chainlink's VRF service, and a custom build external adapter that calls an API to generate a random word to serve as the NFT's title. The whole process is done via a single button click on a front-end hosted on Moralis, and uses the Matic/Polygon Mumbai testnet for speed and convenience.

How I built it

  1. I created an external adapter that calls an API to generate a random word, and added it as a job on a chainlink node I spun up on the Mumbai testnet.

  2. I customised the Random SVG code template from Patrick's tutorial to draw more complex shapes, and call the external adapter job I created. Utilising the random number to pick the number and kinds of shapes are drawn, their colours, sizes and positions. Then combining with the random word to serve as the NFTs name. All deployed using hardhat via Alchemy.

  3. I then designed a fron-end website to call the contracts functions to make minting the NFTs a single button press, utilising and hosting it on Moralis for simplicity.

  4. I finished it off by loading it on github and linking the front end to it.

Challenges I ran into

I ran into three main challenges

  1. The smart contract byte size limit - I was not able to figure out how to overcome it by deploying standalone libraries that do not impact the size of my code, so I had to refactor much of the shape generating portion, and reduce the number of shape options in order to maintain the custom naming feature.

  2. I discovered that React is very different to the standard Javascript I usually code with, and I struggled to create the front-end in React. Eventually I opted to keep it as standard HTML with Javascript in order to submit the project on time.

  3. I also ran into some issues with the deployment scripts, and had to customise them to use a bytes16 instead of bytes32 in order to verify the code via terminal.

Accomplishments that we're proud of

I'm very proud that I was able to go beyond simply changing a few lines of code on a smart contract, and go as far as modifying it to use a library and an external adapter. And that I was able to link a smart contract to a front end for the first time.

But mostly I'm proud of being able to complete this project on my own and learn more than I imagined I would at the start of this hackathon.

What we learned

I learned an absolute ton about smart contracts, interconnecting with oracles, using other EVM compatible chains, using github, and deploying front-ends. But most importantly I learned what I want to learn more of, and what my next steps will be to become even more confident as a developer (and that I can finally call myself a developer).

What's next for Accidental Art

As I treated this project as more of a learning experience than a project with a mass commercial appeal, I think the next steps would be to learn how to improve the code even further to utilise libraries to their fullest extent, and improve the front-end to utilise React once I learn how to properly use it.

Built With

  • alchemyapi
  • chainlink
  • externaladapter
  • hardhat
  • matic
  • moralis
  • polygon
  • vrf
Share this project:

Updates