SocialPsyche

Inspiration

It wasn’t until my first year of undergrad that I realized I wasn’t just “shy.” I realized that I have an introverted personality and struggle with social anxiety—those moments of overwhelming nervousness or spiraling thoughts after awkward interactions. I used to think that I was unusually shy; that something was wrong with me. I didn’t even know what anxiety truly was, or what introversion and extroversion actually meant. That’s why I created SocialSync. This app is for anyone curious about their social personality—whether you’re an introvert, extrovert, or somewhere in between. It’s also a space for reflection.

What it does

Start by taking a quick, thoughtful quiz to uncover your unique social personality type. Then, dive into guided journaling prompts tailored to your type—whether you're a thinking introvert or an expressive extrovert. After each entry, receive two personalized pieces of advice: one from a real human perspective, and one generated by AI. Compare, reflect, and choose what resonates most with you.

How we built it

💻 Frontend • React + TypeScript: Structured the app with component-based architecture for scalability and type safety. • TailwindCSS: Handled responsive layout and modern UI design efficiently with utility-first classes. • Framer Motion: Brought the interface to life with smooth transitions and engaging animations. • Lucide Icons: Added clean, minimalist icons for visual clarity and consistent user experience. • Figma: Used for rapid prototyping and visual design, ensuring consistency between design and implementation.

🔧 Backend • FastAPI (Python): Built a lightweight, high-performance API to manage session logic and route user input to the AI model. • OpenAI / Hugging Face Transformers API: Powered the chat experience with two contrasting AI personalities for real-time, dynamic responses. • .env Configuration: Managed sensitive keys securely using environment variables and local .env files to protect API credentials.

Challenges we ran into

Building SocialPsyche in under 48 hours came with its fair share of hurdles — especially as a solo developer balancing both design and technical implementation. • API Integration: Getting the backend to correctly handle real-time AI responses was tricky. I ran into issues with request formatting, response parsing, and managing asynchronous calls between FastAPI and the OpenAI/Hugging Face endpoints. After some debugging, I was able to streamline the logic to support smooth, responsive chat interactions. • Slider Mechanism: Implementing the Turing-style slider to guess between the two AI advisors was more complex than expected. It required careful state management and UI syncing to ensure that the user experience felt intuitive and responsive.

Despite these challenges, I leaned into rapid prototyping and incremental debugging to push through — and learned a ton about full-stack development along the way.

Accomplishments that we're proud of

• Integrated two contrasting AI personalities using OpenAI/Hugging Face APIs to create a unique, interactive journaling experience.
• Designed a polished, responsive UI with TailwindCSS, Framer Motion, and Lucide Icons — bringing a modern, thoughtful aesthetic to the app.
• Developed a working slider-based guessing game mechanic, allowing users to engage in a playful Turing test experience.
• Handled all aspects of UX, frontend, backend, and API logic — gaining hands-on experience in full-stack development and rapid iteration under time pressure.

What we learned

FastAPI & async API handling: Learned how to structure and troubleshoot a lightweight backend that communicates seamlessly with external AI APIs. • OpenAI/Hugging Face integration: Gained hands-on experience in connecting real-time language models to user input — and fine-tuning the chat flow for distinct personalities. • Framer Motion + React: Discovered how small animations and transitions can dramatically enhance user experience and make interfaces feel more alive. • State management & UX logic: Tackled challenges with React state to build features like the slider mechanism and real-time response feedback. • Rapid prototyping under pressure: Honed my ability to scope, iterate, and build quickly without sacrificing user experience — especially valuable during time-limited hackathons.

What's next for SocialPsyche

🛣️ Future Features

To continue growing SocialPsyche into a more personalized and supportive self-reflection tool, I plan to explore: • 🔐 User Authentication – Allow users to log in, track their progress, and save journal entries over time. • 📊 Mood Tracking + Sentiment Analysis – Visualize emotional trends and offer insights based on writing tone and frequency. • 🧠 Expanded Personality Quizzes – Add support for frameworks like the Big Five and Enneagram for deeper self-discovery. • 🤖 Customizable AI Advisors – Let users choose from different advisor tones (e.g. empathetic, humorous, logical) to better match their communication style.

Built With

• css3
• fastapi
• figma
• openai
• react
• typescript