Inspiration

When I was younger, I was often the quiet kid that everyone picked on. I got bullied by the guys around me, and even at home, things weren’t much better. My parents constantly doubted my future, and it felt like no one really believed in me.

Eventually, that constant negativity made me shut down. I became isolated, lost confidence, and carried a lot of pain in silence. I didn’t have anyone to talk to about how I was really feeling — not friends, not family, no one. That loneliness stayed with me.

The only thing that gave me a sense of control was learning to code. It became my escape, a space where I could build things that made sense even when my real life didn’t.

That’s why I created UnLonely. I built it for people like me, people who feel alone, misunderstood, or invisible. It’s a simple app that lets you talk to an AI companion that actually listens. But more than that, it has a mood tracker too. You can check in with yourself, reflect on how you’re feeling, and keep a personal emotional record. Sometimes, even just recognizing your own feelings can be the first step to healing.

UnLonely is something I wish I had back then. And now that I can build it, I hope it helps someone else feel a little less alone.

What it does

UnLonely is a web app that gives lonely teens someone to talk to, even if that someone is AI. The app features an AI companion that listens without judgment and holds a casual, friendly conversation when you need to vent, share, or just feel heard.

It also includes a mood tracking feature. Every day, you can log how you are feeling by choosing an emoji or short description. Over time, UnLonely shows you your mood history, helping you notice emotional patterns and take small steps toward self-awareness and healing.

Whether you are having a rough day or just want to check in with yourself, UnLonely is a safe space to feel understood. It does not replace real human connection, but it can make you feel less alone when you need it most.

How I built it

I built UnLonely as a web app using Next.js with React for the frontend. Tailwind CSS was used for styling to keep the design clean and responsive across devices. Instead of using a backend, I relied on the browser’s local storage to save mood entries and chat history, ensuring user data stays private and is instantly accessible.

The AI chatbot connects directly to the OpenRouter API through API routes in Next.js, which act as a secure middleman between the frontend and the AI service.

I included smooth animations using Framer Motion to make the app feel welcoming and engaging. My goal was to create a simple, easy-to-use app that provides support for anyone feeling lonely or isolated.

Challenges I ran into

One of the main challenges I faced was figuring out how to track and save mood entries without using a backend. I solved this by using local storage to store the user's mood data on their own device. It took some testing to make sure the data stayed consistent across sessions and felt easy to update.

Integrating the OpenRouter API for the AI chat was also a bit tricky. I had to work through some issues around prompt tuning and managing loading states to make the conversation feel natural and responsive.

Another challenge was designing an experience that feels comforting and not too robotic. I wanted the app to be minimal but still warm, so I spent time adjusting the layout, adding subtle animations, and choosing the right color tones to create a space that feels emotionally safe.

Accomplishments that am proud of

I'm proud that I was able to turn a personal story into something real that could help other people. Building UnLonely from scratch and seeing it come together felt like a full circle moment, especially since it’s something I wish I had when I was younger.

I’m also proud that I managed to create a full web app using just client-side tools for mood tracking, and that I got the AI chatbot working smoothly through the OpenRouter API. Even though I didn’t use a backend, I still made the app feel responsive, personal, and useful.

Most of all, I’m proud that I kept going even when things got frustrating. This was more than just a coding project. It meant something to me, and I gave it everything I had.

What I learned

Building UnLonely taught me a lot about how to turn emotions into real products. I learned how to think not just like a developer but also like someone trying to help people feel better through technology. On the technical side, I got better at using Next.js, Tailwind CSS, and local storage to manage state and data. I also learned how to connect to third-party APIs like OpenRouter and handle responses smoothly in the UI. But more than the code, I learned how powerful a simple idea can be when it comes from a real place. I realized that building with purpose makes the process more meaningful, even when it gets hard.

What's next for UnLonely – An AI Companion for the Lonely

I want to keep improving UnLonely to make it even more helpful and personal. One of the first things I plan to add is user accounts so people can save their mood history across devices. I also want to give users more control over how the AI responds by letting them choose different support styles like friendly, motivational, or calming.

In the future, I’d love to add reminders to check in with your mood, daily mental health tips, and maybe even a journaling space. I’m also thinking about making a mobile version so more people can access it anytime they need support.

UnLonely started as something small, but I really believe it has the potential to grow into a full emotional support tool for young people who just need someone to listen.

Built With

  • netlify
  • nextjs
  • openrouterapi
  • react
  • tailwindcss
Share this project:

Updates