NFTs as gifts

Hello everyone and welcome to DevNTell. This is Withheart. I am stepping in for Narb today; he is not able to make it. If you have not been to DevNTell before, DevNTell is a 30-minute window for members of the development guild to showcase something they are passionate about or have been working on. This could be an awesome project you've been working on, demonstrating unit testing best practices, automation goodies, smart contracts, how to structure project, etc., etc. Basically, if you've got a passion for something, this is your opportunity to share it with the community. Today we have Javi presenting NFTs as gifts. Ready to go, Javi?

Thank you so much. Thank you so much, everyone, for being here. Happy New Year to everyone. This is my first time doing something like this; I'm so excited. Thank you for the opportunity. I'm unfortunately feeling a little bit sick; I've been sick all week. So I know I'm not at my 100%, so I made a set of slides to help me go through the points that I want to cover. So I'm going to start by giving special thanks to these three amazing people: Withheart, Narb, and Dhaiwat. I see how you're always helping others, helping the community, inspiring others, because you've helped me get to this point. I wouldn't be here if it wasn't for you, and you've inspired me to take the guts to do this. So thank you so, so much.

Also about the project itself, kind of like a spoiler alert: I'm not going to be talking about the business side because I decided not to launch it. I was dreaming about launching it on Product Hunt today and having your feedback and maybe even your votes. But there were some Polygon problems this week and I decided that I feel it's too risky to start charging people with credit cards and relying on the network problems, so I'm just going to stick to the development side. So my goal here is to just share the knowledge, share all I've been doing, why I do it, how I do it, how I did it. And hopefully what I really, really want is to be like these three people and help others and inspire others with my example.

Let's just get to it. As a quick introduction, I would like to say that this strategy's been working for me. I'm just going to stick to the development side, right? So as a developer who's learning Web3, if you ever feel stuck in a tutorial hell, I would suggest this strategy. Just start with, for example, with a Buildspace project. I love Buildspace, so that's what is working for me. But whatever you want to learn, start from that tutorial, from that course, right? So then complete it, finish it, paying attention to what you are doing. I'm saying that because with Buildspace, it's pretty easy to just copy and paste the solution and just finish the project and get the NFT, right? But if you pay attention, once you finish the project is actually when the fun really begins. So here's my recommendation: when you finish the project, try changing things, try making it your way. Then try adding more libraries. Just try things. Like you saw something on Twitter that you like, some new animation fancy thing, just try it. Just see what happens. Dream crazy features. Dream about the potentials of Web3. Find ideas from other people, other projects, other websites, and just see what happens if you try to add it. That's kind of what I've been doing; I'm super happy with it.

That's kind of how this idea was born. I was, as a Buildspace student, I love how cool they are, like giving you NFTs when you finish a project. Also if you are a contributor on their Discord, they award you an NFT and I was like, 'Wow, that is so cool. What if I can do something like that to help a friend?' I have a friend who draws very cute dogs and, for example, like a couple years ago, he used to make drawings for some clients on Instagram, like grabbing the picture of the dog and drawing the dog. So I thought like, 'What if I do something like Buildspace so this guy can reach out to all the clients he had two years ago and say like, "Hey, Merry Christmas, thank you for being a client of me two years ago. What if I made this NFT of the drawing I made?"' Like a way for to give those drawings as NFTs as gifts to friends or clients. And then I thought like, 'Oh, what if I let anyone create NFTs as a gift?' Like with the same idea than for my friend, but for any type of friend or gift, right? And then I thought, 'Wait, if you're the one giving the gift,' I realized this because my friend is not really familiar with MetaMask or the Web3 space in general, but I thought like, 'If you're the one giving the gift, you don't really need a MetaMask or a wallet address. It's like the recipient is the only one who needs to like own the NFT, so they need a wallet address, right?' So, 'What if I make a credit card way to create an NFT and send it as a gift?' So, okay, that sounds like a challenge, so challenge accepted. Let's try to do it.

So the first thing that I did is I went to Excalidraw and drew some mockups. I know myself and I'm always like complicating my own life, so I decided to be very strict with this. I want to make a very minimalistic set of screens and just stick to that and stop adding other things because then I would never finish my own side projects. So this was my initial plan and I tried to be loyal to this. The first step would be as simple as possible. Just text, some intro, and a call to action, and move on. Then like an upload stage, right? You select your file, your video, your image to upload. Then a preview screen, so simple that anyone could understand it. Then the pay screen, just the pay button, just that. Then once you paid, a way to like wrap the gift and send it to your friend, right? So a way to contact your friend. And that would be the whole flow for the one that is giving the gift. Then when the friend receives the invitation, there will be like a 'Hey, welcome, there's an NFT for you and please connect your wallet or somehow like give me the way to give you the NFT,' right? And that would be everything.

Then I was able to do this in two weeks. So let's go from the mockups to the execution. And for that I made a video, like a full tour video in 90 seconds of how it works. So you will see all these seven steps from Excalidraw, you will see in action in the final product. Let's watch it; it's just 90 seconds. So this is kind of like the landing page I made. I added this effect if you click on the banner; I thought it was like kind of nice or funny. Then this is the upload process, right? You can drag and drop an image or a video. This is the preview page. I thought it would be nice to add this extra confirmation to say like, 'Yeah, the content is original,' just in case. This is the payment, the paywall screen. Very straightforward, no magic here. Then you'll get to the confirmation that you paid correctly, right? Then you get to finish the gift, like saying who is it for and what is the title of the NFT. And then you get a magic link that you can share via social, via email, or send it to your friend, whatever you want. Then the friend will visit the link, right? This is what the friend will see: like a 'Hey, hello, there's a gift for you,' and you just have to enter your wallet address or your ENS address. And when you click it, all the magic happens from the back end. I will mint an NFT for you, I will pay the gas for that for you, and I will give it to you so the address that you entered will be the owner of that NFT. And boom, you see the NFT here, you can click to watch it on OpenSea. Sometimes OpenSea takes a while, so I'm saying like, 'Please be patient,' right? And maybe in a minute you can go back there, refresh the page, and boom, maybe you need to extra refresh the metadata, right? And refresh and it will be there, and that's the whole thing that I did.

Now I'm going to review step-by-step, screen-by-screen, what I did to just describe the stack that I used, the libraries that I'm using, how I made things. I know there's so many ways to do everything; this is not the best option, this is the option that I took and I really enjoyed it and I love to share everything that I did. If you want to interrupt me or ask me any question at any moment, just feel free. But I'm just going to go again based on the Excalidraw steps and the final implementation on this mobile view. I'm just going to describe the things that I used on each one of the steps. So for the landing page, for the whole site, I'm using Next.js hosted on Vercel. I just love that. I'm using Tailwind CSS all over the place and I'm also using it for dark mode. This is the first time that I'm using like light mode, dark mode mode with Tailwind CSS, so it will read from your system. If you switch to light mode, it will be light and that was very enjoyable for me to do, in my opinion, for the first time that I do it. I really liked that. What else? I'm using Framer Motion a lot. So in this effect that I created here to show these kind of animated stickers with facts, Framer Motion is the library that I'm using the most. If you're interested in how I did this, I can make a tutorial, a blog post, or we can have a call later; I can share the code, I can share the screen, whatever you feel I would love to share if you like it, but it's okay. What else? I'm also using this 'use-boop' library from Josh Comeau; this guy is amazing and I'm using to sometimes make things shake a little bit. Like for example, if I refresh the page, this is going to like shake, like 'whoo,' a little bit. I just, I don't know, it's just a silly thing, but these details make me happy to implement them and this is in many screens I'm using effects like this.

What else? The second screen, this one for uploading things, is very basic. I'm using react-dropzone, this React library, to be able to drag and drop in this area. So then when the file drops, I'm uploading into IPFS, I'm saving the URL or the ID generated from that upload, and I'm also using Chakra UI modals if you click here to ask for help on any of the steps. The next step is when you preview what you uploaded and decide if you want to go ahead or upload a different one. And I'm using a library called react-parallax-tilt to do this effect. Oh, let me just quickly show you. If I drag this one and hover over this fancy effect, it's very easy to feel tired of this effect once you see it twice, so maybe I will remove it, but it was so easy to add it that I think it's worth it. It's worth trying it; I totally recommend it. I'm using Redux not because the app needs Redux, but it is very easy to use local storage by default with Redux. So if someone makes a mistake and close the tab or refreshed the tab, the progress will not be lost very easily with Redux; I'm just used to do that. I'm also using Chakra UI modal and toast in this screen. And I'm using this library called rough-notation. Here's what I did: when you have to confirm that the content is original, just in case, I'm forcing you to check this. And if you don't check it, see what happens when I click here: this gets highlighted in a very animated way that I like, like this. Boom. This is with the rough-notation library for React, very easy to use and very enjoyable. And if you keep trying, you will see like other funny messages using Chakra UI toast.

So, yeah, let's just confirm and move on. And what else? The next screen would be the paywall, right? The checkout page. Very straightforward. I wanted to use Apple Pay because it's just one button and one click and it's the best thing ever for Web 2 payments, in my opinion, or Shopify or other like one-click things. But I realized that you have to pay like the developer annual fee to Apple if you want to add the Apple Pay, and I was like, 'Um, maybe I will add it in a different day when this becomes a real business.' So right now it's just using Stripe, it's in test mode because I'm, yeah, it's too risky for me to start charging money if I'm not fully sure it works on mainnet. That's a different story. So what I'm doing here is I'm using Stripe Elements, very easy way to integrate Stripe payments in React. And I'm using Vercel and Next.js, this thing called API routes as the back end to process the Stripe request and the information. To connect to the database and verify the payment, I'm using this. If you've never used the Next.js API routes as a back end, I totally recommend it; it's a life-changing stack instead of using Node.js or other services; I just love it.

What else? When you confirm your payment in this screen with the confetti stuff, this is the moment when I'm finally touching a database. I'm using Supabase, so at this moment I would create a new row on the payments table saying that this payment just occurred, that it wasn't, it just happened, it's an state of uncompleted because the friend never claimed the NFT. But at this moment, yeah, we have a payment, so I will store that on the database. The next step is very straightforward, just adding this text info that will be in the metadata for the NFT, like the title or the description. And when I generate the magic link that you send your friend, to make it look like a YouTube URL and not just a numerical ID, I'm using this Hashids library, very easy to use too.

Then the next screens would be when the friend receives the magic link and clicks there. They will get to this screen that is very straightforward and minimalist; the friend only has to type the Ethereum or ENS address. And then all the magic will happen behind the scenes. So maybe this is the most tricky part: when the friend clicks the button to let's say claim the NFT, right? I'm using a back end to do all the magic. So I know this parameter here from the magic link and I know the address. So I'm using AWS Lambda receiving these two parameters and then I would do all the magic there. All the magic, long story short, is basically I'm doing first, I'm minting the NFT because I know the title and the URL of the media file from the database that I'm grabbing starting from the payment ID. So once I mint the NFT, I will transfer the ownership to the wallet address of the recipient, in this case the friend, to this value right here. And then I will update the database to say that the payment was finally completed. And that's it; I tried to be as fast as possible.

Maybe it was too generic or maybe generic depth, but I think that's the main thing, the list of libraries I used, the list of steps, and the how the flow inside the app works. And I think that's it. I could describe more things that I added or just leave it open for questions. We come from the previous Town Hall that was like 75 minutes long, so I don't want to consume more of your energy and just leave it open if you want to ask questions or whatever you want; I would be happy to help you for a bunch of more minutes if you want. Thank you so, so much for your attention and for being part of this.

Javi, thank you so much. Like, that is seriously one of the best presentations I think I've ever watched anywhere. You could just feel your excitement and happiness and like love for this thing that you were building in every word that you spoke. It was so fun and entertaining and I really appreciate you and all, appreciate that you were here to host this for us.

Oh, thank you, thank you so much. This project's made me really happy; it was a huge, very awesome learning challenge. I don't care that I did never launch it; I don't care if I ever launch it. I think I already won by trying it, by building it, and by sharing it here with the community. I hope if any of you wants to learn any of the things I did, maybe we can chat during this weekend or any moment; you can DM me and I will show you everything I have. I cannot believe how many people are on this call and I'm so thankful. I mean, this is so, this is very special for me. Thank you so much, really.

I think this was special for all of us. I really mean that. Like this was quite a presentation. Thank you so much. Does anybody have any questions?

I only joined partway through, but yes, very well done Javi. I could feel the energy as you were wrapping it all up here. Do you have a GitHub repo available for this or are you still keeping it on your end for the time being?

What a great question. I definitely want to share the repo, but if I don't do it today, it's because it's not because I don't trust you, it's because I don't trust myself. I mean, if I visit my GitHub, I've always coding alone. I worked a lot with GitHub and myself but only myself, and I'm not experienced with sharing the repos with other people and I'm just afraid about leaving private keys random places in the code. I heard of people losing everything by sharing a private key on a repo, by bots on GitHub, right? So I will take a look at each one of the pages and the files in the code and create a new repo from scratch and make sure that it's safe to share and, yeah, of course, I will share it.

But I'd like to go beyond sharing the code, because there's a lot of, like if I give you access to the repo and you want to try to run it locally, it's a little bit hard because there's a lot of keys or values or IDs that you'll have to add to your secret files in order to make it work. So if you don't want to go to the hassle of creating all these parameters to make the app run locally, I can just, if you're interested in one specific screen or step in the process, I can just make a YouTube video one hour long, two hours long or share the screen, or we can meet somewhere in time and I will show you line by line what I did or even we can make it from scratch. Like if you say like, 'Oh, I really love the effects on the landing page when you click like this,' instead of looking at my code, we can meet tomorrow and we can build it from scratch with code, with CSS, and with Framer Motion and enjoy the process. I think that would be much cooler than just looking at my repo. But I will definitely share it.

I think that would be a fantastic idea. I think that was something Withheart and Dhaiwat and a whole bunch of other people were trying to get going in the Dev Guild actually, these code-alongs. And I'm sure a lot of people would really appreciate that. No, it doesn't have to be tomorrow, it can be like whenever, right? But if you ever get around to hosting something like that, I'm sure you'll get quite a crowd.

Wow, yeah, code-along. I love that idea. I mean, yeah, I would love to do that every day. Yes. And after this presentation with you guys right now, yeah, I really want to be more active, read more in the Discord, and be more active helping everyone and integrating into this amazing community. So if you're up to a code-along any of these days or next week or next month, I would be there. Yes. It can be a lot of fun; every time that I do a code-along with a friend, it's so much fun and it's such a great way to learn. I'm totally in.

Yeah, let me just finish the DevNTell real quick, do the closing statement real quick, but yeah, we should definitely figure this out.

Yeah.

Yeah, again, thank you so much Javi for making this presentation. This has been a very special moment. I had no idea I was walking into something so impactful and I really appreciate you having been here to present this to us today. The next DevNTell will be next week, one hour previous, which is 9:00 AM Pacific Standard Time, will be Nikita Grishin presenting 'Own Your Words'. Thanks everybody for coming!