Mood-Sync

What it does Mood-Sync is a real-time, sentiment-aware chat environment. Unlike traditional messaging apps, Mood-Sync analyzes the "vibe" of your conversation as you type. If the chat is high-energy, the UI glows with vibrant gradients; if the conversation turns deep or late-night, the interface softens into a "calm mode" with glassmorphism and slow-pulse animations. It turns a standard chat into a living, breathing digital space that reflects the emotions of the participants.

How we built it I built the project solo using a modern "Fast-Vibe" stack:

Frontend: Next.js and Tailwind CSS for a responsive, high-performance UI.

Animations: Framer Motion was used to handle the complex, fluid transitions between "mood states" without lag.

Real-time Engine: Supabase handles the database and real-time subscriptions, ensuring that when the "mood" changes for one person, it changes for everyone instantly.

The Brain: I used a lightweight Sentiment.js library to process text locally on the client-side, ensuring privacy and instant UI feedback without waiting for a server round-trip.

Challenges we ran into The biggest technical hurdle was "Visual Jitter." If a user typed a happy word followed by a sad word, the UI would "flicker" between colors. I solved this by implementing a Moving Average Algorithm. Instead of reacting to every single word, the app calculates the average sentiment of the last 10 messages, creating a smooth, "liquid" transition that feels natural rather than erratic.

Accomplishments that we're proud of I’m particularly proud of the Theming Engine. I created a system where the entire look and feel of the app is controlled by a few CSS variables that are updated dynamically by the AI. Achieving a "buttery smooth" 60fps transition between a "Hype" vibe and a "Chill" vibe while maintaining real-time message syncing was a major win for me as a solo developer.

What we learned I learned that UI is more than just buttons—it's communication. By building Mood-Sync, I had to dive deep into color theory and how specific hues and animation speeds affect a user's psychological state. I also leveled up my skills in managing real-time state synchronization across multiple clients.

What's next for Mood-Sync Spotify Integration: Automatically playing "vibe-matched" background music.

Custom Moods: Allowing users to define their own color palettes for specific keywords or inside jokes.

Mobile App: Bringing the "vibe" to iOS and Android using React Native so users can stay in sync on the go.

Built With

• css
• framer-motion
• javascript
• lucide-react
• next.js
• react.js
• sentiment.js
• supabase
• tailwind-css
• vercel