Why I Said Yes

Lux Cache is an educational music platform that connects experts and artists with music enthusiasts—a mission that resonates with my passion for music and peer-to-peer learning. I was excited to help Lux Cache gain independence from centralized platforms like Patreon by creating a tailored digital space—something matching the community’s DIY spirit.

Project Goals

This project aimed to achieve three main goals, each offering unique learning opportunities:

1. Subscription Access: Implementing a multi-tier subscription model that unlocks tutorials and resources like music files, plugins, and PDFs.
2. User-Friendly Experience: Creating features like bookmarking, search filters, and tagging for easy navigation.
3. Cross-Platform Sync: Enabling Discord role assignments based on subscriptions, integrating a custom bot for real-time user sync.

Challenges

This project came with a few technical and design hurdles:

• Balancing motion-heavy elements with performance and SEO.
• Ensuring smooth asynchronous loading to support motion-rich interactions.
• Expanding my skills in API integration, especially for Discord role sync and custom Stripe checkout.

Solutions and Process

Tech Stack

For Lux Cache, I chose a tech stack that balances performance and usability. Built with React and Next.js for fast, responsive UI, the app connects to Supabase for user authentication and real-time database updates. Stripe manages subscriptions, with Webhooks to keep user access in sync.

I added a Discord bot with feature flags to control and test automatic role assignment based on subscription tiers, which takes off the client's hands from managing the Discord server role assignments. Sanity CMS powers content management, while Bunny CDN and Cloudinary handle video delivery, keeping load times quick and costs low.

It's the best feeling to have during the project when the client says that adding content finally feels easy and exciting.

Solution 1: Motion-Optimized Interface

To keep motion elements smooth without hurting performance, I used asynchronous loading, lazy-loaded background animations, compressed assets and infinite-scroll loading for the video grid. For the video-heavy grid on the homepage, I reached out to Rauno, an experienced developer, for advice on handling video efficiently:

Compress videos with Cloudinary, serve them through BunnyCDN, and only render the videos that are on screen. Unmount videos as they leave the viewport to prevent Safari from lagging.

Following Rauno’s advice, I compressed videos with Cloudinary and served them via BunnyCDN. I implemented Intersection Observer to dynamically load and unmount video elements based on viewport visibility, triggering video tags only when they entered the viewport and unmounting them as they exited. This approach kept the site lightweight and ensured smooth, performance-friendly motion effects across devices.

Solution 2: Choosing the Right Tools

For an application of this scale, I started with a SaaS subscription starter kit from Vercel team. It gave me the solid foundation to build on. Next.js also has great features like parallel routes, which I used for login modals and previews of the episodes pages.

_{Utilizing Next.js parallel routes that allow for sharing links to previews of the episodes pages}

I worked with Sanity CMS on different projects before, so I knew this would be a good fit, especially because the client needed to copy and paste content from Google Docs for archival tutorials, and Sanity's rich text editor keeps the original formatting when pasting. Another thing was the ability to add custom blocks, like media embeds or sound files. Sanity also gives complete control over the system of tagging and categorizing content.

_{Custom blocks for embedding media files like videos or audio files}

_{CMS that offers full control over the system of tagging and categorizing content}

_{Custom responsive articles instead of PDFs, easily updated in Sanity}

Solution 3: Reusable Design System and Components

As I am a sole designer and developer in this project I built a small design system with color, font-sizes variables. I worked hard to keep the code as organized and reusable as possible, so I tried to work with props wherever I could to built customized reusable components (modals, dialogs, buttons, etc.) from open-source libraries like shadcn/ui.

_{Customized dialog components from shadcn/ui}

_{Customized buttons, cards and other components from shadcn/ui}

Key Lessons

Reflecting on this project, I realized the importance of:

• Building scalable systems: From the design phase through to development.
• Continuous learning: Merging online tutorials (and sometimes a cold email to a developer who you never met before) with formal design knowledge helped me manage and complete the project independently. This includes learning how to move people's money from one place online to another place online, which is definitely not without its risks.
• Beta testing: Happily, the Lux Cache platform has an existing user base (around 300 members), so I'm able to continuously get feedback and improve the application.

Final Thoughts

I could spend all day describing the lessons I learned from this project, but the most valuable ones centered around deepening my understanding of working with a design system, API integration, and handling authentication and authorization. Almost forgot about Typescript! Along the way, I encountered a few challenges, partly due to the project's scope and the number of new technologies I was working with. This process of trial and error gave me a much deeper grasp of how these technologies function together. I'm now more confident in selecting and substituting various services, as I have a clearer foundation of how they integrate.

It's important to me that the application will be used by many people and will allow them to access resources that will help them learn and grow.