Skip to main content

​
Get Up and Running

Tareas is a gamified task management mobile app built with Ionic Angular that transforms boring tasks into exciting quests with XP, difficulty levels, and visual effects inspired by video games.
1

Clone the Repository

Clone the Tareas repository to your local machine:
git clone https://github.com/MiguelAPalaciosC/tareas.git
cd tareas
2

Install Dependencies

Install all required packages using your preferred package manager:
npm install
This will install Angular 20+, Ionic 8+, Capacitor 8+, and all other dependencies defined in package.json.
3

Start Development Server

Launch the Ionic development server:
npm start
The app will automatically open in your default browser at http://localhost:8100.
The development server uses Angular’s live reload feature - changes to your code will automatically refresh the browser.
4

Create Your First Quest

Once the app is running, you can create your first gamified task:
  1. Click the floating + button
  2. Fill in the quest details:
    • Title: Your task name
    • Description: Task details
    • Category: Select from available categories (Diseño, Desarrollo, Marketing, etc.)
    • Difficulty: Easy (1 flame), Medium (2 flames), or Hard (3 flames)
  3. Click Crear to forge your quest
// Quest Model Structure (src/app/common/models/quest.model.ts)
export interface Quest {
  id: string;
  title: string;
  category: string;
  description: string;
  icon: string;
  colorClass: string;
  glowClass: string;
  kingdom: string;
  dueDate: string;
  difficulty: number;  // 1, 2, or 3
  xpReward: number;
  reward: string;
  badges: string[];
  tags: string[];
  status?: 'pending' | 'in-progress' | 'completed';
  completed?: boolean;
}
5

Interact with Quests

Tareas uses intuitive swipe gestures powered by Ionic Gesture Controller:Swipe Right → Complete the quest and earn XP
// From src/app/components/quest-cards/quest-cards.component.ts:196-209
if (ev.deltaX > threshold) {
  // Swipe a la derecha: completar quest
  console.log('Completing quest:', quest.title);
  const completed = this.questService.completeQuest(quest.id);
  if (completed) {
    cardEl.style.transform = 'translateX(100%)';
    cardEl.style.transition = 'transform 0.3s ease-out';
  }
}
Swipe Left → Delete the quest
// From src/app/components/quest-cards/quest-cards.component.ts:210-223
else if (ev.deltaX < -threshold) {
  // Swipe a la izquierda: eliminar quest
  console.log('Deleting quest:', quest.title);
  const deleted = this.questService.deleteQuest(quest.id);
  if (deleted) {
    cardEl.style.transform = 'translateX(-100%)';
    cardEl.style.transition = 'transform 0.3s ease-out';
  }
}

​
What’s Next?

Now that you have Tareas running locally, explore these features:
  • Category Management: Navigate to /categories to create and manage quest categories
  • Filter by Category: Use the horizontal category slider on the home page to filter quests
  • Quest Service: Check out src/app/common/services/quest.service.ts for data management
  • Routing: Explore the app structure in src/app/app.routes.ts

Installation Guide

Detailed setup instructions for all platforms

Architecture

Learn about the app’s component structure

​
Quick Reference

​
Available Scripts

// From package.json
"scripts": {
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "lint": "ng lint"
}

​
Core Technologies

  • Angular: v20.0.0 with standalone components
  • Ionic: v8.7.17 for mobile UI
  • Capacitor: v8.0.1 for native functionality
  • RxJS: v7.8.0 for reactive programming
  • TypeScript: v5.9.0
The app uses localStorage for data persistence. Your quests will persist between browser sessions but won’t sync across devices.

Build docs developers (and LLMs) love

Get started for freeTalk to us