PROJECT NOTES
PublishedRiffcult
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

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
A CLOSER LOOK
Inside the experience.
Select a screenshot to see the details.
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