the statusphere demo reworked into a vite/react app in a monorepo

Add screenshots of the app

+12
+12
TUTORIAL.md
··· 2 2 3 3 In this guide, we're going to build a **simple multi-user app** that publishes your current "status" as an emoji. 4 4 5 + ![A screenshot of our example application](./docs/app-screenshot.png) 6 + 5 7 At various points we will cover how to: 6 8 7 9 - Signin via OAuth ··· 65 67 ``` 66 68 67 69 When the user logs in, the OAuth client will create a new session with their repo server and give us read/write access along with basic user info. 70 + 71 + ![A screenshot of the login UI](./docs/app-login.png) 68 72 69 73 Our login page just asks the user for their "handle," which is the domain name associated with their account. For [Bluesky](https://bsky.app) users, these tend to look like `alice.bsky.social`, but they can be any kind of domain (eg `alice.com`). 70 74 ··· 231 235 </div>`} 232 236 </div> 233 237 ``` 238 + 239 + ![A screenshot of the banner image](./docs/app-banner.png) 234 240 235 241 You can examine this record directly using [atproto-browser.vercel.app](https://atproto-browser.vercel.app). For instance, [this is the profile record for @bsky.app](https://atproto-browser.vercel.app/at?u=at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.actor.profile/self). 236 242 ··· 349 355 }) 350 356 ``` 351 357 358 + And here we are! 359 + 360 + ![A screenshot of the app's status options](./docs/app-status-options.png) 361 + 352 362 ## Step 5. Creating a custom "status" schema 353 363 354 364 The collections are typed, meaning that they have a defined schema. The `app.bsky.actor.profile` type definition [can be found here](https://github.com/bluesky-social/atproto/blob/main/lexicons/app/bsky/actor/profile.json). ··· 586 596 ` 587 597 })} 588 598 ``` 599 + 600 + ![A screenshot of the app status timeline](./docs/app-status-history.png) 589 601 590 602 ## Step 8. Optimistic updates 591 603
docs/app-banner.png

This is a binary file and will not be displayed.

docs/app-login.png

This is a binary file and will not be displayed.

docs/app-screenshot.png

This is a binary file and will not be displayed.

docs/app-status-history.png

This is a binary file and will not be displayed.

docs/app-status-options.png

This is a binary file and will not be displayed.