-
-
System architecture diagram
-
openai.js (implement a link between frontend and backend)
-
server.js (calls the api/ is our backend)
-
App.css part 1 (we did a lot of styling)
-
App.css part 2
-
App.css part 3
-
App.css part 4
-
App.css part 5
-
App.jsx part 1 (we also did a lot of frontend coding)
-
App.jsx part 2
-
App.jsx part 3
Inspiration
We started with a simple, relatable problem. We all have that one friend who starts arguments or says things that don’t make sense until you really step into their perspective.
But we realized this isn’t just about one person. Miscommunication happens everywhere, between friends, in relationships, and even in everyday texting, where tone and intent are often misunderstood. A single message can be interpreted in completely different ways, leading to unnecessary conflict or confusion.
That made us ask: what if you could actually see a conversation from the other person’s point of view?
Inspired by the “clone” theme, we set out to build a way to simulate another person’s perspective and help people better understand each other before misunderstandings happen.
What it does
You can input a conversation between two users and choose whose perspective you want to explore. Once submitted, the AI “replays” the conversation from that point of view, analyzing how that person may feel, what they might be thinking, and how they interpret each message.
This effectively creates a dynamic “clone” of that perspective, helping you understand emotional tone, intent, and potential misunderstandings. The app also highlights moments of tension or miscommunication and suggests clearer, more empathetic ways to respond during your next encounter and gives insight, letting you figure out the best course of action for your next interaction.
By turning conversations into an interactive feedback loop, it helps users improve communication, resolve conflicts, and gain a deeper understanding of how their words are perceived.
How we built it
We built the application using React to create a dynamic and responsive user interface where users can easily input conversations, select a perspective, and view AI-generated insights in real time.
On the backend, we integrated an AI model to analyze conversations and simulate the selected point of view. The system processes the dialogue, evaluates emotional tone and intent, and generates a “replay” of the conversation from that perspective along with actionable feedback.
The frontend communicates with the backend through API calls, sending conversation data and receiving structured responses that are rendered into an intuitive, easy-to-understand format.
We focused on creating a smooth user experience, allowing users to quickly paste a conversation, explore different perspectives, and iterate on responses to better understand and improve their communication.
How it aligns with the theme
When people think of “cloning,” they usually imagine copying a person’s appearance. We took a different approach and asked: what if you could clone someone’s perspective instead?
Our project creates a digital reflection of how another person might interpret the world, allowing users to step outside of their own mindset and experience a conversation through someone else’s lens. It’s not about replicating a person, but about duplicating their point of view in a way that’s immediate and interactive.
By turning perspective into something you can “clone,” we transform the theme into a tool for awareness and perception, giving users access to a second mindset and helping bridge the gap between what we say and how it’s understood.
Challenges we ran into
One of the main challenges we faced was front-end styling with CSS. As a team, most of us were not very familiar with advanced CSS concepts, so building a clean, intuitive, and responsive user interface became a learning process alongside development.
We spent a significant amount of time experimenting with layouts, spacing, and component structure to ensure the app was both functional and visually clear. We also spent a good amount of time figuring out errors and other issues we had due to our lack of experience in the language. We were able to overcome this obstacle through receiving help from mentors including Mr. Cool himself, learning documentation, and through trial and error.
Because the app highlights how messages can be interpreted emotionally, we needed the interface to present these insights in a clear and intuitive way so users could immediately understand what’s happening without confusion.
Balancing learning CSS in real time while continuing to build core features slowed down our development initially, but it ultimately helped us create a more polished and user-friendly experience by making us spend more time on the code we didn't know we could look further into the details of the program helping us polish it even further.
Accomplishments that we're proud of
This was our first time collaborating as a team to build a full web application, transitioning from a background primarily in game development. In a short amount of time, we were able to learn and apply new technologies like React and CSS while continuing to strengthen our core development skills.
We are especially proud of how effectively we worked as a team under hackathon constraints. By clearly dividing responsibilities and playing to each member’s strengths, we maintained strong momentum and delivered a cohesive, fully functional, and visually enticing product.
Most importantly, we took an abstract idea, the concept of “cloning” someone’s perspective, and transformed it into a real, interactive experience. Building a tool that not only works for it's intended function, but also has the potential to improve communication and reduce misunderstandings is something we’re incredibly proud of.
What we learned
Through this project, we gained hands-on experience building a full-stack, API-driven application, with a strong focus on designing clean communication between the frontend and backend. We structured API endpoints to handle conversation input, process it through an AI model, and return consistent, structured outputs that could be efficiently rendered in the UI.
A major area of learning was working with AI APIs and refining model behavior. We spent significant time developing test scenarios and expected model responses to evaluate how well the system simulated a given perspective. This iterative process helped us fine-tune our prompts, improve consistency, and better control how emotional tone and intent were generated and interpreted.
We also learned the importance of defining clear data contracts, ensuring that responses from the AI layer were properly formatted and easy to parse on the frontend. This improved reliability and made it easier to scale features.
Additionally, we strengthened our understanding of asynchronous workflows, API latency handling, and state management in React when working with real-time AI responses.
Overall, this project deepened our experience in building scalable, AI-integrated systems and reinforced how critical iteration and testing are when developing with intelligent agents.
What's next for Perspecta
Our next goal for Perspecta is to expand beyond a web application and develop it into a fully functional mobile app. Bringing Perspecta to mobile would make the platform significantly more accessible, allowing users to use it naturally in everyday conversations and real-world situations rather than being limited to desktop use.
We also plan to introduce voice recording and real-time speech analysis, enabling users to capture conversations or describe situations on the go without manually typing them out. This would create a faster, more seamless experience and make the app more practical for immediate communication challenges.
In addition, we aim to further improve our AI model by refining personalization, increasing response accuracy, and developing more adaptive “clones” that better reflect unique communication styles. Long term, we envision Perspecta evolving into a real-time communication assistant that can help users navigate difficult conversations, strengthen relationships, and improve understanding across both personal and professional interactions.
Log in or sign up for Devpost to join the conversation.