NMTSA Learning Management System

Inspiration

NMTSA uses music therapy to help people with neurological conditions. We wanted to help them share that knowledge more effectively. Their educators needed a central place to manage learning content, track engagement, and support professionals and families. Our goal was to build a secure, scalable, and easy-to-use platform that supports both education and revenue growth.

What It Does

The NMTSA Learning Management System (LMS) centralizes educational content for healthcare professionals, clients, and families.

For Administrators and Professionals

Create and manage resources with video, PDF, and audio content
Upload materials to secure cloud storage
Mark resources as free or paid
Control access by role, group, or individual
Organize content into topics or categories
Track engagement and completion rates

For Clients and Families

Access free learning materials about neurological therapy
Enroll for premium resources for advanced learning
Download worksheets and guides
Track personal progress
Connect with support and therapy resources

Key Features

Role-based access (Admin, Professional, Client)
Secure authentication with Google or email login
Real-time content updates with Firestore
Video streaming and file downloads via Firebase Storage
Mobile-responsive UI
Search and filtering across all resources

How We Built It

Frontend

React 18 + TypeScript for reliability and speed
Vite for fast builds
Tailwind CSS + shadcn/ui for modern, accessible design

Backend

Firebase Authentication for login and session handling
Firestore for real-time database and data sync
Firebase Storage for scalable file hosting
Firebase Security Rules for fine-grained access control

Architecture Highlights

Component-Based Design – Modular React components for easy scaling
Real-Time Sync – Firestore listeners instantly reflect content updates
Security-First – Custom Firestore rules for multi-layer role checks
File Upload System – Supports large uploads, Google Drive links, and progress tracking
Responsive UI – Works seamlessly across desktop and mobile

Development Process

Defined user roles and permissions with NMTSA’s input
Designed Firestore schema for users, content, and access groups
Built authentication with profile setup flow
Created admin dashboard for content and user management
Implemented search, filters, and real-time updates
Tested across devices for responsive layouts

Challenges

1. Role-Based Permissions We needed flexible yet secure access rules. Each course could be public, role-based, or restricted to specific users. We built layered Firestore security functions that mirror frontend logic, ensuring consistency and protection.

2. Large File Uploads Course videos exceeded 100MB. We added upload progress indicators, file validation, and retry mechanisms for reliability.

3. Dynamic User Interfaces Each role sees a different dashboard. We built a centralized permission check to render components dynamically and prevent unauthorized access.

4. Security Rule Complexity Firestore rules required extensive testing to avoid circular dependencies and performance hits. We refined and stress-tested them to balance speed and security.

5. Mobile Optimization We adapted complex admin tools for mobile with collapsible navigation, touch support, and optimized layouts.

Accomplishments

Robust Role-Based Access Control: Granular permissions at every level with tested Firestore security rules.
Seamless File Management: Drag-and-drop uploads, validation, progress tracking, and secure storage.
Scalable Architecture: Firestore indexing and modular design keep performance consistent as data grows.
Mobile-First Interface: Professionals can learn or manage resources on any device.
Production-Ready System: Secure backend, clean UI, and documented deployment pipeline.
Flexible Sharing: Supports organizational and user-generated content under one structure.