Lyfein5

Tutorial
Home Page

Inspiration

Lyfein5 was inspired by the challenges many people face when trying to balance finances, health, and personal goals across multiple disconnected apps. We wanted to build a single platform where users could simulate different life scenarios, explore “what if” choices, and keep track of their progress in one place.

What it does

Lyfein5 is a life scenario simulator and goal-tracking app that connects finances, health, and personal aspirations in one platform. Users can create different life paths—like moving to a new city or starting a new career—and instantly see how those choices affect their budget, health, and goals. With tools like time capsules, progress trackers, and scenario switching, Lyfe in 5 serves as a personal life dashboard to plan, explore, and navigate life’s possibilities.

How we built it

Lyfein5 was built with JavaScript across the frontend and backend, using React + Vite for fast, component-based development. React Router v6 powers navigation, and Google OAuth provides secure authentication. We styled the app with CSS, HTML, and modern design techniques, keeping it responsive and user-friendly. A centralized LyfeContext manages finance, health, and goals, while features like time capsules and progress tracking make the platform interactive and scalable.

Challenges we ran into

One major challenge was integrating Google Maps AI features like autofill and onClick commands into our React/Vite setup. Since this was our first time working with React, the learning curve was steep. We also faced frequent Git merge conflicts, which were difficult to resolve as we collaborated. Finally, ensuring that our pages were fully dynamic and responsive took significant trial and error.

Accomplishments that we're proud of

We’re proud to have built a fully interactive life scenario simulator that seamlessly connects finances, health, and personal goals. Key features like time capsules, progress tracking, and scenario switching provide users with a dynamic, engaging experience. Despite this being our first time working with React and Vite, we successfully created a smooth, responsive interface and integrated Google Maps AI features along with secure Google OAuth authentication. Collaborating effectively, we navigated complex Git merge conflicts and maintained clean, modular code. Ultimately, we delivered a scalable, user-friendly platform that empowers users to explore multiple life paths in one place.

What we learned

Through building Lyfein5, we gained hands-on experience with React and Vite, learning how to structure a component-based frontend and manage complex state with Context. We improved our skills in integrating third-party APIs, like Google Maps AI, and learned best practices for authentication, dynamic routing, and responsive design. Collaborating on this project also taught us how to handle Git merge conflicts effectively and work as a team to maintain clean, modular code. Overall, we learned how to turn an ambitious idea into a

What's next for Lyfein5

Next, we plan to implement a system that allows users to compare insights and projections from a five-year outlook for each life scenario. This will generate metrics like financial stability, health progress, and overall happiness, giving users a clear picture of potential outcomes. Users will be able to compare these stats across multiple “lifes” to determine which path aligns best with their personal goals and preferences. This feature aims to make Lyfe in Five not just a planning tool, but a decision-making companion, helping individuals choose the life path most suited to their unique aspirations.