An app using Slices to show last played teal.fm tracks across the Atmosphere
add README
+31
-70
+31
-70
README.md
+31
-70
README.md
···
1
-
# teal-demo
1
+
# slices-teal-demo
2
2
3
-
A Deno SSR web application with AT Protocol integration, built with Preact,
4
-
HTMX, and OAuth authentication.
3
+
This is a demo app made with [Slices](https://slices.network/). It ingests [teal.fm](https://teal.fm/) records and displays the latest played tracks across the Atmosphere:
5
4
6
-
## Quick Start
5
+
7
6
8
-
```bash
9
-
# Start the development server
10
-
deno task dev
11
-
```
7
+
(Note teal.fm doesn't have an official hosted app yet so you'd have to get [piper](https://github.com/teal-fm/piper) running to connect it to your Spotify or whatever.)
12
8
13
-
Visit your app at http://localhost:8080
9
+
## Prerequisites
14
10
15
-
> **Note:** Your slice and OAuth credentials were automatically configured
16
-
> during project creation. The `.env` file is already set up with your
17
-
> credentials.
11
+
This is using Deno because the official Slices starter is using it, and I'm too lazy to change it. I'm not thrilled with that part, but installing it is [pretty easy](https://slices.network/docs/getting-started#install-the-cli). You can also install the Deno VS Code extension to fix squiggly lines in VS Code.
18
12
19
-
## Features
13
+
To run the project, do `deno task dev`.
20
14
21
-
- 🔐 **OAuth Authentication** with PKCE flow
22
-
- ⚡ **Server-Side Rendering** with Preact
23
-
- 🎯 **Interactive UI** with HTMX
24
-
- 🎨 **Styling** with Tailwind CSS
25
-
- 🗄️ **Session Management** with SQLite
26
-
- 🔄 **Auto Token Refresh**
27
-
- 🏗️ **Feature-Based Architecture**
15
+
## The Process
28
16
29
-
## Development
17
+
1. I created the app with Slices CLI as described [here](https://slices.network/docs/getting-started)
18
+
2. It [made a slice](https://slices.network/profile/danabra.mov/slice/3m257yljpbg2a) for me, I set `fm.teal` as its primary namespace
19
+
3. I've manually added the `fm.teal` [lexicons](https://github.com/teal-fm/piper/tree/main/lexicons/teal/feed) to it via web UI
20
+
4. I've pressed Sync in the web UI to backfill records
21
+
5. I've downloaded updated codegen from web UI and pasted it into `src/generated_client.ts`.
30
22
31
-
```bash
32
-
# Start development server with hot reload
33
-
deno task dev
23
+
This is all the code I've needed to add (second commit):
34
24
35
-
# Start production server
36
-
deno task start
37
-
38
-
# Format code
39
-
deno fmt
40
-
41
-
# Check types
42
-
deno check src/**/*.ts src/**/*.tsx
43
-
```
44
-
45
-
## Project Structure
46
-
47
-
```
48
-
slices.json # Slices configuration file
49
-
lexicons/ # AT Protocol lexicon definitions
50
-
src/
51
-
├── main.ts # Server entry point
52
-
├── config.ts # OAuth & session configuration
53
-
├── generated_client.ts # Generated TypeScript client from lexicons
54
-
├── routes/ # Route definitions
55
-
├── features/ # Feature modules
56
-
│ └── auth/ # Authentication
57
-
├── shared/fragments/ # Reusable UI components
58
-
└── utils/ # Utility functions
25
+
```js
26
+
const plays = await publicClient.fm.teal.alpha.feed.play.getRecords({
27
+
sortBy: [{
28
+
direction: 'desc',
29
+
field: 'playedTime'
30
+
}]
31
+
});
32
+
const authorProfiles = await publicClient.app.bsky.actor.profile.getRecords({
33
+
where: {
34
+
did: {
35
+
in: Array.from(new Set(plays.records.map(rec => rec.did)))
36
+
}
37
+
},
38
+
})
59
39
```
60
40
61
-
## OAuth Setup
41
+
These are passed to the component that displays them.
62
42
63
-
Your OAuth application was automatically created during project initialization
64
-
with:
43
+
Very cool!
65
44
66
-
- **Client ID & Secret**: Already configured in `.env`
67
-
- **Redirect URI**: `http://localhost:8080/oauth/callback`
68
-
- **Slice**: Automatically created and linked
69
-
70
-
To manage your OAuth clients or create additional ones:
71
-
72
-
1. Visit [Slices Network](https://slices.network)
73
-
2. Use the `slices login` CLI command
74
-
75
-
## Documentation
76
-
77
-
- `CLAUDE.md` - Architecture guide for AI assistance
78
-
- Feature directories contain handlers and templates
79
-
- Components use Preact with server-side rendering
80
-
- HTMX provides interactive behavior without page reloads
81
-
82
-
## License
83
-
84
-
MIT
45
+
Note that ingesting records in realtime is borked for some reason for my slice but hopefully this should be fixed upstream soon.
screenshot.png
screenshot.png
This is a binary file and will not be displayed.