Inspiration

I wanted to solve a problem I personally faced as a student: staying motivated and focused over time. Most productivity tools feel repetitive and uninspiring, which makes it harder to stay consistent. I wanted to create something different: an experience that makes productivity engaging through gamification, while still offering a calm and focused environment when needed.

What it does

LifeQuest AI is an AI-powered productivity platform designed to solve one of the most common problems students face: lack of motivation and focus.

The app combines gamification, AI, and productivity tools into one unified experience:

  • Fantasy Mode: transforms tasks into immersive quests guided by a mentor, making productivity engaging and motivating.
  • Focus Mode: provides a clean, distraction-free interface with calming sounds to support deep work.

Additional features include:

  • AI-generated tasks adapted to the user’s context
  • XP, levels, and streak tracking to reinforce consistency
  • A built-in calendar for planning and organization
  • A favorites system to quickly access useful study resources
  • Customizable background music to enhance focus

By combining structure, motivation, and personalization, LifeQuest AI helps students build better study habits and reduce procrastination.

This approach helps students not only manage tasks, but also build long-term productive habits.

How we built it

The app was built using HTML, CSS, and vanilla JavaScript to keep it lightweight and accessible.

We implemented:

  • A task management system with localStorage
  • A gamification system with XP and levels
  • Mode switching between Fantasy and Focus themes

AI was integrated using the X.AI API to dynamically generate tasks based on user needs.

Prompt engineering was used to adapt the tone and structure of tasks depending on the selected mode (Fantasy vs Focus), ensuring a personalized and context-aware experience.

The architecture is modular to separate core logic from UI modes.

We implemented:

  • A task management system with localStorage
  • A gamification system with XP and levels
  • Mode switching between Fantasy and Focus themes
  • AI integration using the X.AI API for generating tasks

The architecture is modular to separate core logic from UI modes.

Challenges we ran into

One of the main challenges was balancing two completely different user experiences (Fantasy vs Focus) within the same application.

We also had to manage UI consistency, integrate AI smoothly, and ensure the app remained responsive and simple.

Accomplishments that we're proud of

We are proud of creating a unique dual-mode experience that combines gamification and productivity.

The smooth mode switching, XP system, and immersive Fantasy experience make the app engaging while still being functional.

What we learned

We learned how to design modular frontend architecture, integrate AI into a web app, and create engaging user experiences through gamification.

We also improved our ability to balance design, functionality, and performance.

What's next for LifeQuest AI

Future improvements include:

  • More advanced AI personalization
  • User accounts and cloud sync
  • Expanded gamification (badges, levels, rewards)
  • Mobile optimization

Built With

  • css
  • html
  • javascript-(vanilla)
  • localstorage
  • vercel
  • x.ai-api
Share this project:

Updates