DEV Community

Toprak
Toprak

Posted on

I built an open-source encyclopedia of psychoactive substances with Next.js 16 — here's what I learned

Substance information is fragmented. You need PsychonautWiki for pharmacology, TripSit for interaction charts, Erowid for experience reports, Reddit for community knowledge. I got tired of having 15 tabs open, so I built SubstanceWiki — a single, interconnected reference where everything links to everything.

Live site: substancewiki.org
Source: github.com/yagcioglutoprak/substance_wiki

The numbers

  • 381 substance profiles with dosage guides and duration timelines
  • 14,967 drug interaction safety ratings
  • 240+ catalogued subjective effects
  • 2,745 experience reports
  • 11,698 effect-substance combination pages
  • ~15,000 total pages generated

Tech stack

  • Next.js 16 with App Router and Turbopack
  • PostgreSQL via Prisma (11 models)
  • Tailwind CSS + shadcn/ui
  • Vercel for hosting
  • @vercel/og for dynamic OG images

Architectural decisions worth sharing

1. Pre-computed interactions, not runtime calculation

The interaction checker covers 14,967 substance combinations. Each pair has a safety rating (Safe, Low Risk, Caution, Unsafe, Dangerous) with detailed notes about mechanism of action.

These are pre-computed and stored in PostgreSQL — not calculated at runtime. A SubstanceInteraction model with foreign keys to both substances, indexed for fast lookup in both directions. Querying "what interacts dangerously with LSD?" is a single indexed query returning in <10ms.

2. Programmatic SEO at scale

From 381 substances and 240 effects, we generate:

  • 381 main substance pages
  • 762 dosage + effects sub-pages
  • 11,698 effect-substance detail pages
  • 28 comparison pages
  • 11 combo safety guides
  • 56 editorial articles

Each page has unique content, structured data (JSON-LD), dynamic OG images, and proper canonical URLs. The sitemap regenerates hourly with all 15,000+ URLs.

3. Community insights from Reddit

We process Reddit data via the Arctic Shift archive. Posts from relevant subreddits (r/drugs, r/psychonaut, r/nootropics, etc.) are classified, scored for quality, and linked to substance pages. This gives each substance a "community perspective" section with real discussions.

4. Dynamic OG images

Every page type gets a unique OG image generated via @vercel/og. This means every link shared on social media has a distinct, informative preview — not a generic site image.

5. Internal linking as an SEO strategy

Substance pages link to their effects. Effect pages link back to substances. Interactions connect pairs. Comparisons link both ways. This creates a dense web of internal links that helps both users and search engines understand the relationships between content.

6. FAQ schema for rich snippets

Each substance page dynamically generates FAQ content from the substance's data. This is wrapped in FAQPage JSON-LD schema, which can trigger FAQ rich snippets in Google search results.

Harm reduction first

Every substance page leads with safety information. The interaction checker exists because combining substances is one of the most dangerous things people do, and having that information one click away can save lives.

This isn't a project that glorifies substance use. It's a project that acknowledges people use substances and tries to give them the best information possible to stay safe.

What's next

  • Multilingual support (Spanish, Portuguese, German)
  • User-contributed experience reports
  • Mobile app
  • API for third-party integrations

Check it out at substancewiki.org and the source at GitHub. Feedback welcome — especially on accuracy of substance data, since getting this right is literally a matter of safety.

Top comments (0)