🌟 ZENO AI — The Ultimate Youth Life Navigator
A private, always-available AI-powered life operating system for youth.
HTML·CSS·Vanilla JS·Chart.js·Web Speech API·Service Workers·PWA
7 Modules · 26 Achievements · 7,700+ Lines · 0 Backend · 100% Private · Offline-Ready
🌟 Inspiration
"Youth never come with just one problem. They carry the whole world at once."
ZENO AI was born from a real gap — young people face overlapping, simultaneous life challenges that no single app handles together. A student may be stressed about school, confused about careers, worried about money, isolated from support, and unsure how to name their emotions — all at once.
Most apps solve only one slice. ZENO AI connects the entire journey.
Youth Support = Wellness + Career + Finance + Community + Reflection
┌──────────────────────────────────────────────────────────────────┐
│ ZENO AI = Safety + Privacy + Context + Action │
│ (always (local (AI (real │
│ first) data) routing) tools) │
└──────────────────────────────────────────────────────────────────┘
🗺️ Problem → Solution Map
| 🚧 Real Youth Problem | ✨ ZENO AI Response | 🔧 Feature |
|---|---|---|
| Mental stress & emotional overload | AI-style chat + CBT frameworks | MindSpace, Box Breathing |
| Crisis moments with no support | Always-visible emergency lines | 988 Lifeline · 741741 Text Crisis |
| Career uncertainty | 10-path explorer + mock interviews | CareerLab, Resume Builder |
| Money confusion (taxes, budgets) | Live budget charts + paycheck decoder | MoneyIQ, 50/30/20 Engine |
| No community resource access | Geo-aware resource radar | Community Hub, Helplines |
| Burnout & creator pressure | Idea generator + brand deal evaluator | Creator Studio |
| Motivation drop-off | Full gamification engine | XP · Streaks · Levels · 26 Badges |
| Privacy fears | 100% local-first data architecture | NexusDB via localStorage |
🚀 What It Does
ZENO AI is a browser-based, installable PWA — 7 core life modules, one dashboard, zero sign-up, zero cloud sync.
flowchart LR
A["✨ Onboarding"] --> B["🏠 Dashboard\nLive Clock · XP · Goals"]
B --> C["😊 Mood Check-in"]
C --> D["🧠 Insight Engine"]
D --> E["💚 MindSpace"]
D --> F["💼 CareerLab"]
D --> G["💰 MoneyIQ"]
D --> H["🌐 Community"]
D --> I["📓 AI Journal"]
E & F & G & H & I --> J["🏆 XP · Badges · Streaks"]
J --> B
🧩 Module Feature Matrix
| 🧩 Module | 🎯 Mission | ⚡ Key Features | 🏆 XP |
|---|---|---|---|
| 🏠 Dashboard | Central life hub | Live clock, mood trend chart, XP bar, weekly goals | +10 daily login |
| 💚 MindSpace | Emotional wellness | AI chat, CBT exercises, 4-7-8 breathing, crisis widget | +20 per session |
| 💼 CareerLab | Career growth | 10 career paths, resume builder + download, mock interview | +25 per interview |
| 💰 MoneyIQ | Financial literacy | Budget donut chart, 50/30/20 rule, savings tracker, paycheck decoder | +15 per log |
| 🌐 Community | Support + Creator | Resource radar, helplines, content idea gen, brand deal evaluator | +10 per visit |
| 📓 AI Journal | Self-reflection | Voice input, sentiment detection, AI reflection prompts | +20 per entry |
| 🏆 Achievements | Motivation engine | 26 badges, XP bar, level system, streak counter, leaderboard | — |
💚 MindSpace — Wellness Flow
flowchart TD
A["Open MindSpace"] --> B{"Mood Check-in"}
B -->|"😢 Struggling"| C["Crisis Widget\n988 · 741741 Always Visible"]
B -->|"😕 Stressed"| D["AI Support Chat\nEmotiSense Engine"]
B -->|"😐 Okay"| E["CBT Reframing Exercise"]
B -->|"😊 Good"| F["Gratitude Journal Prompt"]
D & E & F --> G["Box Breathing · 4-7-8 Timer"]
G --> H["+XP · Badge Check"]
💰 MoneyIQ — Finance Formulas
50/30/20 Budget Rule:
Budget = (0.50 × Net Pay) + (0.30 × Net Pay) + (0.20 × Net Pay)
─────────────────── ────────────────── ──────────────────
NEEDS WANTS SAVINGS
Housing, Food, Bills Dining, Fun, etc Debt Payoff, Goals
Paycheck Decoder:
Net Pay = Gross Pay − FICA (7.65%) − Federal Tax − State Tax
────────────
SS + Medicare
Savings Goal Progress:
Progress % = ( Current Savings ÷ Goal Target ) × 100
| 💰 Feature | 📊 Calculates | 📈 Visual |
|---|---|---|
| Budget Tracker | Income → 50/30/20 split | Chart.js donut |
| Paycheck Decoder | Gross → Net after all deductions | Breakdown table |
| Savings Goal | Target + deadline → monthly needed | Progress bar |
| Expense Logger | Category tagging + running total | Live list |
🏆 Achievements System
| 🏅 Tier | 🎯 Unlock Condition | ⚡ XP | 🌟 Count |
|---|---|---|---|
| 🥉 Bronze | First login · first journal · first mood check | 50 XP | 8 badges |
| 🥈 Silver | 7-day streak · 5 interviews · 3 budget logs | 150 XP | 10 badges |
| 🥇 Gold | 30-day streak · full resume · 10 journal entries | 300 XP | 6 badges |
| 💎 Diamond | All modules used · leaderboard top 10 | 500 XP | 2 badges |
Level Formula — square-root scaling rewards early progress while maintaining long-term challenge:
Level = floor( sqrt( XP ÷ 100 ) ) + 1
Example: Level 5 → requires XP ≥ 1,600
Level 10 → requires XP ≥ 8,100
🛠️ How We Built It
ZENO AI is a zero-dependency, zero-build-step web app — no npm, no framework, no backend. Runs in any modern browser.
flowchart TD
A["index.html"] --> B["app.js · Hash Router"]
B --> C["dashboard.js"] & D["mindspace.js"] & E["careerlab.js"]
B --> F["moneyiq.js"] & G["community.js"] & H["journal.js"] & I["achievements.js"]
J["ai-engine.js\nEmotiSense"] --> D & E & F & G & H
K["data-store.js\nNexusDB"] --> C & D & E & F & H & I
L["voice.js\nWeb Speech API"] --> D & H
M["sw.js · Service Worker"] --> N["Offline Cache"]
⚙️ Tech Stack
| ⚙️ Layer | 🧠 Technology | 📋 Detail |
|---|---|---|
| Structure | HTML5 | Single index.html entry point |
| Styling | Custom CSS Design System | CSS variables, dark/light mode, responsive grid |
| Logic | Vanilla JavaScript ES6+ | Modular SPA, no framework |
| Routing | Hash-based Router | app.js parses #route → loads module |
| AI Engine | EmotiSense (Rule-based) | Keyword scoring → agent selection |
| Data | localStorage + NexusDB | Custom CRUD wrapper with schema |
| Charts | Chart.js v4.4.3 (CDN) | Budget donut, mood line, XP bar |
| Voice | Web Speech API | Speech-to-text + text-to-speech |
| Offline | Service Worker | Static asset precaching |
| PWA | Web App Manifest | Installable, standalone, splash screen |
| Animations | CSS Keyframes + JS | 8 animation types |
| Safety | Crisis Keyword Detection | Triggers resource overlay instantly |
🤖 AI Routing Engine
Every user message is scored against domain keyword sets. The agent with the highest match score is selected:
Selected Agent = argmax Σ 1[ keyword ∈ message ]
agent keywords of that agent
| 🤖 Agent | 🔑 Trigger Keywords | 🎯 Routes To |
|---|---|---|
wellness |
stress, anxious, sad, burnout, tired | MindSpace |
career |
job, resume, interview, college, internship | CareerLab |
finance |
money, budget, paycheck, savings, debt | MoneyIQ |
community |
help, resource, shelter, food, support | Community Hub |
journal |
feel, reflect, think, write, today | AI Journal |
Crisis Override — runs before all agent scoring:
IF any crisis keyword ∈ message
→ Show 988 Lifeline + 741741 Crisis Text immediately
→ Skip all other routing
🎨 Animation System
| ✨ Animation | 🎯 Trigger | ⏱️ Duration | 📐 Technique |
|---|---|---|---|
| Loading Shimmer | Page/module load | 1.5s loop | @keyframes shimmer + gradient |
| XP Float | XP awarded | 0.8s once | translateY + opacity |
| Badge Unlock | Achievement earned | 1.2s once | scale(0 → 1.2 → 1) |
| Box Breathing | MindSpace exercise | 4-7-8s cycle | border-radius + scale pulse |
| Toast Notification | Any action | 3s auto-dismiss | Slide-in + fade-out |
| Glow Pulse | Active module card | 2s loop | box-shadow keyframe |
| Page Transition | Route change | 0.3s | opacity + translateX |
| Ripple | Button click | 0.6s | Radial expand from click point |
🧗 Challenges We Ran Into
| 😵 Challenge | ✅ Solution | 📈 Outcome |
|---|---|---|
| Unifying 7 modules without fragmentation | Central app.js router + shared NexusDB state |
Single-app feel across all modules |
| Handling sensitive emotional data | 100% localStorage — nothing leaves the device |
Full user trust and privacy |
| Making mental health features safe | Crisis keyword detection → resource overlay | 988 + 741741 surface when needed |
| Keeping the app lightweight | Vanilla JS + CDN Chart.js only | < 50KB JS, instant load |
| Creating polished UI without a framework | Custom CSS design system + 8 animation types | App feels alive and premium |
| Supporting long-term re-engagement | Streaks, XP, level caps, 26 badges | Daily return motivation loop |
| Resume generation without a backend | HTML template → browser print-to-PDF | Works offline, zero API cost |
| Preventing harmful AI responses | Rule-based only — no generative claims | Safe, bounded, non-diagnostic |
Privacy Architecture Principle:
User Trust ∝ 1 / Data Exposure
NexusDB → window.localStorage → Never leaves the browser sandbox
mood[] · journal[] · xp · goals[] · resume · budget
🏆 Accomplishments We're Proud Of
| 🌟 Accomplishment | 📊 Metric | 💥 Why It Matters |
|---|---|---|
| Complete Youth Life Navigator | 7 working modules | No context-switching between apps |
| Custom AI Routing Engine | 5 agents, keyword scoring | Helps users without LLM costs |
| Safe Space Mode | 0 data logged in session | Protection for most vulnerable users |
| Full Gamification Engine | 26 badges · XP · levels · streaks | Proven behavior-change loop |
| PWA Implementation | Installable · offline-ready | Native-app feel in any browser |
| Codebase Size | ~7,700 lines | Production-grade depth |
| Zero External Dependencies | No npm · no framework | Runs anywhere, forever |
| Privacy-First Architecture | 0 bytes sent to server | Youth data stays on device |
By the Numbers:
Total Features = F(1) + F(2) + ... + F(7) = 47 features across 7 modules
Achievements = 26 badges
Lines of Code ≈ 7,700
| 📐 Metric | 📊 Value |
|---|---|
| Lines of Code | ~7,700 |
| Core Modules | 7 |
| Career Paths | 10 |
| Badges | 26 |
| Animation Types | 8 |
| Crisis Resources | 2 (always visible) |
| Input Modes | 2 (text + voice) |
| Backend Required | None |
| External CDN Deps | 1 (Chart.js) |
📚 What We Learned
Helpful Youth AI ≠ Text Generation
Helpful Youth AI = Safety + Privacy + Context + Action
(crisis detect) (local-first) (AI routing) (real tools)
| 💡 Lesson | 🚀 Impact on Product |
|---|---|
| Privacy creates trust | All data stays on device via NexusDB |
| Safety must come first | 988 + 741741 visible across every module |
| Motivation is a system | XP + badges + streaks + goals = layered loop |
| Advice alone fails | Every insight links to a real tool or action |
| Small actions compound | Mood logs, journal entries, savings goals build momentum |
| Apps must feel alive | 8 animation types make every interaction responsive |
| Rule-based AI is safer | EmotiSense uses bounded routing — no hallucination risk |
| Unified beats fragmented | One app · one XP bar · one nav = zero dropout |
The Engagement Loop Formula:
Engagement(t) = Action(t) + γ · Reward(t) + β · Streak(t)
─────────────── ───────────────
XP weight streak bonus
γ = XP weight (decays if rewards are too frequent — anti-spam)
β = streak multiplier (grows with consecutive daily sessions)
mindmap
root((ZENO AI Lessons))
Privacy First
Local storage wins trust
Zero-backend = zero risk
Safety Architecture
Crisis keyword detection
Rule-based over generative
Gamification Science
XP curve prevents plateaus
Streaks beat points alone
Performance
Vanilla JS is fast
No build step = instant deploy
UX Depth
Animation = perceived quality
Voice unlocks accessibility
🔮 What's Next for ZENO AI
The current version is a fully working local prototype. Next: a scalable, cloud-optional, professionally-partnered youth support platform.
flowchart TD
A["ZENO AI Platform v2"] --> B["Optional LLM\nClaude / GPT + consent gate"]
A --> C["Live Resource APIs\n211.org · SAMHSA · ScholarshipOwl"]
A --> D["Export Engine\nPDF · DOCX Resume · CSV Finance"]
A --> E["Community Layer\nPeer Rooms · Mentor Channels"]
A --> F["Analytics Engine\nMood × Money × Goals Trends"]
B --> G["User must opt-in\nZero forced cloud sync"]
C --> H["Geo-Aware\nNearest clinic · food bank · shelter"]
E --> I["Moderation AI\nSafety filter on all posts"]
🚀 Roadmap
| 🚀 Upgrade | 🎯 Vision | 📅 Priority |
|---|---|---|
| Smarter AI | Optional LLM with consent toggle | 🔴 High |
| Real Local Resources | 211.org + SAMHSA live APIs | 🔴 High |
| PDF / DOCX Resume | Professional export via jsPDF | 🔴 High |
| Scholarship Tracker | Deadline reminders + progress | 🟡 Medium |
| CSV Finance Import | Bank statement auto-categorization | 🟡 Medium |
| Peer Support Spaces | Moderated anonymous community | 🟠 Medium |
| Mood + Money Analytics | Trend correlation dashboard | 🟡 Medium |
| Multi-Language | i18n string map + RTL support | 🟡 Medium |
| Mentor Channels | Youth ↔ professional matching | 🟠 Long-term |
Scaling Formula:
V(v2) = Features × Privacy × Live APIs × Community × Cloud Optional
───────────── ───────────── ──────────────
real resources peer support user consent
✨ Final Vision
┌─────────────────────────────────────────────────────────────────────┐
│ ZENO AI → A private, always-available life operating system │
│ for youth │
└─────────────────────────────────────────────────────────────────────┘
| 🌟 Pillar | 💬 What It Means |
|---|---|
| Clarity | Know your career path, budget, and emotional state |
| Confidence | Practice interviews, build resumes, hit savings goals |
| Privacy | Your data never leaves your device |
| Safety | Crisis resources always one tap away |
| Momentum | XP, streaks, and badges keep you moving daily |
🛠️ Stack: HTML5 · CSS3 · Vanilla JS (ES6+) · Chart.js v4.4.3 · Web Speech API · Service Workers · PWA Manifest · NexusDB (localStorage)
🆘 Crisis Resources: 📞 988 Suicide & Crisis Lifeline · 💬 741741 Crisis Text Line
ZENO AI — Built for Youth. Designed for Life. 🌟
Log in or sign up for Devpost to join the conversation.