Sound Frame

Archived project (2025). Sound Frame is preserved as a historical portfolio artifact and is not actively maintained. The hosted service has been retired, and this dependency snapshot should not be deployed without a fresh security review.

Sound Frame was a full-stack music discovery and review platform. It let people search for artists, albums, and tracks; publish reviews; react with “amps”; browse community activity; manage profile visibility; and compare reviewers on a leaderboard.

What it demonstrates

• A React and TypeScript frontend with file-based TanStack Router navigation
• A reactive Convex backend with schemas, queries, mutations, and actions
• Clerk authentication and public/private profile controls
• Spotify-backed discovery for artists, albums, and tracks
• Review creation, browsing, reactions, and reviewer rankings
• A responsive Tailwind CSS and shadcn/ui component system
• Monorepo orchestration with Turborepo and Bun
• Progressive Web App metadata and assets

System shape

React + TanStack Router
          │
          ├── Clerk authentication
          ├── Spotify catalog search
          │
          ▼
      Convex backend
          │
          ├── users and profile visibility
          ├── artists, albums, and tracks
          └── reviews, amps, and rankings

Product areas

• Discover: Search and browse music entities before opening or creating reviews.
• Reviews: Review artists, albums, or tracks and browse recent/popular community posts.
• Profiles: View a member's reviews and control profile visibility.
• Leaderboard: Rank reviewers using received “amps” and review activity.
• Authentication: Clerk-backed sign-in and account handling.

Historical reproduction

There is no live demo. The original Sound Frame deployment and domain are retired.

A plain clone is not immediately buildable because Convex-generated API/type files are intentionally not committed. Reproduction requires new third-party projects and credentials rather than access to the retired deployment.

Requirements

• Bun (the repository records Bun 1.2.21)
• A Convex account and deployment
• A Clerk application configured for Convex
• A Spotify OAuth connection configured through Clerk

Setup outline

bun install
bun dev:setup
bun dev

Use the blank templates at apps/web/.env.example and packages/backend/.env.example when configuring replacement services. The frontend requires its Convex URL and Clerk publishable key. The Convex deployment requires CLERK_SECRET_KEY and CLERK_JWT_ISSUER_DOMAIN, while Clerk must provide the Spotify OAuth connection used for catalog access. Follow the Convex and Clerk integration guide for the authentication setup.

The web application historically ran at http://localhost:3001. bun dev:setup must successfully connect to a new Convex deployment and generate packages/backend/convex/_generated before type-checking or building the frontend.

Historical limitations

• The original hosted deployment is unavailable.
• No automated test suite is included.
• Convex-generated files are not committed, so build and type checks require service setup first.
• Dependencies are frozen at their historical versions and include known advisories.
• The current source should be treated as a learning/portfolio snapshot—not maintained production software.

Project context and attribution

Sound Frame was developed as a collaborative project by @itsreverence, with contributions from @pookfamily and @slezo. The repository history preserves the implementation and collaboration record.

The initial project structure was generated with Better-T-Stack, then developed into the Sound Frame product shown above.

License

Sound Frame is available under the MIT License. Third-party packages, services, music metadata, and artwork remain subject to their respective licenses and terms.