Skip to main content

​
Overview

The Quest interface represents a gamified task in the Tareas application. Each quest has associated metadata including difficulty, rewards, categories, and tracking information.

​
TypeScript Interface

export interface Quest {
  id: string;
  title: string;
  category: string;
  description: string;
  icon: string;
  colorClass: string;
  glowClass: string;
  kingdom: string;
  dueDate: string;
  difficulty: number;
  xpReward: number;
  reward: string;
  badges: string[];
  tags: string[];
  createdAt?: Date;
  updatedAt?: Date;
  progress?: number;
  timeLeft?: string;
  status?: 'pending' | 'in-progress' | 'completed';
  completed?: boolean;
  completedAt?: Date;
  difficultyArray?: boolean[];
}

​
Fields

​
Core Fields

​
id
string
required
Unique identifier for the quest
​
title
string
required
The name/title of the quest displayed to users
​
category
string
required
The category this quest belongs to (e.g., ‘design’, ‘dev’, ‘marketing’)
​
description
string
required
Detailed description of what the quest entails

​
Visual Styling

​
icon
string
required
Icon identifier or path used to visually represent the quest
​
colorClass
string
required
CSS class name for the quest’s color theme
​
glowClass
string
required
CSS class name for glow effects applied to the quest card

​
Classification

​
kingdom
string
required
The kingdom or realm this quest is associated with in the gamification system
​
badges
string[]
required
Array of badge identifiers that can be earned by completing this quest
​
tags
string[]
required
Array of tags for categorizing and filtering quests

​
Difficulty & Rewards

​
difficulty
number
required
Numeric difficulty level of the quest (typically 1-5)
​
xpReward
number
required
Amount of experience points awarded upon quest completion
​
reward
string
required
Description of the reward given for completing the quest
​
difficultyArray
boolean[]
Array representation of difficulty (e.g., [true, true, false, false, false] for difficulty 2/5)

​
Scheduling

​
dueDate
string
required
ISO 8601 formatted string representing when the quest is due
​
timeLeft
string
Human-readable string showing time remaining until due date (e.g., “2 days left”)

​
Progress Tracking

​
status
'pending' | 'in-progress' | 'completed'
Current status of the quest
  • pending: Quest has not been started
  • in-progress: Quest is currently being worked on
  • completed: Quest has been finished
​
progress
number
Completion progress as a percentage (0-100)
​
completed
boolean
Flag indicating whether the quest has been completed

​
Timestamps

​
createdAt
Date
Timestamp when the quest was created
​
updatedAt
Date
Timestamp of the last update to the quest
​
completedAt
Date
Timestamp when the quest was marked as completed

​
Usage Example

const quest: Quest = {
  id: 'quest-123',
  title: 'Design Hero Banner',
  category: 'design',
  description: 'Create an engaging hero banner for the landing page',
  icon: 'brush',
  colorClass: 'color-design',
  glowClass: 'glow-purple',
  kingdom: 'Creative Realm',
  dueDate: '2026-03-10T00:00:00Z',
  difficulty: 3,
  xpReward: 150,
  reward: 'Design Master Badge',
  badges: ['design-master', 'creative-pro'],
  tags: ['ui', 'design', 'banner'],
  status: 'in-progress',
  progress: 60,
  completed: false,
  createdAt: new Date('2026-03-01'),
  updatedAt: new Date('2026-03-05')
};

Build docs developers (and LLMs) love

Get started for freeTalk to us