indexx.dev / slices-teal-relay
forked from chadtmiller.com/slices-teal-relay
Teal.fm frontend powered by slices.network tealfm-slices.wisp.place
tealfm slices
fork atom
TypeScript 97.8%
JavaScript 1.3%
HTML 0.8%
CSS 0.1%
17 1 0

Clone this repository

https://tangled.org/indexx.dev/slices-teal-relay
git@knot.indexx.dev:indexx.dev/slices-teal-relay

For self-hosted knots, clone URLs may differ based on your setup.

Download tar.gz
README.md

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

    npm install

  2. Fetch the GraphQL schema

    npm run schema:prod

  3. Generate Relay types

    npx relay-compiler

  4. Start the development server

    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:

npm run schema:prod
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:

npx relay-compiler

Environment#

The app connects to:

  • Production API: https://api.slices.network/graphql
  • Slice: at://did:plc:n2sgrmrxjell7f5oa5ruwlyl/network.slices.slice/3m5d5dfs3oy26

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:prod - 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