Meta Punk

Cover image for I built my first dApp!
Nick Taylor
Nick Taylor

Posted on • Originally published at iamdeveloper.com

I built my first dApp!

This past weekend I completed a web3 project from the awesome folks at buildspace.

The project was building out a dapp that allows you to send messages and store them on the blockchain. Under the hood, it was Solidity for the smart contract, TypeScript, NEXT.js, Theme UI, good old semantic markup, and a splash of ARIA in the frontend. Shoutout to the <details /> element! Aside from that, some other web3 goodies like hardhat.

The buildspace projects have really straightforward instructions. I did go a bit rogue though. I recently created a web3 starter, and decided to use that as the base for my first foray into dapp development.

I also decided to make the project my own and made some modifications. For one, I added another field for the message in the smart contract for storing a URL. I was doing this quickly, so just opted to use images from a funny site I love, http.cat.

An open message on pics.iamdeveloper.com showing a picture of a cat in the message

The code is still a bit scrappy as it really was a weekend project, but I'm still happy with how it turned out. I've made some tweaks since then, but there's still a bunch of refactoring to do. 😅

If you're into TypeScript, there's a couple examples of declaration merging like this one to get the <marquee /> element in JSX.

The dapp is live running the contract off the Rinkeby network. Feel free to check out the dapp's source code.

And while you're here, check out the live dapp at pics.iamdeveloper.com!

The picture portal site

Discussion (3)

Collapse
lee profile image
Lee

🤩 this is awesome Nick!

Collapse
lee profile image
Lee

Making a note of some of the w3 resources for sure.

Collapse
chris profile image
Chris

Amazing work Nick, thanks for contributing to the space!

Those character names had me laughing 😂