# Slices Teal Relay Demo

A teal.fm timeline built with React, Relay, and Tailwind CSS. Displays music
plays from the Slices GraphQL API.

**Live Demo**: https://slices-teal-relay.bigmoves.deno.net/

## Features

- Real-time music scrobble feed
- User profiles with listening history
- Album artwork from MusicBrainz
- Infinite scroll pagination
- Dark mode UI inspired by Last.fm
- Powered by Relay for efficient GraphQL data management

## Tech Stack

- **React** - UI framework
- **Relay** - GraphQL client with automatic cache management
- **React Router** - Client-side routing
- **Tailwind CSS** - Styling
- **Vite** - Build tool
- **TypeScript** - Type safety

## Prerequisites

- Node.js 18+ or Deno
- npm or pnpm

## Getting Started

1. **Install dependencies**

   ```bash
   npm install
   ```

2. **Fetch the GraphQL schema**

   ```bash
   npm run schema
   ```

3. **Generate Relay types**

   ```bash
   npx relay-compiler
   ```

4. **Start the development server**

   ```bash
   npm run dev
   ```

   The app will be available at `http://localhost:5173`

## Development

### Updating the GraphQL Schema

The project connects to the Slices API. To update the schema:

```bash
npm run schema
npx relay-compiler
```

### Project Structure

```
src/
├── App.tsx                 # Main feed component
├── Profile.tsx            # User profile page
├── TrackItem.tsx          # Individual track card component
├── LoadingFallback.tsx    # Loading skeleton
├── useAlbumArt.ts        # Hook to fetch album art from MusicBrainz
└── __generated__/        # Relay-generated TypeScript types
```

### Working with Relay

This project uses Relay's modern API with:

- **`useLazyLoadQuery`** - Load data on component mount
- **`usePaginationFragment`** - Infinite scroll pagination with automatic cache
  updates
- **`useFragment`** - Fragment composition for data colocation
- **`@connection`** directive - Automatic list merging for pagination

After modifying any GraphQL queries or fragments, run:

```bash
npx relay-compiler
```

### Environment

The app connects to:

- **Production API**: `https://api.slices.network/graphql`
- **Slice**:
  `at://did:plc:fpruhuo22xkm5o7ttr2ktxdo/network.slices.slice/3m257yljpbg2a`

## Scripts

- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build
- `npm run lint` - Run ESLint
- `npm run schema` - Fetch GraphQL schema from production API

## Features in Detail

### Album Artwork

The app fetches album artwork from MusicBrainz using the `releaseMbId` field.
The fetch happens asynchronously per track and displays when available.

### Infinite Scroll

Both the main feed and profile pages use Relay's `usePaginationFragment` for
efficient infinite scrolling with automatic cache management.

### Routing

- `/` - Main feed
- `/tracks` - Top tracks
- `/albums` - Top albums
- `/profile/:handle` - User profile page

## License

MIT