Defining Your Web3 Stack: Building Fullstack Dapps

[Applause] [Music] today we're going to be doing a 40-minute workshop on building full-stack dapps and really my goal here is for people who maybe you know there's a lot of protocols in the space there's a lot of cool projects coming out but for me when i first got started in web 3 i kind of found it hard to find what a web 3 tech stack looks like right now like what actually works what works well together and then piecing together how do i actually make all of these different pieces of the stack talk to each other so that's what i'm hoping to accomplish today so that you can leave ready for the hackathon and i'm going to leave you with some resources that you can fork and clone and it'll help you get started a little bit easier hopefully so part of this is going to be a little presentation kind of just going over some of the basics that i want to communicate and then we're actually going to walk through a project i wanted to live code it but there's just not enough time with what i want to do so we're actually going to walk through an existing project and then at the end like i said there will be some resources for you to just get started with so really quickly about me i do developer relations at edunode which is a core developer of the graph protocol i've been there for a few months and then i come from a more traditional software background i was engineering at paypal on the checkout experience for about a year and a half and then i worked at a startup for some time in between paypal and where i am now i also took a more traditional path to kind of my career i studied computer science in college and i've been an educator for six or seven years before doing developer relations i taught kids how to code back where i live so i've always loved to teach this is what i love doing and now with my job in denver i get to teach adults so that's just about me so let's talk about the web3 stack so this definition is actually taken from a blog that edunode wrote a few months ago but it's really clear really concise and one that i wanted to use here so when people ask like what is the web3 stack i think the best answer that i've found is the set of protocols that enable you building fully decentralized applications so it means from beginning to end there's a set of protocols that allows you to build dapps in a way that there's not any layer where it's like oh this is you know aws or this is you know you're putting this in like you know some standard database so it's the set of protocols that allows you to build end to end fully decentralized so before we get into kind of what my stack looks like and maybe what i would recommend for now or at least what i'm building with i wanted to talk about some of the characteristics and some of the important pieces of the web3 stack so as we move on this will make a little bit more sense i know we are all like really familiar with all of these so i won't talk through them specifically one by one but one that i do want to focus on is um native digital payments that's like the one thing that i feel like was really key when i first got into web 3 is when you think about web 2 like someone put it this way and it made a lot of sense to me in web 2 we put things like music and movies on the internet and this whole concept of like putting things that were in the real world on the internet like in web 2 and now we're doing the same thing with web3 by putting money on the internet and making money native to the internet rather than like some external thing and obviously like native payments is a huge part of web3 and why we're all here there's incentive mechanisms behind a lot of these protocols so i just kind of wanted to highlight that and then the other one that i wanted to highlight was self-sovereign identities so you know like just today actually this morning the supreme court overturned roe v wade and now it's up to states to decide if abortion is legal or illegal in their states and someone brought up a good point that there is a period tracking app called flow it's an app where women and you know people with periods can go on there and track their cycles as a way of kind of like no hormone birth control and the way that it is now in theory if you um are using this app your data is owned by flow and flow has been caught selling your data so in theory right if you are using this app and the government like your state government wants to prosecute you for having an illegal abortion they could take the data from this app and say look you usually get your period i don't know the 20th of each month and for the last three months you didn't get a period and now you have a period so obviously this is a very like nation-specific example that i'm giving but it's a very real world relevant example today where other people owning our data and having access to our personal data that can then be used against us in the world that we're in now isn't really a world that i think i want to live in specifically as a woman like going through all this so that's another thing that's really important here okay and now getting to kind of the building blocks that we're going to talk about here as we build out our stacks so kind of the primitives or the building blocks is obviously a blockchain and l1 uh blockchain development environment so as i'm listing these out and you're hacking this we can start thinking about what you're using for each one and obviously you don't need every single one of these it just depends on what you're building all of these are specific to a project but as i'm going through these and you have your idea think about which ones you're going to need and then think about which ones you might want to use so as we go through this talk you can say okay i wanted to use this one but she talked about this and then you can go back and look at the re like do research between them figure out the trade-offs and then pick the best tool so as i'm going through these that's what you should be doing so an l1 blockchain development environment and i'll go over examples of what these are right after this file storage off chain data protocols api for indexing and querying identity a client oracles and then i just grouped all these other as other protocols and this is actually also from the edge and node blog post that i'll link at the end if you guys want to read more thoroughly um so i have this little visual here this is what you should take a picture of if you are going to hack so this kind of lists out all of the different options in each part of the stack that i just described so as you're thinking through your project and you're like for example i need something for you know i need an l2 or a side chain what's going to be the best one for my specific project you can look through this list and like a lot of these people are here actually sponsoring so you can go learn about them um but as you guys are all taking pictures you'll see there's lots of options for all the different parts of the stack and the thing that's important to remember is that there's no one tool that's the end-all be-all for and it's not the answer to every single thing you should always like take a look at all of the options and decide what's the best one for this specific use case in this specific project so what i want you to do is don't walk away from this talk being like oh like what she said is like what i should be using in all my projects this is what i'm using for some specific projects and you should take this stack and adapt it to your specific project needs okay and then some that weren't included in that picture that i do want to include specifically for this hackathon because they're both sponsors is live peer and lens so live peer decentralized video infrastructure it allows you basically to build in live streaming to any dap really easily so if you're familiar with next.js you can literally just enable live streaming and then like minting video nfts just from an api row and then lens decentralized on custodial social graph for building composable social applications um there's qr codes there there's like guides to start each if anyone wants to take a picture these aren't going to be on another slide so i'll give you guys a second case anyone wants to okay cool okay great so here's what i'm using for this project that we're gonna walk through together um it's called web3 rsvp and we'll go through it together but basically the project is a way for you know you guys know eventbrite it's an events platform where people can create events and then users can go on there and rsvp to different events the only thing that's different is that you as a user you have to deposit some ether and then you'll get that back when you show up kind of like what you had to do here i think right like hackers had to deposit some and you get it back when you actually show up and it's basically just to combat the problem of like all the lists filling up really fast and then people don't actually show up and these places are half empty so that's what we're going to go through so for my l1 i'm using ethereum for my side chain i'm using polygon for the rpc provider i'm using inferior in this specific project but i've recently started using anker and i really like anchor a lot for my dev environment i'm using hard hat but i've also started using truffle recently really really recently um it's newer and like it has some advantages over hard hat for specific projects so i'm going to start trying to use truffle more for off chain storage i'm using ipfs and web3 storage for indexing i'm using the graph for identity i'm using rainbow kit and coinbase wallet and we're going to talk through what this means in a second but rainbow kit is a way for you to easily offer your users a basically that like connect wallet button at the top and then for the actual wallet i'm using coinbase wallet which is also newer so i was kind of testing that out and have been experimenting with that and then finally for my client i'm using ether.js so now i'm going to walk through this with you guys and what this looks like okay so i'm gonna walk through the setup let me double check my time how much time i have okay cool so i'm gonna walk through is the text big enough okay i'm gonna walk through the setup for so really what i want is like if you're here and you're like i have a really good idea but i'm not sure like the nitty-gritty like how do you set up an rpc how do you make your smart contract talk to your friend and like how do you do all the little pieces that make everything come together that's what i'm gonna like walk through here so real quick i wanna just show you an overview of the contract contracts it's so small okay there sorry so like i said um in this contract we are setting up a struct because in this contract multiple people should be able to create multiple events right so this is the way that we're storing the events in the struct is where we're storing all the things that are related about the event so for this specific example we're saving an event id the address of the person who created the event the timestamp of the event the max capacity of the event the deposit that needs to be sent in order to rsvp to this event and this event data cid so this event data cid is related to off chain storage so you know to save things on the blockchain it's it costs gas right so for this project i wanted to minimize the number of items that i'm actually saving to the blockchain because for example the event description i don't need to save that on the blockchain i can save that off chain save money it doesn't have any effect on like the security or the functionality of the app so that cid is just for you guys to know that's related to off change storage and we'll talk about that in a second but it's basically the ipfs hash the reference to our data that's going to come from the front end so then we create this mapping where'd you go okay so this mapping so this mapping maps the id and id to a struct so here what we're doing is we're creating this collection it's basically like a dictionary where for every id you can find all the information about the event that we just listed the time stamp the deposit the max capacity and then here we have our functions that do the different things the first one the most important one is creating an event we pass in all of these information including the cid so that's something to know so remember we're going to have to compute and get the cid before actually calling the smart contract function which we're going to do in the front end so just hold off on that but then when we do have that we're going to pass it into this function this right here creates a unique id by hashing together a few of the different arguments because what you want to do is like in a hash table obviously you want to minimize what are called collisions where basically you want to have a unique key to every definition so if you have two that have the same key you're going to be referencing perhaps the wrong one so one thing to combat that is to get a really really unique id by hashing together some of the parameters that get passed in so that's what i do there and then um here is where you actually create that entry in the dictionary by calling this and then one thing that you'll notice in my contract is i have a bunch of custom events so here i'm writing custom events and the reason why i'm doing that is because in order for my indexing and query layer which in this case i'm using the graph in order for it to understand what's going on in my smart contract the data that i want to expose needs to be exposed via events so the data that you want to index and query needs can only be accessed via events so that's why you'll see you might be like why are you creating an event and then also and i mean like creating the actual event with the function why are you calling the function create event but then also emitting an event called event called new event created that are basically exposing the same data right but it's because my subgraph it doesn't have access to my functions it only has access to my events so that's another thing to know if you want an indexing and query layer and what that does is it allows you on your front end and in this app i'm going to show you it allows you to build a dashboard of past events events that i've rsvp to events that i've created it's a way for you to ask questions about your data from this contract so for example how many events have irs repeat to how many events have i created and you know with that data you could build a dashboard for each user to let them know what events they have coming up what events have already passed so in order to do that with the graph you need to do it via event so that's what these events do and you'll notice at the end of each function i'm actually emitting those events then i have a function called create new svp new rsvp where i pick the event based on the id so someone the user passes in the id i go locate that one and i say all right for now on we're calling this my event then we you know they have to pass in the minimum deposit the timestamp has to be such that the event hasn't already passed um they get added to this array of rsvpers and now we have this array of rsvpers right but now in order for them to get their ether back they need to actually we need to have a mechanism for them to be confirmed or for them to be checked in so that's what this next function does so again we pass in an event id so we know which event we're talking about we have to make sure that the person calling this function is the owner of the event which is why in our struct when we defined this we added that in so all of these little pieces that are there they're there for like a very specific reason right and then we loop through the rsvps we loop through the rsvp so this is confirm all attendees and it just confirms every single one one by one so we made this function because for example if you guys are all here and let's just say 50 of you guys rsvp'd and i counted and there's exactly 50. i don't want to have to manually like confirm everyone one by one so i might just want a button your users might just want a button to do confirm all so that's what this one does and then down here we have confirm specific attendees where you pass in the event id and then the address of the specific attendee so let me just show you guys what this looks like on the front end for you to have a kind of like a better idea of how this looks okay so this is what it looks like um here is where the events that get created end up and if i connect my wallet and we'll talk about how to do this too i just kind of want to show you so you know what i'm talking about when i say certain things if i go here to my rsvps i haven't rsvp to anything actually with this wallet so let me do that real quick but this is where it'll show up and you do this using the graph using your indexing and query so if i go to rsvp actually i don't know if i even have matic but i'll just try this real quick okay i don't have enough matic okay but let's just say i rsvp'd then it would show up in my dashboard and then i would be able to create an event this is the app that we're talking about so now let me switch back to the code okay and then finally withdraw and claim deposits i'm not going to walk through this this is basically for the event owner for people who didn't show up for me to take your money because you didn't show up so i get to keep your deposit that's what this function does so now this is our back end right this is our smart contract but now we need a way to do the everything else in our client application so i'm going to open that code up right now too okay okay okay um important things to know so create event is the file in our next js project that's that page where someone creates an event god damn it here let me show you i forgot to show you that oh man i stopped the server okay well it's like a form where you just put in the event name the event description all that stuff that we talked about but some things that aren't in our smart contract structure so remember we didn't have like event name we didn't store that in the smart contract we didn't have event description we didn't store that in a smart contract but still it's stuff that we want to show in our app but the only difference is that we're not actually storing it on the blockchain we're storing it off chain with web3 storage and that's what i'm going to walk through real quick so let's go down here real quick so here is this form so here event date and time this is where the person fills in the date fills in the time fills in the max capacity all that stuff that i talked about and we save this all in state you know react state and then what we do is we pass the stuff that is not on chain so to web3 storage with this call right here so it's just the next next.js route it's called create event so let me just pull that up so you can see what that looks like so an api create event so it's just a function that initially checks the request if it's a post then it passes it down here um i won't go through this like line by line but basically all it's doing is it's taking the body of the request and it's pushing it to web3 storage and it returns you a cid remember that's the cid that's like an ipfs hash reference and it does like this one is a little longer and a little bit more complicated i would say because we're passing in an image too so it's not just text but if this was just text it would be much simpler but here i'm passing in like an image and that's how you get that really cute image so let me just show you here so in create event okay here so in create event this is where we make that api call so we say hey we've saved everything in state here's the body here's everything that we want to store off chain the event name event description link and the image so now that we've stored the stuff off chain once that response comes back as successful like yes this has been posted to web3 storage it's up on ipfs now we actually need to make the call to execute the function on the smart contract and pass in the cid because remember in our smart contract it wants it wants that cid in order to do that let me show you real quick create event it needs a cid so that's why that we did this in this order because in order to call this contract it would be missing an argument if we try to do it the other way so first we make the api call to web3 storage then it returns to cid and then down here once it's successful boom so once it was successful then we call create event and we pass in the cid and everything else has already been passed in and um yeah there we have that and then when we're talking about identity i said i'm using rainbow kit and coinbase wallet so it's really easy to set up and i'm actually not going to walk through it because what i have is something better i created a uh like a starter repo where you can just clone it and it has rainbow kit wag meme tailwind next and a wallet connect function already set up so the only thing you have to do and i'll walk through it is basically import your abi oh yes so for people who don't know how to do that inside of i did it inside of a utils folder so you just create a folder at the root of your project call it whatever i call it utils and then you make the name you know whatever name of your contract.

json and you just paste in the api from your smart contract but that's important so now if we let me show you guys this real quick front end starter okay so with this front-end starter that you can clone and use for your project there's this function here called connect contract can you guys see that yeah connect contract and the only thing you have to update is you have to pass in your contract address and then once that's in you'll be able to so you know for every page that you're on in xjs if you want to call a function on your smart contract you need a way to make that communication between your front end your smart contract this utility function does that so instead of like manually writing this in every file we abstract this out to a util and then you can just import that so here if i go to index i've already done it for you so it's already imported and the only thing you have to do when you're actually ready to call your function and i also added it down here is you just do you know const you know this is called your contract or whatever and then you call that function that we created and then that way you can start calling your function so this is called rsvp contract with you know it'll be your contract here and that way you can use it on every page in your next js project and you don't have to write the logic to like actually connect to your contract that way okay i know that was a lot of talking does anyone have any questions up until this point okay um so yeah this the what you're seeing now is a template so let me actually maybe i'll just like run it so you can see but it's just it basically just has everything installed so it's still like a blank um canvas this is what it looks like so it has rainbow kit wag me next js tail when css so i'm on the wrong network but this is a button that'll allow you i don't know maybe this is the right network but it'll allow you to have yeah the connect to wallet button right away so you don't have to write any of this logic yourself and yeah basically you can just start developing the logic to connect to your contract is there the logic to connect to your wallet is there the logic for that's built into next.js that's really great like routing and all that good stuff is already there and then you basically just have to import your own api which you know is just copying and pasting that into the utils file and then you can start developing so let me go back here now so is there anything i didn't talk about i didn't so let me get into the graph a little bit more how many of you guys already know how the graph works or you're familiar with it so so so actually not that many people um okay cool so the graph like i said i'm going to talk about it six minutes so the graph is an indexing and query layer and it basically allows you to efficiently read data from the blockchain so you know right now you can go to you can go to etherscan and you can i don't know what's a popular project uh crypto punks sure you can go to any contract right and you can read information about that contract you can read data from the blockchain but it's very one at a time like let me give you an example imagehash i don't know so like yeah you can read data from the blockchain as it is now but you kind of got to read it like one piece at a time but if you want to make more sophisticated queries or to ask complex questions about your data like you want to understand a relationship so for our thing maybe i would ask how many users rsvp'd to this event and showed up or how many people created an event you know have created more than 10 events in the last year those types of queries you can't really make manually as it stands right now just directly from the blockchain so the graph allows you to do that so it reads all of this data that you're interested in um it indexes all this data for you so that it's efficient query times when you do ask questions and then it allows you to make queries with graphql so if you're already familiar with graphql it's the same exact query api you can ask questions the same exact way it yeah as a developer basically what it allows you to do is hydrate your ui with data from the blockchain and when you're developing smart contracts a lot of your data is coming from the blockchain that you're in that your front-end user is going to want to know like for example what is the deposit amount for this event that's on the blockchain and we need a way to actually read that and the way that we're reading that in this specific case is through a subgraph so i can show you guys that real quick too just so you guys get an idea so if you write in javascript or in typescript it's going to feel really familiar because the mappings are written in assembly script and it's basically just like writing javascript and telling and writing the logic for like i'm interested in this data this is how you get it and this is how you construct an object to then send it to your ui so let me go here subgraph okay so you should be able to understand this because you just saw the whole smart contract so let me show you in source mappings okay is this really small no it's not okay so when a new event gets created on the blockchain right we need a way to display this on the front end so the way we do this is we create an object maybe i should show you that first we create an object in our schema so those who have maybe experienced with databases or with graphql you know what a schema is but for those who aren't familiar with the schema it's basically you just defining the objects in your model if that makes sense so for us the objects in our model are an event and an account an rsvp and a confirmation these are entities that are unique to our project and if you make a project with a graph obviously these will be unique to whatever you're building so for example here this means that i want to be able to query for an event and i want to be able to query for all of these different properties in an event right so this is what we're defining this is like the dictionary we're saying i want to be able to do this but now in the mappings you actually tell the program how to get this data how do you actually uh form this and construct this object to then return it to your front end so this is what's going on here so we say okay when an event is created this is what should execute in order to build that object for me i can't really see from here um yeah so like the event id you can get it from the parameters the event owner you can get it again from the blockchain who's the person sending this message and all of these things you can get from the transactions that were made on the blockchain that you just wrote in your smart contract but here you're just saying this is the logic for how to find it you're just giving them a map this is how you get it that's all you're doing um and then for example the stuff that is off chain so stuff that's on ipfs you know it's not on the blockchain there's still a way to get it because there's an ipfs api that'll allow you to do the same thing for ipfs and the only difference is that because this is metadata we're passing in the event cid so that the program knows where to actually go and fetch this stuff from and what we're doing there is we're literally just like going through this object so you know json is a big object and then it has different properties where it's like name description i think those are the two things that we stored off chain oh and oh yeah image and link so then all we're doing is we're saying hey if this ipfs hash is true if it's valid if it doesn't come back as a falsie value then go ahead and like you know because it's an object i'll it's a like one level object there's no nested objects you just i'm just gonna ask questions and i'm gonna say hey look for a value called um name look for a value called description look for a value called link and a photo and when you find it save it here and then if these come back to be truthy values again so if these don't come back as false like if they're not null or you know for some reason we spelled it wrong then this is how we actually construct the object we're saying my event the big entity dot the specific property equals that that's the construction that's how you actually make that object um and this just repeats for all the rest of the stuff that we're doing but that's the big picture okay almost done last thing i want to talk about present okay cool so we kind of talked about like um what the stack that i use is again you should take this and apply it to your own project based on what you're building but i did want to highlight the boundaries so if we talk about building something with the stack that i just referred to there's what 20 40 65 68 thousand dollars in boundaries just with the specific stack that i talked about here and actually uh forgot to mention radical but radical is a decentralized uh github so they have this product where you can host your code and there's literally a prize for fifteen hundred dollars just to a project that hosts their their code there you can still host it on github if you want you know obviously to you know keep it forever and for collaborators to use but you can literally just host your code on github and be eligible for this bounding it's like the easiest bounty ever um and then here is that quick start uh front end repo where you can just clone it and that way you'll have wallet rainbow kit wallet connect wag me ethers tailwind next js you can clone it no sorry you should fork it first then clone it and then do your thing on there i'll pause because people are taking pictures real quick yes exactly so the graph um maybe i should have shown that but the graph in addition to the schema that you define in the mappings you also define events to listen to and basically in order to guarantee that you always have the freshest data and you don't have stale data like you know today we make a query and there's 10 events on the platform but i create three in the next hour we need a mechanism to refresh basically and re-index so the way that you do that is you define some events so for example for my contract right the event was new event created so then we say okay when new event created gets admitted i want you to re-execute the the mapping which re looks you know rechecks and loops through all the metadata and does it over and over and over again until we have the freshest data so yes um so that's that front end repo i see one more person taking a picture so i'll let them do it got it okay cool and then the other really really cool thing that i want to talk about here is 30 days of web 3 is something that's being hosted by women build web 3 we're a dow that's pushing forward female engineering talent in web 3 but this is open to everyone it's going to be it's education that's going to be open source when it's ready it's launching in two weeks and it's a 30-day curriculum to basically hold everyone's hand through developing a full stack dab and kind of help them build that reference and that mental model for what it means to build a dap so that hopefully by the end of this you'll be able to say okay i have my own idea and i've done this once i just kind of got a remix you know the contract because now i learned how to do everything else i just got to remix and tweak small parts but i know how to build a full stacked app and actually i want to pull this up real quick so you can see it kicks off into oh oops it kicks off in two weeks and you can register at 30daysofweb3.xyz um it's open to everyone it's free and the the cool thing is that you're going to build the project that we talked about in this mini workshop here like building a web 3 rsvp app and the even cooler part is that there's going to be live workshops by all of these different amazing developers and developer advocates that are like experts in their specific part of the stack and they're gonna come do live workshops like this but more specific to whatever part we're talking about that day or that week and this was also built with like really amazing support from these orgs and these protocols um so yeah there's some faqs at the bottom tldr yes you can join if you're a man or anyone can join it's going to be open source um the time commitment is 30 minutes a day this is all online and asynchronous so in theory you can do this in a weekend if you want you can do this in a week we just are dubbing in 30 days of web 3 because that's the pace that we're going to go on and the pace people can follow if they want to follow along but you'll be able to do this at any time by yourself okay cool and then finally thank you that was it