Love Ability Gym ๐Ÿ’ช

A mobile-first web application for training emotional intelligence and relationship skills through interactive exercises and guided practices.

Project Summary ๐Ÿ“

Love Ability Gym is not about finding loveโ€”it's about building the capacity to love. Through 5 core modules and a foundational self-awareness stage, users can strengthen their "emotional muscles" with practical tools and exercises. The app features full bilingual support (English & Traditional Chinese), offline-first architecture with IndexedDB, and optional cloud sync via Supabase.

View the live project here →

Purpose ๐ŸŽฏ

To help people navigate intimate relationships by first learning to understand oneselfโ€”emotions, needs, and thoughts. Then learning to control emotions, calm down, and treat relationships rationally and gently. Only after understanding oneself can one truly understand another person through empathy and companionship. Ultimately, the goal is to learn how to love oneself and one's partner.

Core Modules ๐Ÿงฉ

Module 1: Awareness ่ฆบๅฏŸ

  • ๐Ÿ” Emotion Scan
  • ๐Ÿ“– Story Buster
  • โšก Rapid Awareness
  • ๐Ÿ”„ Attribution Shift
  • ๐Ÿ“Š Happiness Scale
  • โณ Time Travel

Module 2: Expression ่กจ้”

  • ๐Ÿ“ Draft Builder
  • ๐Ÿ”ค Vocabulary Swap
  • ๐Ÿค Apology Builder

Module 3: Empathy ๅ…ฑๆƒ…

  • ๐Ÿ˜ก Anger Decoder
  • ๐Ÿ‘‚ Deep Listening Lab
  • ๐Ÿ”„ Perspective Switcher
  • ๐Ÿ“ก The Radar

Module 4: Allowing ๅ…่จฑ

  • ๐ŸŽซ Permission Slip
  • ๐Ÿ–ผ๏ธ Reframing Tool

Module 5: Influence ๅฝฑ้Ÿฟ

  • ๐ŸŒŸ Spotlight Journal
  • ๐Ÿ’Š Time Capsule
  • ๐ŸŽฏ Vision Board

Special: L3 Uplink โค๏ธ

  • ๐Ÿชž The Mirror โ€” Situational diagnosis
  • ๐Ÿ“’ The Ledger โ€” Give vs Take analysis
  • โš“ The Anchor โ€” Breathing regulation
  • ๐Ÿ“ก The Radar โ€” Observe โ†’ Hypothesis โ†’ Test

Stage 1: Self-Awareness ๅ‡บๅป ่จญๅฎš

Assessment Pipeline

  • ๐ŸŽฏ DISC Assessment โ€” Communication pacing & focus
  • ๐Ÿ’Ž Core Values โ€” Hierarchy of Love & life pillar allocations
  • ๐Ÿงฌ Attachment & Origin โ€” Childhood atmospheres & defense mechanisms
  • ๐Ÿ† Boss Level: Happiness Questionnaire โ€” Relationship X-Ray

Interactive UI

  • ๐Ÿ‘† Swipe cards, tag clouds, zero-sum sliders
  • ๐Ÿ“ณ Haptic feedback
  • ๐Ÿ”„ State rollback with undo stack
  • ๐Ÿง  Data fusion & contradiction detection

App Gallery ๐Ÿ“ธ

Dashboard
Gym List
Profile
Profile Details
Stage 1 Overview
Level 1 Report
Level 2 Report
Level 3 Report
Boss Level Report 1
Boss Level Report 2
Boss Level Report 3
Boss Level Report 4

Features โœจ

Core Capabilities โš™๏ธ

  • ๐ŸŒ Full bilingual support (EN / ็น้ซ”ไธญๆ–‡)
  • โ˜๏ธ Optional cloud sync with delta sync & LWW conflict resolution
  • ๐Ÿ’พ IndexedDB primary storage with localStorage fallback
  • ๐Ÿ“ฒ PWA ready โ€” installable as native app
  • ๐Ÿ“Š XP system & progress tracking

User Experience ๐ŸŽจ

  • ๐ŸŽฌ Smooth Framer Motion animations & page transitions
  • โ™ฟ Accessible โ€” ARIA labels, keyboard nav, screen reader support
  • ๐Ÿ†˜ Crisis Mode โ€” Quick-access breathing exercises
  • ๐ŸŽ“ Educational tool intros (What/Purpose/Why)
  • ๐Ÿ”” Smart toast notifications for feedback & rewards

Technology Stack ๐Ÿ’ป

  • React 19
  • Vite
  • CSS Modules
  • Framer Motion
  • Zustand
  • IndexedDB
  • Supabase
  • Vitest
  • PWA

Architecture Highlights ๐Ÿ—๏ธ

Offline-First CSR SPA

  • Client-Side Rendered with React 19 + Vite 6
  • IndexedDB as primary source of truth
  • Custom delta sync engine with LWW resolution
  • Hybrid storage: IndexedDB + in-memory cache + localStorage

State & Testing

  • React Context for cross-cutting concerns
  • Zustand + persist middleware for complex flows
  • Vitest + React Testing Library + fake-indexeddb
  • Service Worker via vite-plugin-pwa
← Back to All Projects