u/Confident-Map9810

So I've been building On Your Mind (https://on-your-mind.pages.dev), an anonymous thought-sharing app where AI matches you with strangers thinking similar things in real time. The matching piece uses BGE-small embeddings and pgvector cosine similarity on the backend, but honestly the frontend work around it was the interesting challenge.

The 'Matches' page shows you your semantic thought twins, people you've never met whose thoughts land in the same vector space as yours. Sounds simple to display. It wasn't.

The problem: match scores update as new thoughts come in, embeddings resolve asynchronously, and the UI needed to feel alive without hammering the database. I went through three different approaches with useEffect and Supabase realtime subscriptions before landing on something that didn't either over-fetch or feel stale.

What finally clicked was treating the match results as derived state rather than fetched state, keeping a local embedding cache in a ref and only triggering re-renders when similarity scores crossed a meaningful threshold. Obvious in hindsight, but it took some pain to get there.

The TikTok-style swipe feed had similar quirks around gesture handling and keeping scroll position stable during background updates.

Curious if anyone else has built realtime semantic similarity features in React and how you handled the state synchronization side of it. Did you find Zustand or Jotai made this cleaner, or did you stick with vanilla hooks?

Been heads down on a side project called On Your Mind (https://on-your-mind.pages.dev) and the matching feature ended up being the most technically interesting React problem I've solved in a while.

The core idea: when you post an anonymous thought, BGE-small embeddings get generated via Cloudflare Workers AI, stored in Supabase with pgvector, and cosine similarity queries find strangers thinking semantically similar things in real time. Cool in theory. Nightmare to wire up in React without everything re-rendering constantly.

A few things I learned the hard way:

• Keeping embedding results in a ref rather than state for intermediate processing cut down a surprising number of unnecessary renders
• Debouncing the Supabase realtime subscription callbacks was non-negotiable once I stress tested with concurrent thought submissions
• React Query made caching the matches page feel almost too easy after I stopped fighting it and just let it handle staleness

The Matches page itself shows your "semantic thought twins", basically people whose anonymous thoughts cluster closest to yours over time. No profiles, no usernames, just pure semantic overlap surfaced through a UI that felt weirdly hard to design because the data is so abstract.

Stack is React + Vite + TypeScript on Cloudflare Pages with Supabase doing the heavy pgvector lifting.

Curious if anyone else has built realtime similarity features in React and how you handled the state/subscription complexity. Did you reach for Zustand, Jotai, or just lean on React Query for everything?

Building On Your Mind (https://on-your-mind.pages.dev) taught me something uncomfortable about UI design: anonymity and connection are genuinely in tension with each other.

The core loop is simple. You post a raw thought anonymously, and BGE-small embeddings run against pgvector in Supabase to find strangers thinking semantically similar things in real time. No usernames. No profiles. Just thoughts and cosine similarity scores.

The React architecture challenge that kept biting me: how do you build a 'Matches' page that feels emotionally meaningful without leaking any identifying context? I ended up storing embeddings only, never the raw thought text on the match record itself. The UI reconstructs similarity purely from vector distance. Feels clean but took three refactors to get right.

The Global Mind Map was the most fun React piece. It's a live mood distribution visualization built on top of Cloudflare Workers AI polling Llama 3.1 mood classifications. State management here is genuinely tricky because you want it to feel ambient, not janky.

TikTok-style swipe feed with React was surprisingly straightforward until I added the XP and streak system. Then re-render budgets became a real conversation.

Curious if anyone else has hit this pattern: building features that are technically about connecting people but where the UI contract is specifically that users never feel tracked or identified. How did you handle that tension?

Been deep in a side project called On Your Mind (https://on-your-mind.pages.dev) and the part I keep getting nerd-sniped by is the thought matching system.

The core idea: you post an anonymous thought, and the app finds strangers thinking something semantically similar, in real time. No keywords, no hashtags. Pure vector cosine similarity using BGE-small embeddings stored in pgvector on Supabase.

On the React side, the interesting challenge was making the matches feel alive without hammering the backend. I ended up using Supabase's realtime subscriptions combined with a small debounce layer so the Matches page updates reactively when new similar thoughts come in, but doesn't re-render on every single insert across the whole table.

The feed itself is a TikTok-style swipe component built with Framer Motion, and keeping that smooth while the AI matching runs async in a Cloudflare Worker (Llama 3.1 + BGE-small) took more state juggling than I expected. Optimistic UI was the right call there.

The part I'm still tuning is the Global Mind Map, which visualizes real-time mood distribution across all active thoughts. Right now it's a canvas layer on top of a React component tree and reconciling those two update cycles is not fun.

Curious if anyone has dealt with mixing canvas animations and React state in a way that doesn't feel like two separate apps duct-taped together. What patterns actually worked for you?