Wayfinder

A pathway to reach your goals.

Comment

Inspiration

Whenever I set a goal, I often struggle with the same questions: Where do I start? What steps actually matter? And what does progress even look like? Wayfinder was created to solve this exact problem by turning vague ambitions into clear, structured skill roadmaps that make long-term goals feel achievable.

What it does

Wayfinder uses Google Gemini to generate a personalized, step-by-step roadmap for any goal a user wants to achieve.

Users begin by entering a goal, which is then analyzed by Gemini to break it down into logical milestones and skills required along the way. Each node in the roadmap represents a meaningful task or learning objective that builds toward the final goal.

To progress through the roadmap, users must submit proof of completion for each task, such as a photo, GitHub repository, written work, or other relevant evidence. This keeps progress intentional and accountable. Once the final milestone is completed, Wayfinder generates a slideshow of the user’s journey, celebrating progress both big and small.

How we built it

Wayfinder was built as a full-stack web application. The frontend was developed using React, the backend with Python and Flask, and SQLite was used for data persistence.

We began by brainstorming the overall workflow and user experience, followed by creating a visual diagram to map out how data and interactions would flow through the system. This upfront planning helped guide development and kept the project aligned with the original vision.

Challenges we ran into

One of the first major challenges was crafting the right prompt for Gemini. The prompt needed to be precise enough to generate roadmaps that were logical, well-ordered, and genuinely useful. To solve this, I iteratively refined the prompt using Claude to validate structure and clarity before making Gemini API calls, ensuring tokens were used efficiently and effectively.

Another challenge was implementing the interactive roadmap UI. The goal was to create a node-based, zoomable, and draggable interface inspired by neetcode.io, which required careful handling of layout and connections. This was solved by integrating the React Flow library, allowing for a clean and scalable graph-based visualization.

Accomplishments that we're proud of

I’m proud that Wayfinder closely matches the original vision, from its dark, minimalist aesthetic to its single-page, interactive roadmap experience. I’m also proud of the value the generated roadmaps provide — the milestones are logical, well-ordered, and tailored to real-world progression rather than surface-level advice.

What we learned

This project reinforced the importance of planning before writing code. Spending time brainstorming and designing the workflow upfront saved countless hours of debugging and reduced technical debt, making development smoother and more intentional.

What's next for Wayfinder

Next, I want to give users more control over the roadmap itself. Planned features include adjustable roadmap depth (from high-level overviews to highly detailed breakdowns) and the ability for users to add or customize tasks within the roadmap. These additions would increase personalization, flexibility, and long-term engagement.

Share this project:

Updates