← Work

PROJECT NOTES

Published

Riffcult

A Gothic metal journal and record archive, with album discovery and an Owned/Wishlist collection demo.

Project type
Editorial application demo
My contribution
Concept, design & testing
How I guide implementation and testing
The RIFF CULT Gothic home page with its masthead, Metal After dark introduction and three-album carousel.
ACTUAL APPLICATION / Riffcult

PROJECT AT A GLANCE

The idea and the experience.

Who it is for

Music readers exploring records and keeping a collection.

The problem explored

Bring album stories, discovery and collection controls into one coherent experience.

What it demonstrates

  • Album and editorial discovery
  • Owned and Wishlist collections
  • Browser-local demo without registration

THE TECHNOLOGY

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Drizzle
  • PostgreSQL
  • Better Auth
  • PGlite

Project overview

Riffcult is an independent metal journal, record-discovery archive and personal collection experience. RIFF CULT brings an editorial atmosphere to the act of finding and keeping records.

Its Gothic editorial interface connects a featured album to its story, track sequence and a place in the listener's collection.

My contribution

I developed the idea, shaped the visual design and tested the user experience.

The challenge

Connect editorial storytelling, album discovery and record collecting in one coherent experience, while keeping the artwork and collection controls clear.

An editorial route into a record collection

The opening presents Slayer, Venom and Possessed in a three-album carousel. A moonlit abbey and Gothic masthead establish the atmosphere while the actual covers remain visible. The carousel has direct selection, previous/next controls and a pause action.

Album, band, genre, review and listening-list pages provide different routes through the catalog. A visitor can open an album and save it as Owned or Wishlist. Grid and Shelf show the same collection; removing a record offers Undo.

Demo and full application

The public demo works without registration and keeps collection choices in the visitor's browser. The editorial workspace is a read-only preview; public visitors cannot publish shared content or create server-backed accounts through this mode.

The retained full application uses Next.js, React, TypeScript and Tailwind CSS, with Drizzle, PostgreSQL, PGlite and Better Auth. It includes account-bound collections and reader, editor and administrator roles. Those server-backed capabilities are separate from the public browser-local demo.

Explore the demo

Open an album and save it as Owned or Wishlist. Visit The Vault to review your collection and switch between Grid and Shelf views, or explore the related bands, genres and editorial stories.

No registration is required for this demo. Collection choices stay in the current browser, and the editorial workspace is a read-only preview.

Evidence and limits

The demo home and album page were opened in the browser on 24 October 2026. The desktop and mobile images here show the running application. The original project documentation records integration and browser checks for the full implementation; this portfolio update does not claim a new security or accessibility audit.

Media and links

The Live Demo action opens the verified public portfolio version. The source repository is not presented as public. Album artwork belongs to its respective rights holders; source attribution and publication permissions are tracked separately in the original project documentation.

LET’S TALK ABOUT YOUR PROJECT

Have a similar project
in mind?

Share your idea or existing website. We’ll clarify what you need and whether I’m the right fit.

Discuss a Similar Project