How I Built 13 Psychological & Persona Radar Diagnosis Apps (Architectural Lessons & Micro-App Strategy)
Over the past year, I built and deployed 13 standalone psychological, behavioral, and persona diagnosis web applications. Each app focuses on a specific modern struggle — from workplace burnout and MZ employee dynamics to financial behavior, relationship compatibility, and parenting stress.
All 13 nodes are integrated into a single unified control hub at https://pomyjo.com.
In this deep-dive post, I want to share the architectural philosophy, diagnostic algorithm design, and why building zero-dependency single-purpose micro web apps outperforms heavy monolithic SaaS.
🧭 The 13 Radar & Diagnosis Series Overview
Here is the breakdown of the 13 interactive applications in the series:
| # | Application Name | Focus & Psychological Model | Live Demo |
|---|---|---|---|
| 1 | MZ Radar | Enneagram + Workplace Psychology Persona | mz-radar.pomyjo.com |
| 2 | Burnout Radar | Maslach Burnout Inventory (MBI) 6-Axis Test | burnout-radar.pomyjo.com |
| 3 | Genius Radar | Howard Gardner Multiple Intelligences (8 Axes) | genius-radar.pomyjo.com |
| 4 | FX Radar | Behavioral Finance & Trader Emotion Biases | fx-radar1024.pomyjo.com |
| 5 | Money Radar | Spending Habits & Financial Mindset | money-radar.pomyjo.com |
| 6 | Side-Hustle Radar | N-Job & Freelance Skill Set Fit | side-hustle-radar.pomyjo.com |
| 7 | Mind Prism | 16 Persona Prism Interpersonal Spectrum | mind-prism1024.pomyjo.com |
| 8 | Mirror Parenting | Parental Fatigue & 5-Domain Parenting Style | aikiugihimdulda.pomyjo.com |
| 9 | Alkong-Dalkong | Couple Attachment Theory & Relationship Chemistry | alkongdalkong.pomyjo.com |
| 10 | True Hourly Rate | Real Working Value Calculator (Commute + Stress) | true-hourly-rate.pomyjo.com |
| 11 | Mirror Career | Strength-Based Career Aptitude Radar | cho-tan.pomyjo.com |
| 12 | Core-Match | Clinical Psychology x Bazi Compatibility Sync | core-match.pomyjo.com |
| 13 | Mood Weather | Daily Emotion Weather & Mindfulness Tracker | mood-weather1024.pomyjo.com |
🛠️ Key Architectural & Technical Principles
1. Zero-Dependency & Pure Web Standards (KISS Principle)
Instead of shipping a 50MB JavaScript bundle per micro-app, each diagnosis app uses vanilla HTML, modern CSS, and lightweight JS.
- Performance: Instant load times (<0.3s globally via Vercel Edge CDN).
- Maintainability: Zero breaking changes from third-party framework updates.
- Privacy: 100% of diagnostic scoring algorithms run locally in the client browser with zero server data harvesting.
2. Multi-Dimensional Radar Scoring Algorithm
Each diagnosis app converts raw user responses into multi-axis normalized scores:
function calculateRadarScores(answers, weights) {
const axes = { dimensionA: 0, dimensionB: 0, dimensionC: 0, dimensionD: 0, dimensionE: 0 };
answers.forEach((ans, idx) => {
const weight = weights[idx];
for (const key in weight) {
axes[key] += ans * weight[key];
}
});
// Normalize to 0-100 scale
return Object.fromEntries(
Object.entries(axes).map(([k, val]) => [k, Math.min(100, Math.max(0, Math.round(val)))])
);
}
3. Glassmorphism & Micro-Animations
User engagement relies heavily on visual delight. We implemented:
- Dynamic ambient mesh glows with CSS blur filters.
- Real-time SVG / HTML5 Canvas radar chart rendering.
- Interactive card micro-interactions and smooth theme transitions.
💡 Lessons Learned from Deploying 13 Apps
- Micro Web Apps Win User Trust: Users prefer fast, focused, single-purpose utilities over bloated software requiring logins.
-
SEO & Control Hub Synergy: Hosting individual tools under subdomains (
*.pomyjo.com) linked back to a central hub (pomyjo.com) builds high domain authority and cross-traffic. - Keep Codebases Lean: Eliminating unnecessary dependencies makes updates trivial and eliminates maintenance debt.
🌐 Try the Live Control Hub
You can explore all 13 radar applications and tools live on our main portal:
👉 https://pomyjo.com
Feedback, comments, and discussions are welcome below!
Top comments (0)