The Lone Wanderer.

An RPG across memory, madness, and meaning.

Comment

The Lone Wanderer: A Quest for Self-Discovery

The Lone Wanderer is a unique journaling application that transforms your emotional experiences into epic fantasy RPG quests. It's a sanctuary where your feelings become the catalyst for adventure, helping you navigate your inner world through a creative and engaging lens.

Inspiration

The core inspiration behind The Lone Wanderer is the idea of reframing personal challenges. We wanted to move beyond traditional journaling and create a tool that makes introspection not just a routine, but a rewarding adventure. By merging the therapeutic practice of writing with the empowering and engaging framework of role-playing games, we aim to help users build resilience, understand their emotional patterns, and find strength in their own stories.

What it does

The Lone Wanderer guides users on a journey of self-discovery through a gamified feedback loop:

  1. Journaling as a Catalyst: Users write about their thoughts, feelings, and daily experiences.
  2. AI-Powered Quest Generation: Upon submission, a Supabase Edge Function sends the entry to an AI model. The AI analyzes the emotion and content to generate a personalized quest, complete with a fantasy character class, a mythical realm, and a unique magical item.
  3. Insight from the Oracle: Alongside the quest, an "Insight Oracle" provides a summary of the emotional state, identifies potential patterns, and offers gentle, constructive advice for personal growth.
  4. Gamified Progression: Completing quests awards Experience Points (XP), allowing the user to level up. Leveling up unlocks new character classes ("guides") to choose from for future quests, adding variety and a sense of progression.
  5. Track Your Journey: A dedicated Analytics Dashboard visualizes emotional frequency and class distribution over time, providing a high-level overview of the user's journey.
  6. Collect Magical Items: The unique items generated in quests are stored in the user's Inventory, creating a collection of artifacts that represent past challenges overcome.

How I built it

This project is a modern full-stack web application built with a serverless architecture.

  • Frontend: Built with React and Vite for a fast, modern development experience. TypeScript ensures code quality and type safety.
  • UI/UX: Styled with Tailwind CSS and the shadcn/ui component library, creating a cohesive and aesthetically rich "medieval fantasy" theme. Data visualizations are powered by Recharts.
  • Backend & Database: We use Supabase as our all-in-one backend solution:
    • Authentication: Manages secure user sign-up, login, and session persistence.
    • Postgres Database: Stores all application data, including journal_entries, user_stats, and user_inventory.
    • Edge Functions: Serverless TypeScript functions handle the core logic:
      • generate-quest: Interfaces with the OpenAI API to analyze text and generate quest data.
      • wisdom-wizard-chat: Powers the AI chatbot feature.
  • Data Fetching: Client-side data management is handled by @tanstack/react-query, which efficiently caches, synchronizes, and updates data from the Supabase backend.

Challenges I ran into

  • AI Prompt Engineering: Crafting a reliable prompt that could consistently interpret emotional nuance and return perfectly structured JSON was the biggest challenge. It required significant iteration to balance creativity with predictability.
  • Real-time State Management: Ensuring that XP, level, and inventory updated instantly across the UI after a quest. This was solved using @tanstack/react-query's cache invalidation mechanisms to trigger automatic re-fetching of stale data.
  • Handling External API Failures: The AI service can fail due to rate limits or other issues. We implemented robust error handling to catch these failures and provide clear, user-friendly feedback without crashing the app.

Accomplishments that I'm proud of

  • The Core Transmutation Engine: The successful implementation of a system that turns unstructured, emotional text into a structured, engaging, and personalized RPG experience. This is the heart and soul of the app.
  • A Seamless Full-Stack Experience with Supabase: Demonstrating the power of Supabase to handle auth, database, and serverless functions in a single, cohesive platform.
  • Strong Thematic and Visual Cohesion: Creating an immersive user interface that fully realizes the medieval fantasy concept, from the pixelated fonts to the atmospheric backgrounds and component styling.

What I learnt

  • The Power of AI for Personalization: LLMs are incredibly powerful tools for creating adaptive user experiences that feel unique to each individual.
  • The Importance of a Strict Data Contract: When working with an LLM, defining and enforcing a strict output schema (like our JSON structure) is non-negotiable for building a reliable application.
  • User Experience is Key in Wellness Tech: For an app focused on self-reflection, a beautiful and engaging UI is crucial. It transforms a potentially daunting task into an inviting and enjoyable one.

What's next for The Lone Wanderer

  • Avatar Customization: Allow users to create a visual avatar that evolves based on their most-used classes and equipped items.
  • Expanded World: Introduce more character classes, realms, magical items, and quest types to enhance variety and long-term engagement.
  • Deeper Analytics: Provide more advanced insights, such as tracking emotional shifts over time or correlating emotions with specific quest outcomes.
  • Community Features: An opt-in feature to share anonymized quest summaries or item discoveries with friends to foster a sense of shared journey.

NOTE After authorizing your email, press the login instead of signup as it already saved your information

Built With

Share this project:

Updates