Build a Passkey Powered Guestbook Dapp
This section walks you through designing and building a decentralized application (dapp) that interacts with a smart contract guestbook, allowing users to read and write public messages. This tutorial also implements a passkey-powered smart wallet for user authentication.
📄️ Overview
In this tutorial, we'll walk you through building an old-timey internet guestbook! (Trust me, they were all the rage back in the day.) We'll be examining how the project is constructed, starting with the smart contract. Then, we'll turn that deployed smart contract into a "bindings package," allowing us to seamlessly integrate it into our frontend project. To get our users authenticated, we'll be using Stellar's new passkeys capability and giving each of our users their very own smart wallet. As a bonus, this guestbook is already a usable project (on Testnet) you can experiment with and use right now! After this tutorial, you'll have a solid understanding of how smart contracts and web applications can work together in harmony. You'll also have practical tools and examples for how you might integrate passkey-powered smart wallets into your own projects.
📄️ The Guestbook Contract
The heart of this project starts with our smart contract. This smart contract will, in essence, act as a database for our guestbook messages. Users will be able to write messages, read them, and edit their own previously submitted message(s). Additionally, the contract will be upgradeable, and it will require initialization.
📄️ Generate Bindings
Let's turn our attention to how we'll interact with the deployed smart contract. This is where the TypeScript bindings come in! But, I hear you ask: What are TypeScript bindings?
📄️ Passkeys Prerequisites
Passkeys are an amazing way to help dapp developers (like yourself) connect users with their projects, protocols, applications, etc. Learn more on the smart wallets page.
📄️ Setup Passkeys
Now, we've got the requisite accounts, tokens, etc. created, and we're ready to start putting the passkey-kit to work, getting our users connected!
📄️ Dapp Frontend Walkthrough
So, we now have all the pieces in place, and we're ready to connect the dots.