BlockHeads Ep 5: Pumpkin Carving on Blockchain

Captions as YouTube publishes them, usually machine-generated, so product and people names can be misheard.

1. 0:00

   hello everheads i hope you guys are ready for this week's ghastly ghostly ghoulish episode of blockheads where we'll see if i can create a community pumpkin carving app that runs on blockchain so sit back relax and enjoy so pumped to shorehand from pumpkins we're all going with that uh here are your pumps you can see the pumpkins you have created here makeup you can actually make or design your jack-o-lantern

2. 0:25

   and then here at community pumps you can check out what everyone else has made and this last button your wallet you can see your pumpkin go on to the blockchain marvel at my microsoft paint mastery the community tokens up here so people can see which ones are their favorite and which one is the best pumpkin so yeah i think it'll be a lot of fun and i'm ready to jump right in open vs code cd

3. 0:50

   whatever there we go and then now we're in lantern i think cool yarndev hey okay there we go speed okay so we have our running application and let's move on to adding well react bootstrap because i love not dealing with css sometimes sometimes i like css every now and then so now it's time to actually get down to business gosh what would life be without stack overflow behave you tool okay

4. 1:24

   there we go see if that worked there we are look at that it's nice when life works out for you sometimes so i thought it'd be fun for the homepage just to kind of have this like giant scary pumpkin on the front of the page so i went ahead and downloaded it ah it's gorgeous i love it before i continue i think this block atlanta looks pretty vanilla it doesn't exactly strike fear into my soul so i'm going to go over to google fonts

5. 2:04

   and look at this thing called creepster i'm going to take this embedded link copy it over into my index.html you just toss it right on in there um then i'm going to go to my global css here where it says black lantern let's do class name is equal to scary style font did i save globalize excuse us there we go oh block the lantern oh i think it looks pretty cool so now i think it'll be fun would be to make the carousel for the community pumps take this class name

6. 2:43

   take this row paste it here okay it worked i mean that like awkward animation looks a little weird but i mean i think for now it's okay so i decided to make a folder called components uh or component i guess in this case and a file called communitypumps.js um i'm gonna use rc was it rcsp yeah you're gonna resolve the div oh where the oh and also you do this that work okay well that's yeah we're going to fix that ah okay but i think for now it's fine

7. 3:42

   you know what i decided i hate the carousel i'm gonna go back and get rid of all and replace with something i think it might look a little better so i'm gonna just nerf all of this and you know what i'm gonna be review too let's go back to app.js and you can get rid of this i don't i don't i don't need any of this i don't want any of this okay call community pumps back i think it should work oh look at that it worked also if you're sick of hearing community pops like mention other comments because

8. 4:18

   i'm already getting sick of saying it instead of reinventing the wheel i'm going to go to npm's website and i found this thing called react canvas drop oh okay restart the development server okay oh look at that that's cool okay i don't even add a background to this because i would love is or maybe you could have people make their own pumpkins yellow pumps can i erase this oh i can't erase it um can i erase okay well

9. 4:50

   i'm gonna keep playing with this see if i can actually turn this into something so i figure out how to save my images at least save them as a json file so if i can attempt to draw this you know happy face here wow the eyes are so bad okay great that's fine um and i hit this button i created you can see it's super fat object that holds all the um all the points of this drawing i think

10. 5:19

    so if i i don't know just keep messing with this and click the button again look at me like an even fatter object yeah it's okay yeah so it's looking pretty fat so let's see if it's done oh wow that was fast that's what she said please please it sounds like a one of those commercials you're trying to avoid click here to get the image in a minute all you need is to pay 9.95 but wait there's more hang on to your sheet baby cause this one's a screamer

11. 6:06

    i'll be back now draw another happy face my happy face is more creepy oh i'll move my face there we go there we go look at that i have a jpeg of my component oh this is perfect okay so now what do i want but you don't want what you want what you really really want so i feel like i'm a good point this application to pause and try to figure out how the world of nfts fits into this application so i still know too much about it but

12. 6:51

    what my immediate direction is is to take the string fight object that we get from the get saved data method for the canvas and somehow mint that make it unique and push it onto the blockchain so i'm going to head over to nir.org and play with one of their examples to see how it all works and see if i can keep moving forward i did some things with some code and some stuff and some joy i took the example code for the

13. 7:19

    nfts off of nearby's website and just kind of broke it apart and dissected it as well as replacing you know the identifiers of token with pumpkin just to make it clear for me what i'm actually doing so i learned that minting is a process of adding new coins or creating new coins in the physical sense so i create new quarters pennies nickels like any of these things in the cryptocurrency world it's also the process of adding new cryptocurrency to whatever blockchain that the cryptocurrency

14. 7:43

    exists on so it's not just restricted to coins as well so i found out it's like the cryptokitties like you know at some point they had to create new cryptic kitties so new cryptic kits are being made and add to the total amount of cryptokitties uh in our exchange in our little application here i'm going to be making you know new pumpkins to add to a list or people will be making new pumpkins and i want to add an upper limit to the amount of because we created so we can kind of keep them as something special

15. 8:09

    and have their whole have them like hold their own intrinsic value it's like a limited supply of these pumpkins that could be created so let's keep going and seeing like what we can create okay so let's try this one more time and see if it works hmm okay so that didn't work either what is going on but what i understand is that gas is kind of the total computational cost of doing something on the blockchain

16. 8:59

    updating pumpkin registry updating older user pumpkin registry and then they're saying no new user was found so i've never created a pumpkin for the blockshop account so i just gifted them their very first pumpkin and now just to verify this all works i can do window dot contract dot get pumpkin owner again after the weight keyword keep forgetting that and instance of object token id six

17. 9:32

    and sweet so the pumpkin was successfully transferred from blockheads to block shop guys i'm excited to show you the finished version of block of lantern so down here we have our community pumpkins ichi's randomly load every time the page refreshes um you can see them actively drawn which is pretty cool you can see who owns these pumpkins and you get the id of these particular tokens and i can

18. 9:59

    save this drawing for later so if i ever want to leave this page and come back to it it saves local storage and automatically redraws we can pick up where i left off i can export a jpeg file i can undo any mistakes they make and of course i can push it to the near blockchain so here is the data um that they let the drone get saved as and here's what it gets compressed down to so that will save us on gas and competition time which is pretty nice

19. 10:24

    when i refresh the page the pumpkin at the uh drawing is now some blank again ready for more pumpkin to be drawn and of course if i go to my pumps i can check out my latest pumpkin right here and if i want to i can send this to my friend let's send it to blockshop.testnet and send it off to my friend wait a minute and then you can see these messages letting me know the pumpkin was sent okay and there we go we have our news

20. 11:01

    pumpkin as well as the pumpkin ids we know the original one and yeah it's like a part of my new collection so i mean this is it this is black lantern thank you so much for joining me on this journey this project was a lot of fun for me to make you can check this project at github in the link in description below to add your own spin on to it or just to check out the project comment below if

21. 11:25

    there's anything you want to see in the future i can tutorial for this project or if there's anything i can do to make this content better for you guys i'm going to make this project bigger and better with each upcoming video so like and subscribe to keep notified on these videos and guys happy halloween and hope you guys have a great day