JPsyche
System Architecture
JPsyche is built on the Next.js App Router to leverage React Server Components for optimal performance and SEO. The authentication layer is handled securely via Clerk, utilizing modal flows to prevent jarring redirects. Data mutations are handled optimistically using SWR for snappy UI feedback, and the UI is powered by a semantic CSS custom property system integrated directly with Tailwind v4 for seamless theme toggling.
Technical Challenges & Solutions
Intelligent Text-to-Speech Routing
Using the Web Speech API resulted in robotic accents when Hindi text was read by English voices. I implemented an automatic language detection algorithm (checking for Devanagari script) to dynamically route the playback to language-matched neural voices.
Complex Chat State Forking
Users needed the ability to edit past messages mid-conversation. I engineered a state mutation that slices the message array at the edited index, discards subsequent AI responses, and resubmits the new context to the LLM, seamlessly 'forking' the timeline.
Mobile Chrome Safe-Area Rendering
The absolute positioning of the chat input was being clipped by iOS bottom bars and Safari browser chrome. Switched from standard 100vh to 100dvh and integrated env(safe-area-inset-bottom) to ensure the chat input always sits perfectly above the hardware notch.