Cool-name-pending

-Front page
The NMTSA logo

🪄 Inspiration

Zoom link : https://asu.zoom.us/rec/share/9yJ_dMYfEzFVGwDm3KF9J-eWf7Vfg15QdWNaj7HbLCcTy1H_zKmUqlbUnDO5Fw8G.4nsJ4JmeYk4zBEUp

Our team was inspired by NMTSA’s mission to make music therapy accessible to everyone in the community. We noticed that their existing site could be more engaging, modern, simpler to work with, and easier to maintain. We wanted to create a new digital experience that reflects the heart of NMTSA as a place of compassion, creativity, and connection through music.

💡 What It Does

The NMTSA website serves as an informative and welcoming hub for clients, families, and therapists.
It allows visitors to:

Learn about NMTSA’s mission and therapy programs
Read therapist bios and community stories
Explore volunteer and donation opportunities
Stay up-to-date on events and announcements
Contact or request services directly online

We designed it to be visually appealing, mobile-friendly, and easy to update for NMTSA’s staff.

🛠️ How We Built It

We built the site using a modern web stack to ensure performance, scalability, and maintainability:

Frontend: Next.js + React
Language: TypeScript
Styling: CSS + TailwindCSS for rapid responsive design
Backend: TypeScript-based backend for structured content delivery
CMS: Sanity.io — enabled dynamic content management for announcements, events, and editable sections
Deployment: Vercel (Next.js optimized hosting)
Version Control: Git & GitHub for collaboration and CI/CD integration

⚙️ Challenges We Ran Into

Structuring a CMS that allowed NMTSA staff to easily manage and publish new content
Maintaining visual consistency across devices while ensuring accessibility
Handling responsive design across a wide range of screen sizes
Integrating Sanity.io smoothly with Next.js for real-time content updates
Coordinating Git workflows and merge conflicts across multiple developers

🏆 Accomplishments That We're Proud Of

Developed a fully responsive, modern, and accessible site for NMTSA
Successfully integrated Sanity.io to streamline content updates
Improved the website’s visual identity and user flow
Strengthened team collaboration and agile development practices
Created a scalable structure that will serve NMTSA for years to come
We made an auto-rotating hero banner (Play/Pause, keyboard arrows, high-contrast overlay) that uses images from the original site.

📚 What We Learned

How to integrate a headless CMS (Sanity.io) with Next.js for dynamic site management
Best practices for TypeScript-based development across both frontend and backend
Practical application of TailwindCSS for responsive, accessible UIs
Version control, collaboration, and project management in a multi-developer environment
Real-world challenges of building for a non-profit client with specific accessibility needs