Building a Brain Behavior Explanation Search Engine with Next.js

Title

Building a Brain Behavior Explanation Search Engine with Next.js

Meta Description

Why Your Brain Does That is a searchable behavior-explanation index built on Next.js 15 and React 19, turning psychology explainers from short videos into persistent standalone pages with full-text search and evidence-disagreement annotations.

Article Content

You're scrolling short videos and stumble on "why you forget what you came into the room for"—then you swipe away and the explanation vanishes with it. Why Your Brain Does That tries to solve exactly this problem: turning those fleeting behavior explanations into searchable, stay-put standalone pages.

Built by the team at The Compound on Next.js and React, the project is now live at whyyourbrain.thecompound.tech. It is essentially an index of named experiences—a user types in a word, a room, or an action, and finds the corresponding behavior-explanation entry.

What Problem Does It Solve

Science content on social platforms often exists as short videos. A clip explaining "procrastination isn't laziness" may flash by in the algorithmic feed. Why Your Brain Does That breaks these spoken-word pieces into structured entries and keeps them on pages that don't disappear.

A typical example is the "doorway effect." The classic explanation for forgetting your purpose after walking into a room—the entry explicitly states this behavior is real—but it also flags a 2021 study conclusion: none of four experiments found reliable evidence for the doorway effect. This way of presenting conclusions alongside sources is a design orientation of the site.

The site also defines its boundaries clearly: it doesn't tell users "what's wrong with you," doesn't provide diagnoses, and when facing bigger struggles, directs users to professionals rather than relying on a content archive.

---

The Doorway Effect is a well-known phenomenon in psychology: when people walk through a door into a new room, they often forget what they originally intended to do or fetch. The classic explanation holds that spatial boundaries form "event segmentation" in memory—the brain treats crossing a threshold as the end of one context and the beginning of another, so goal information from the prior context gets temporarily sealed off, causing forgetting. This phenomenon has long been treated by science content as a textbook case of cognitive regularities. However, four replication experiments led by cognitive psychologists in 2021 failed to reproduce a reliable doorway effect, suggesting its effect size may be exaggerated, or that it only holds under specific conditions. The site presents this controversy alongside the classic view—precisely an embodiment of its "conclusions alongside sources" design principle.

Technical Breakdown

The project's tech stack includes Next.js 15.5.25, React 19.1.1, TypeScript, @supabase/supabase-js, and posthog-js. Data comes from two layers: first, static corpus submitted to the repository (from phenomena.json, transformed by a derive script into generated/corpus.json); second, published rows from Supabase, merged at runtime to override the static corpus, sorted by publish time.

The search interaction design deserves separate mention. After a user enters a keyword, the SearchField component trims whitespace, encodes it, and routes it as a q parameter to the entire index. The route reads the query, then maps each entry into a tile containing the title, still frame, category, line count, and searchable text.

Next comes the key step: SheetBody lowercases the query, checks each tile's hay string, and records the matching slug—but does not remove other tiles. Matching entries expand to their "deserved width" and receive an accent color, while non-matching ones shrink to minimum width but stay in place. The entire index remains visible, so users don't "lose" context through searching.

Next.js is a full-stack web framework based on React, providing routing, server-side rendering, static generation, and API routes. Version 15 further strengthens the integration of the App Router with React Server Components. Supabase is an open-source Firebase alternative, centered on a hosted PostgreSQL database, and also provides authentication, real-time subscriptions, and auto-generated APIs. It is commonly used in web projects that need to quickly set up a backend without self-hosting a database. PostHog is an open-source product analytics platform supporting event tracking, funnel analysis, and session replay, used to understand user behavior paths. This project uses Supabase as a dynamic publishing layer, PostHog as a behavior analytics layer, and combines them with a static JSON corpus committed to the repository—forming a hybrid data architecture of "static content + dynamic overrides."

A Complete Usage Example

Take searching for "procrastination" as an example. The entire index stays unchanged, and the entry titled "Procrastination isn't laziness—it's your brain avoiding a feeling" is marked as a match.

Open that entry, and the page presents four lines of spoken text. The second line names several emotions attached to the task: boredom, judgment, and the possibility of failure. The page also preserves the entry's still frame and caption—"This was never about self-discipline."

From an information-architecture perspective, this "small input, fixed output" pattern lowers cognitive load: a phrase enters the index, the matching entry stays visible, and one entry page carries the full explanation.

Positioning Differences from Similar Products

The School of Life organizes long-form articles around themes like Calm, Relationships, Self-Knowledge, and Work—suited to users who want to browse an article library by topic. Why Your Brain Does That offers searchable entries plus spoken text and still frames.

Headspace offers guided meditation, expert exercises, sleep content, and AI support. Its public plans include a 14-day trial, an annual fee of $69.99, and a monthly fee of $12.99. It targets users who want guided practice, not an explanation archive.

Preveal follows a flow of Notice, Understand, Consider What Comes Next. Reflection history is stored locally and requires no account. It helps users reflect on bodily signals and choose their next action; Why Your Brain Does That instead provides a named experience and its explanation.

---

The School of Life is a brand founded by philosopher Alain de Botton. It explores emotions, relationships, and self-knowledge through themed long-form articles, videos, and courses, emphasizing systematic browsing of ideas—suited to people who want to study by topic. Headspace is a representative mainstream meditation app, centered on guided meditation audio, sleep stories, and expert-designed mind-body exercises, using a subscription business model. Preveal leans more toward a lightweight reflection tool, guiding users to pay attention to bodily signals, understand their current state, and consider next actions; its reflection records are stored locally and require no account. All three share the goal of helping users understand themselves, but their paths are respectively "thematic reading," "practice guidance," and "reflection workflow." Why Your Brain Does That differs in that it offers no guidance—only a retrievable archive of behavior explanations.

Limitations and Applicable Boundaries

The project explicitly states it is not a therapy, diagnostic, or personal assessment tool. It doesn't label bodily signals, and it doesn't replace professional help.

Furthermore, the site doesn't promise that every explanation is already a scholarly consensus. Its registration mechanism allows flagging cases where "sources and entry disagree"—the doorway effect is one example. For science-communication products, actively exposing evidence disagreements is a rare but commendable design choice.

If you want to try it, type into the search box a word you remember, a room you've been in, or something you often do—then click Ask the index.

(This article is based on information from the official introduction page of Why Your Brain Does That.)

One-line Summary

Why Your Brain Does That reconstructs short-video behavior science into searchable, stay-put standalone explanation entries.

Paragraph Summary

Why Your Brain Does That is a behavior-explanation search index built by The Compound team on Next.js 15 and React 19, aiming to solve the problem that short-video science content "disappears with a swipe and can't be retrieved." Users type a word, room, or action to find the corresponding named-experience entry. Its tech stack also includes TypeScript, Supabase, and PostHog, with data merged from a static corpus and dynamically published Supabase rows. The search interaction is distinctive: matching entries expand and get an accent color, non-matching entries shrink but stay in place, and the entire index remains visible. The site explicitly states it doesn't provide diagnoses and actively annotates evidence disagreements—for example, the doorway effect entry presents both the classic explanation and differing conclusions from 2021 research—forming a differentiated positioning among science-communication products.