indexx.dev
forked from
chadtmiller.com/slices-teal-relay
Teal.fm frontend powered by slices.network
tealfm-slices.wisp.place
tealfm
slices
1# Slices Teal Relay Demo
2
3A teal.fm timeline built with React, Relay, and Tailwind CSS. Displays music
4plays from the Slices GraphQL API.
5
6**Live Demo**: https://slices-teal-relay.bigmoves.deno.net/
7
8## Features
9
10- Real-time music scrobble feed
11- User profiles with listening history
12- Album artwork from MusicBrainz
13- Infinite scroll pagination
14- Dark mode UI inspired by Last.fm
15- Powered by Relay for efficient GraphQL data management
16
17## Tech Stack
18
19- **React** - UI framework
20- **Relay** - GraphQL client with automatic cache management
21- **React Router** - Client-side routing
22- **Tailwind CSS** - Styling
23- **Vite** - Build tool
24- **TypeScript** - Type safety
25
26## Prerequisites
27
28- Node.js 18+ or Deno
29- npm or pnpm
30
31## Getting Started
32
331. **Install dependencies**
34
35 ```bash
36 npm install
37 ```
38
392. **Fetch the GraphQL schema**
40
41 ```bash
42 npm run schema:prod
43 ```
44
453. **Generate Relay types**
46
47 ```bash
48 npx relay-compiler
49 ```
50
514. **Start the development server**
52
53 ```bash
54 npm run dev
55 ```
56
57 The app will be available at `http://localhost:5173`
58
59## Development
60
61### Updating the GraphQL Schema
62
63The project connects to the Slices API. To update the schema:
64
65```bash
66npm run schema:prod
67npx relay-compiler
68```
69
70### Project Structure
71
72```
73src/
74├── App.tsx # Main feed component
75├── Profile.tsx # User profile page
76├── TrackItem.tsx # Individual track card component
77├── LoadingFallback.tsx # Loading skeleton
78├── useAlbumArt.ts # Hook to fetch album art from MusicBrainz
79└── __generated__/ # Relay-generated TypeScript types
80```
81
82### Working with Relay
83
84This project uses Relay's modern API with:
85
86- **`useLazyLoadQuery`** - Load data on component mount
87- **`usePaginationFragment`** - Infinite scroll pagination with automatic cache
88 updates
89- **`useFragment`** - Fragment composition for data colocation
90- **`@connection`** directive - Automatic list merging for pagination
91
92After modifying any GraphQL queries or fragments, run:
93
94```bash
95npx relay-compiler
96```
97
98### Environment
99
100The app connects to:
101
102- **Production API**: `https://api.slices.network/graphql`
103- **Slice**:
104 `at://did:plc:n2sgrmrxjell7f5oa5ruwlyl/network.slices.slice/3m5d5dfs3oy26`
105
106## Scripts
107
108- `npm run dev` - Start development server
109- `npm run build` - Build for production
110- `npm run preview` - Preview production build
111- `npm run lint` - Run ESLint
112- `npm run schema:prod` - Fetch GraphQL schema from production API
113
114## Features in Detail
115
116### Album Artwork
117
118The app fetches album artwork from MusicBrainz using the `releaseMbId` field.
119The fetch happens asynchronously per track and displays when available.
120
121### Infinite Scroll
122
123Both the main feed and profile pages use Relay's `usePaginationFragment` for
124efficient infinite scrolling with automatic cache management.
125
126### Routing
127
128- `/` - Main feed
129- `/tracks` - Top tracks
130- `/albums` - Top albums
131- `/profile/:handle` - User profile page
132
133## License
134
135MIT