Magazine · Full stack · 2026
A music magazine with a public site, an editorial desk, and an API behind both.
I built Sound Bite Africa end to end: the Next.js magazine, the admin CMS, and a Fastify API on Postgres. Spotlight, the latest drop, on stage, issues, hard-copy orders, and the newsletter all read and write through that API. Live site: sound-bite-africa.vercel.app
Spotlight
Latest drop
On stage
Product · sound-bite-africa.vercel.app
The public site is the magazine. The CMS is how an editor ships the next drop without touching the database by hand.
Readers move through spotlight, get to know, on stage, backstage, issues, what’s on, and plug in. A drop can be read digitally or ordered as a hard copy. The footer takes a newsletter address straight to the API.
Editors sign into a separate Next.js admin. Stories, media, issues, events, sponsors, homepage, submissions, orders, and users all save through /admin routes. Auth is a bearer access token plus an httpOnly refresh cookie.
The magazine
The reading experience is split the way the masthead is split — cover story, the drop, the stage, and the list that keeps people coming back.
A full-bleed portrait carries the headline, a deck, and a path into the piece. Category chips such as Spotlight and The Cover Story sit on the image, not in a sidebar.
Each issue drop pairs the cover portrait with two actions: read or download the digital edition, or order the hard copy. Partnership and browse-all sit under the price.
Performance portraits run as a numbered strip — 01, 02, 03 — each with an On Stage tag and a headline. Latest Stories uses the same cream field and orange type.
The footer restates the masthead, then splits categories, magazine, and community. A single email field subscribes the reader. Privacy sits on the same baseline as the copyright.
Visual language
The wordmark is Bahiana, tracked wide, with AFRICA set small beneath it. A striped band closes the header. The same lockup repeats in the footer on black.
Reading surfaces are warm paper. Orange is the action and the story title. Navy is the wordmark. Gold is the thin accent reserved for labels like Latest Stories.
Bahiana carries the logo. Story headlines on the public site run large and tight. Mono labels mark issue numbers and section names.
Shipped UI
Screens from the public magazine — cover, drop, stories, and the stage.
Implementation
An npm workspaces monorepo: public site and CMS on Vercel, API on Railway, shared types in one package.
The public app is React 19 and Tailwind 4. Sections, story pages, issues, events, search, and the newsletter form all live under the App Router.
A second Next.js app on its own Vercel project. Editors manage stories, media, issues, sponsors, homepage, submissions, orders, and newsletter. Ops and users stay role-gated.
Drizzle models posts, issues, events, orders, subscribers, submissions, media, audit logs, and page views. Zod schemas are shared with both frontends.
Uploads go to S3 with presigned requests. Newsletter mail goes out through Resend. Refresh tokens and an audit log keep the desk accountable.
The public magazine is on sound-bite-africa.vercel.app. The CMS and API stay behind the editorial login.