MindBalance
References
Please review the following documentation for our project submission.
MindBalance is a comprehensive mental health education and support hub built for students and young adults. Our mission is to provide accessible, credible information about mental health topics while connecting users with professional resources and community support.
The platform addresses the growing need for reliable mental health information by curating content from authoritative sources like the National Institute of Mental Health (NIMH), Mayo Clinic, and other trusted providers. Users can explore educational articles, find local mental health services, connect with community members, and access crisis support resources.
MindBalance was designed with accessibility as a core principle, offering features like dark mode, adjustable font sizes, colorblind modes, dyslexia-friendly fonts, and focus mode for users with ADHD.
Create a website that will serve as a community resource hub to highlight resources available to residents within the community (e.g., non-profits, support services, community events and programs, etc.). Your entry for this event is an exception to the general rules for the 2026 National TSA Conference regarding identifying information and you may include school or chapter name if it is the same name as the community used.
Your website should include the following:
- An interactive directory of community resources (resource hub) that allows users to search and filter the resources.
- A highlight section that spotlights at least three of the community resources you have listed in your resource hub.
- A form that users can submit to indicate new resources that should be added to the community resources hub.
- Additional content to enhance the community resource hub for end users.
Use this guide to quickly locate each TSA Webmaster requirement on our site. Click any item to navigate directly to that feature.
Interactive Resource Directory
Our Resource Library features a searchable, filterable directory of community resources. Users can search by keyword, filter by category (Anxiety, Depression, Stress, Mindfulness, etc.) and provider (NIMH, Mayo Clinic, CDC), sort results, and use active filter chips to refine their search.
Visit Resource LibraryFeatured Resource Spotlights
The Resource Library includes a dedicated "Featured Resources" spotlight section at the top that highlights community resources with featured badges, provider names, descriptions, and direct links to learn more about each resource.
View SpotlightsResource Submission Form
Users can suggest new community resources through our "Suggest a Resource" form in the Resource Library. The form collects the resource name, description, category, provider, website URL, phone number, address, and submitter email.
Open Submission FormAdditional Content Enhancing the Hub
Beyond the core directory, our site enhances the community resource hub with these features:
MindBalance contains 23 pages organized across five categories. Click any page name to visit it directly.
- HomeWellness check-in, mood tracker, quotes, testimonials
- BlogAll 12 mental health articles with filtering
- Resource LibrarySearchable library of mental health resources
- Community HubReal-time posts, likes, comments
- Crisis SupportHelplines, crisis resources, emergency contacts
- Reference PageCompetition documentation, site guide, work log
- Understanding AnxietyCauses, symptoms, coping strategies
- Living with DepressionSigns, treatment, and support
- Stress ManagementTechniques and prevention
- Sleep & Mental HealthSleep hygiene and disorder guidance
- Mindfulness PracticesMeditation and grounding exercises
- Teen Mental HealthYouth-specific challenges and resources
- Supporting TeensGuide for parents and educators
- Community SupportPeer connection and social wellness
- Workplace WellnessWork-life balance and burnout
- Mental Health NewsCurrent research and updates
- Mental Health WinsProgress and positive stories
- Recovery StoriesReal journeys of healing
- Sign In / Sign UpSupabase authentication
- ProfileGoals, mood history, saved articles
- Privacy PolicyData collection and usage
- Terms of ServiceSite usage terms
- DisclaimerEducational purpose notice
This website was designed and built entirely from scratch by our team using custom HTML, CSS, and JavaScript. No pre-built templates, themes, or framework systems were used in the creation of this site.
This website integrates several third-party APIs and services to enhance its functionality. These services are used strictly as tools to support features. They do not generate, modify, or write any of our website's code, content, or design. All HTML, CSS, and JavaScript was written entirely by our team.
- OpenAI API: Powers the AI Wellness Companion chatbot, providing conversational responses to user messages. The API receives user input and returns text responses. It does not generate, alter, or contribute to any part of our website's source code, layout, or design.
- ElevenLabs API: Provides text-to-speech audio so users can listen to articles. The API converts our existing article text into audio files. It does not create or modify any website content.
- Supabase: Serves as our database and authentication provider. It stores user data (profiles, posts, mood logs, etc.) and handles login/registration. It does not generate any frontend code or assets.
- Resend API: Sends newsletter welcome emails to subscribers. It delivers emails we designed. It does not create content or modify our site.
- Vercel: Hosts and serves our static website files (HTML, CSS, JS, images). It is a hosting platform only. It does not generate or alter any code.
In summary, no AI tool, API, or external service was used to write, generate, or modify any line of our website's code. No external service adds content, obtains assets, or alters our design. All APIs serve purely as functional tools that our custom-written code calls upon to deliver features to our users.
Resource Library
Interactive directory featuring credible mental health resources from organizations like NAMI, Mental Health America, Crisis Text Line, and The Trevor Project. Includes search, filtering by category, and a spotlight section for featured resources.
Community Hub
Moderated forum for peer support with posts, comments, likes, and real-time updates. Features profanity filtering, media uploads, @mentions system, and admin moderation tools.
Educational Articles
In-depth articles on anxiety, depression, stress, mindfulness, sleep, and teen mental health. Features text-to-speech audio, reading progress tracking, bookmarking, and related articles recommendations.
Crisis Support
Always-visible crisis resources including 988 Suicide & Crisis Lifeline, Crisis Text Line, and The Trevor Project. Quick access from every page ensures help is never more than a click away.
Accessibility Settings
7 accessibility options: Dark Mode, Font Size adjustment, High Contrast, three Colorblind modes (Protanopia, Deuteranopia, Tritanopia), Focus Mode for ADHD, Dyslexia-friendly font, and Reduced Motion.
User Profiles
Profiles with customizable avatars, bio, social links, mood tracking, wellness goals, reading streak calendar, achievements, and privacy controls.
Multilingual Support
Full translation support for 11 languages: English, Spanish, French, Chinese (Simplified), Hindi, Korean, German, Greek, Japanese, Portuguese, and Arabic. Language preference persists across sessions.
Find Help Locator
ZIP code-based search to find local mental health services using the SAMHSA Treatment Locator API. Filter by service type and radius, with direct call and directions buttons.
News & Stories
Curated mental health news, recovery stories, workplace wellness articles, and community spotlights. Features real-time content with text-to-speech and full reading controls.
Dual-Layer Crisis Detection
The Wellness Companion runs two independent crisis checks on every message.
A client-side keyword scan (covering English, Spanish, French, and German terms)
provides an instant response. A second check runs server-side, analyzing the full
conversation context and returning a crisis: true
flag when warranted. Either layer alone triggers the 988 crisis banner, so no
at-risk message slips through even if one layer fails.
11-Language Translation Engine
A custom translation engine loads JSON locale files on demand and applies
translations to every data-translate attribute across the page
in a single pass. It handles button labels, placeholders, ARIA labels,
and dynamic content injected after page load. The chat companion and settings
panel adapt to the active language in real time. Language preference is
persisted in localStorage so it survives page navigation.
CSS Custom-Property Theming System
All colors, typography, spacing, and accessibility overrides are driven by CSS
custom properties on the :root element. Eight accessibility
modes (dark, high contrast light/dark, three colorblind filters, ADHD focus,
dyslexia font, reduced motion) compose cleanly because each mode only
overrides its own variables. A single data-* attribute toggle on
<html> activates each mode with no JavaScript DOM
manipulation needed beyond the attribute set.
Single-Source Dual-Site Build
MindBalance is the TSA Webmaster 2025-26 competition entry. A Python build script performs a structured transformation: it swaps color palettes, replaces branding tokens, updates all Open Graph and JSON-LD metadata URLs, swaps competition attribution strings in every JS and CSS file header, and removes features specific to the source build. The entire transformed site is generated in under 3 seconds from the MindBalance source.
Split Deployment Architecture
Static assets (all HTML, CSS, JS, images) are served from Vercel's global CDN for fast load times worldwide. The Flask backend runs on Replit's persistent container and handles TTS, chat, newsletter, and community API calls. Frontend JS detects the hostname at runtime and routes API requests to the correct origin automatically, so the same code runs correctly in both local development and production without any build-time configuration.
Full SEO Implementation
All 23 pages include Open Graph and Twitter Card meta tags, canonical URL links, and structured data. Article pages use Article JSON-LD with author, date, and topic metadata. The homepage uses WebSite JSON-LD with a SearchAction potential action. Both MindBalance and MindSpace have correct domain-specific canonical URLs generated at build time, preventing cross-site duplicate content issues.
Dark Mode
Switches the entire site to a dark color palette, reducing
eye strain in low-light environments. Respects the
prefers-color-scheme OS setting on first visit
and persists the user's choice across sessions.
Font Size
Four step sizes (Small, Medium, Large, Extra-Large) scale all body text proportionally using CSS custom properties, without breaking layouts. Helpful for users with low vision.
- Small — 14px base
- Medium — 16px base (default)
- Large — 18px base
- Extra-Large — 20px base
High Contrast Mode
Amplifies contrast site-wide to meet WCAG 2.1 Level AAA (7:1 contrast ratio). Works in both light and dark themes. Gradient text is replaced with solid colors, decorative shapes are hidden, and all borders become crisp and visible.
- Light HC: black text on white background
- Dark HC: white text on black background
- Focus rings use yellow (#ffff00) for maximum visibility
- Links underlined and colored for clear identification
- Supports Windows High Contrast / Forced Colors Mode
Colorblind Modes
Three SVG-based color correction filters adjust the entire page palette for the most common types of color vision deficiency (CVD), affecting roughly 8% of males.
- Protanopia — red-blind correction
- Deuteranopia — green-blind correction
- Tritanopia — blue-blind correction
Reduced Motion
Disables or significantly slows all CSS transitions, keyframe
animations, and parallax effects. Also respects the OS-level
prefers-reduced-motion media query automatically.
Helps users with vestibular disorders, epilepsy, or motion
sensitivity.
ADHD / Focus Mode
Stops looping animations (floating icons, pulsing effects, scrolling testimonials) and hides autoplay video backgrounds that can distract users with ADHD. All interactive elements remain fully functional.
Dyslexia-Friendly Font
Switches all body text to OpenDyslexic, a typeface designed with weighted bottoms on each letter to help readers with dyslexia distinguish character shapes and reduce letter swapping.
Line Height
Increases vertical spacing between lines of text for improved readability. Three levels are available: Normal (1.6), Relaxed (1.9), and Loose (2.2). Particularly helpful for users with dyslexia, low vision, or reading difficulties.
Frontend
- HTML5, CSS3, JavaScript (ES6+)
- Custom CSS with CSS Variables for theming
- Responsive design with mobile-first approach
- Swiper.js for carousels
- Ionicons for iconography
Backend & Data
- Python Flask server
- Supabase (PostgreSQL) for database
- Supabase Auth for authentication
- Supabase Realtime for live updates
- Supabase Storage for media uploads
APIs & Integrations
- SAMHSA Treatment Locator API
- ElevenLabs API for text-to-speech
- OpenAI API for chat companion and wellness features
- Resend API for newsletter emails
- Formspree for form submissions
- Supabase API for backend services
Content Sources
- National Institute of Mental Health (NIMH)
- Mayo Clinic
- American Psychological Association
- NAMI, Mental Health America
- SAMHSA
Image & Design Sources
- Canva for graphics & design
- Ionicons for icon library
- Google Fonts (Poppins)