xPlanit

Inspiration

Personal finance is often intimidating, dry, and filled with jargon. We were inspired to change that. We asked ourselves: "What if learning about money felt less like a chore and more like an exploration?" That's how xPlanit was born. We wanted to create an immersive, gamified experience that transforms the daunting universe of personal finance into a cosmic adventure that's engaging, intuitive, and genuinely fun.

What it does

xPlanit is an AI-powered financial navigator. Users are welcomed to a 3D solar system where they can explore different "planets," each representing a core financial topic:

Budgeting & Goals: A planet to help you manage your income and expenses.
Credit & Loans: A planet to demystify credit scores and loan management.
Investing: A planet to introduce the fundamentals of growing your wealth. Captain Gemini, an AI financial advisor powered by the Google Gemini API. Users can ask complex financial questions in natural language and receive helpful, easy-to-understand guidance. ## How we built it
Frontend: Next.js, React, and TypeScript for a robust and performant user interface.
3D Rendering: We used React Three Fiber and Drei to create and manage our interactive 3D planet scenes directly within React.
Animation: Framer Motion was used to create fluid page transitions and rocket animations.
Backend & AI: We used Next.js API Routes to create a backend endpoint that securely communicates with the Google Gemini API.
Collaboration: Our team worked seamlessly using a Git workflow with feature branches and pull requests on GitHub to manage our code.

Challenges we ran into

Our main challenges were integrating the 3D glb models into the web, motion feature on JS, and integrating the APIs.

Accomplishments that we're proud of

We are incredibly proud of creating a seamless and beautiful user experience that combines a complex 3D environment with a functional AI chatbot in just 24 hours. The animated navigation and the dynamically lit planets are features we worked hard to perfect. Most importantly, we're proud of building a tool that has the potential to make a complex topic like finance accessible and enjoyable for everyone.

What we learned

This project was a deep dive into the world of 3D on the web. We learned an immense amount about React Three Fiber, 3D asset pipelines, and how to debug rendering issues. We also gained valuable experience integrating a powerful LLM like the Gemini API. On the collaboration front, we solidified our understanding of a professional Git workflow, which was essential for working together efficiently under pressure.