Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions docs/build/apps/guestbook/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ sidebar_position: 10

In this tutorial, we'll walk you through building an old-timey [internet guestbook](https://en.wikipedia.org/wiki/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.

For this tutorial, we'll walk through the steps as we build a sample application we've called [Ye](https://ye-olde-guestbook.vercel.app)[^1][ Olde Guestbook](https://ye-olde-guestbook.vercel.app), which will be used to showcase various features.
For this tutorial, we'll walk through the steps as we build a sample application we've called [Ye[^1] Olde Guestbook](https://ye-olde-guestbook.vercel.app), which will be used to showcase various features.

:::caution

Expand All @@ -15,16 +15,16 @@ Although Ye Olde Guestbook is a full-fledged application on Stellar's Testnet, i

![Ye Olde Guestbook Dapp](/assets/guestbook/frontend.png)

## Project setup
## Project Setup

### Project requirements
### Project Requirements

To build this guestbook application, we'll need a few pieces.

- **Application framework:** we're using SvelteKit, opting for a type-checked project using TypeScript. SvelteKit (and Svelte on its own) is quite a capable framework, and we'll be using some of its features in this project. However, we will not be diving into those Svelte-specific areas very heavily in this tutorial. The source code of the project is freely open and available and has some decent informational comments throughout if you would like to peruse it for those purposes.
- **Frontend framework:** We're using [Skeleton](https://www.skeleton.dev/) to simplify the use of [Tailwind CSS](https://tailwindcss.com/).
- **Frontend framework:** We're using [Skeleton](https://www.skeleton.dev) to simplify the use of [Tailwind CSS](https://tailwindcss.com).
- **A way to interact with the network:** this is a TypeScript application, and we're using the `@stellar/stellar-sdk` for this. You could make traditional `fetch` requests if you wanted to, depending on your deployment decisions. In either case, we'll need the SDK to interact with keypairs and transactions. We'll also be using a data indexer to access historical network events, and we'll cover more of this at a later point in the tutorial.
- **A way to interact with a user's account:** we're foregoing the traditional wallets here, and we'll use `passkey-kit` to give our users a smart wallet to interact with. They can interact with this smart wallet (via passkey-kit) through methods they're already familiar with (thumbprints, face ID, etc.).
- **A way to interact with a user's account:** we're foregoing the traditional wallets here, and we'll use `passkey-kit` to give our users a smart wallet to interact with. They can interact with this smart wallet (via passkey-kit) through methods they're already familiar with (thumbprints, Face ID, etc.).

:::note

Expand All @@ -51,21 +51,21 @@ This tutorial is probably best viewed as "_nearly_ comprehensive." We aren't goi

:::

### Dev helpers
### Dev Helpers

- [Passkey Kit](https://github.com/kalepail/passkey-kit): A TypeScript SDK for creating and managing Stellar smart wallets.
- [Launchtube](https://launchtube.xyz): Similar to a [Paymaster](https://eips.ethereum.org/EIPS/eip-4337#extension-paymasters) in the EVM world, the Launchtube service aims to alleviate all of the challenges and complexities of getting a transaction on-chain by giving you an API that accepts Soroban ops and then handles getting those entries successfully submitted to the network.
- [Stellar Lab](https://lab.stellar.org): An experimental playground to interact with the Stellar network.

## Getting started
## Getting Started

Here are the steps we've taken to start building Ye Olde Guestbook. Feel free to be inspired and customize these directions as you see fit. The entire [Ye Olde Guestbook codebase](https://github.com/elliotfriend/ye-olde-guestbook) is freely open and available on GitHub for reference.

### Start from the soroban-template repository
### Start from the `soroban-template` repository

With the move to smart contract development, a newly emerging utility in the Stellar ecosystem is the "[Soroban template](../../guides/dapps/soroban-contract-init-template.mdx)." These templates can help alleviate the burden of writing boilerplate code, and can help adapt typical Stellar development workflows into framework-specific reference templates. We've created [just such a template](https://github.com/ElliotFriend/soroban-template-sveltekit-passkeys) that can help you get started developing with SvelteKit and passkeys from the very beginning. You can either use the template on the GitHub website:

![GitHub Template Project](/assets/guestbook/github_template.png)
![Github Template Project](/assets/guestbook/github_template.png)

Or, you can (fork and) clone the template repository locally, and start working that way:

Expand Down Expand Up @@ -103,7 +103,7 @@ PRIVATE_FUNDER_SECRET_KEY=S...ECRET # fund an account on Testnet and put the sec
PUBLIC_FUNDER_PUBLIC_KEY=G...ADDRESS # put the public key from the funded account here
```

### Install dependencies
### Install Dependencies

With our pre-existing template, everything you need should be pulled in from the `package.json` and `Cargo.toml` files. All you've got to do is open up a terminal and install the dependencies:

Expand Down
Loading