Inspiration Our team was getting to know each other and looking to see what we had in common we found ourselves talking about the current job market and how sometimes the processes are unrelated to what really goes on during the actual job. This is how we came up with the path finder, a application that would help you learn and go through many different paths so that you are not blinded sided on the first day on the job.
What it does What it does is that it asks some personal questions, figuring out what the best path is for the user, and then immerses them into that path, allowing for them to understand what the career is like and if it is a good fit for them. It gets rid of the ambiguous and unclear ideas we have for jobs and helps the user understand what a career feels like by stepping into a narrative, day-in-the-life simulation.
How we built it Pathfinder is built as a browser based, interactive career simulation using Next.js App Router, React, and Three.js via React Three Fiber. We designed the experience around a cinematic 3D environment that acts as the entry point, where users interact with a virtual camera to choose a scenario, select a professional mindset, and then enter a guided simulation.
The architecture centers on a single state driven flow controller that manages scene transitions, UI overlays, and simulation stages. This allowed us to separate visual immersion from decision logic while keeping everything synchronized. We used Drei helpers for model loading and lighting, Tailwind CSS for rapid UI iteration, and modular scene components so new careers and storylines can be added without rewriting core logic.
Challenges we ran into The hardest challenge was state orchestration across 3D scenes and UI layers. Managing when the user is in a cinematic mode versus an interactive decision mode required careful separation of camera stages and story stages. Early on, this caused blank screens, type conflicts, and broken transitions.
Another major challenge was performance and stability. Loading 3D assets while preventing white flashes or hydration issues in Next.js required strict client side boundaries and suspense handling. We also had to refactor repeatedly to avoid over coupling logic with visuals.
Finally, designing something that felt emotionally grounded rather than game like was difficult. Mental health scenarios demand tone, pacing, and restraint, not just flashy interaction.
Accomplishments that we're proud of successfully implemented an interactive 3d element into the website. Created a clean and easy to navigate website. Learned how to utilize AI and personal coding skills together in order to optimize tasks based on the time limit.
What we learned We learned that immersive UX only works when architecture is disciplined. Visual ambition without a clear state model leads to chaos. We also learned that Three.js and React can scale together, but only if responsibilities are clearly defined.
On a human level, we learned that career exploration tools need empathy. Users are not just choosing options, they are testing identities. That realization changed how we designed pacing, language, and feedback.
What's next for Pathfinder Expand the quiz to offer a wider variety of career results, add more immersive career simulations, and provide students with resources to explore their interests in greater depth. The goal is to make career exploration even more personalized, interactive, and actionable.
Log in or sign up for Devpost to join the conversation.