Launching My First Full-Stack Application

Launching My First Full-Stack Application

From Spreadsheets to Streamlined Systems

After being hired as a tech consultant at a bustling music school I found myself confronted with a workflow involving multiple systems that simply didn’t speak the same language. Daily operations involved spreadsheets, MyMusicStaff (an industry-standard music school software), Google Suite, iMessage, Webex, and more. It wasn’t just time-consuming - it was error-prone, inefficient, and stressful for staff.

I built a full-stack application to change that.

Read on, or give it a spin here!

🛠️ The Problem

New student leads came in through various channels, but there was a need for a more centralized, consistent workflow for converting inquiries into enrolled students. Admins were forced to copy the same information across different platforms, sometimes three times over, just to onboard one student.

Staff also sent manually edited email templates, which were time consuming and frequently introduced mistakes. There was a great deal of room to enhance analytics visibility, pipeline tracking, and to create a central place to manage business processes like instrument repairs, orders and internal tasks.

💡 The Solution

I developed a full-stack web application to unify and automate the admin workflow. Built using the MERN stack(MongoDB, Express, React, Node.js), the app:

• Tracks leads through each stage of the sales funnel - from inquiry to trial lesson to enrollment

• Integrates seamlessly with MyMusicStaff via import features

• Sends dynamic, formatted emails (via SendGrid) with zero manual field editing

• Facilitates communication via built-in SMS, Webex integration, email, and phone call tracking

• Offers detailed analytics on lead conversions, contact rates, and team activity

• Manages internal workflows like repairs, sales, and administrative follow-ups

• Provides a flexible settings dashboard where authorized users can control instruments, teacher details, subjects offered, and physical locations

Authentication was handled via cookies and bcrypt, with protected routes ensuring proper access control. I used Material UI (MUI) for styling and layout consistency, and designed everything to scale with future needs.

📊 The Impact

The application cut administrative workload by 80% and drastically reduced human error. Tasks that once took 20 minutes now take 2. And most importantly, the mental load on staff decreased - less guesswork, less duplication, and more time focused on teaching and student engagement.

🤯 Key Challenges

As my first full-stack solo project, the learning curve was real. Implementing secure authentication was especially tough, but it taught me a lot about token handling, and client-server communication. The success of the dynamic emailing feature also stands out - replacing a major pain point for staff with a polished, error-resistant solution. While the UI leaves a bit to be desired, the app has worked flawlessly and solved the problems of a once frustrating process.

👀 What I Learned

Building an app for a job I had detailed knowledge of gave me a rare level of insight into user needs. It reminded me how crucial a strong mental model is for effective software design. When you understand the why behind every feature, you build smarter, more empathetic systems.

Check it out here!

💬 I'd love to connect with other developers or education tech professionals - especially those who are interested in human-centric, problem-driven software.

Oh, hey

I always love chatting about music, so feel free to...

Drop me a line
Back to Posts

Benjamin Campbell © 2025