PathFinder

A vision board that grows as you do

Comment

Inspiration

PathFinder was inspired by a simple but real problem: having goals is easy, but staying consistent and believing in yourself while working toward them is hard.
I often found myself starting things with motivation, then slowly losing direction, confidence, or clarity. I wanted to build something that doesn’t just track tasks, but actually feels supportive.

PathFinder is inspired by vision boards, journaling, and the idea that progress is emotional as much as it is logical. Instead of pressure, the goal was to create a calm, encouraging space that helps users reconnect with why they started.

What it does

PathFinder helps users visualize their goals and reflect on their journey in a more personal way.

Users can:

  • Create a vision board linked to their goals
  • Unlock visual elements as they complete tasks
  • Add reflections tied to each goal
  • Export their vision board as an image
  • Generate a pseudo-letter from their future self, encouraging them and reflecting on their growth

The project focuses on motivation, self-belief, and emotional clarity, not just productivity.

How I built it

PathFinder was built as a frontend-focused web project using:

  • React for UI and state management
  • Tailwind CSS for styling and layout
  • html-to-image for exporting the vision board
  • Custom logic for goal-based image unlocking and reflections
  • HEIC to JPEG conversion to support real user image uploads

The UI was designed to feel soft, visual, and non-intimidating, with draggable elements to mimic a real vision board experience.

Challenges I ran into

One of the biggest challenges was UI complexity. Managing draggable elements, layering, locking/unlocking content, and keeping the interface intuitive required a lot of iteration.

Handling different image formats (especially HEIC uploads) was another challenge, as well as making sure exported images looked clean and consistent.

Balancing emotional design with functional code was also difficult — it wasn’t just about making things work, but making them feel right.

Accomplishments that I'm proud of

  • Building a fully interactive, exportable vision board
  • Successfully integrating reflections and goal-based unlocking
  • Creating a pseudo-letter feature that adds emotional depth
  • Designing a project that feels personal, not mechanical
  • Turning an abstract idea into a working, meaningful product

What I learned

Through this project, we learned:

  • How much UX and emotion matter in product design
  • Advanced React state management for interactive UI
  • Handling real-world edge cases like file formats
  • The importance of iteration when building visual experiences

Most importantly, we learned that software doesn’t always need to be loud or complex to be impactful.

What's next for PathFinder

Next steps for PathFinder include:

  • AI-generated reflections and encouragement
  • User accounts and saved boards
  • More customization for themes and moods
  • Mobile-friendly interactions
  • Sharing boards privately with friends or mentors

PathFinder has the potential to grow into a supportive digital space for personal growth, creativity, and self-trust.

Built With

Share this project:

Updates