···

       
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
       
5
       
+
       
![A screenshot of our example application](./docs/app-screenshot.png)

     

       
6
       
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
       
70
       
+
       


     

       
71
       
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
       
238
       
+
       


     

       
239
       
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
       
358
       
+
       
And here we are!

     

       
359
       
359
       
+
       


     

       
360
       
360
       
+
       
![A screenshot of the app's status options](./docs/app-status-options.png)

     

       
361
       
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
       
599
       
+
       


     

       
600
       
600
       
+
       
![A screenshot of the app status timeline](./docs/app-status-history.png)

     

       
589
       
601
       
 
       


     

       
590
       
602
       
 
       
## Step 8. Optimistic updates

     

       
591
       
603
       
 
       


     

This is a binary file and will not be displayed.

This is a binary file and will not be displayed.

This is a binary file and will not be displayed.

This is a binary file and will not be displayed.

This is a binary file and will not be displayed.