Wesley Ajavon
Building l.outsider: A Modern Music Beats Marketplace with Next.js 15
1 - Introduction
The music production industry has evolved dramatically in recent years, with independent artists and producers needing accessible platforms to buy and sell beats. Enter l.outsider – a full-stack music beats marketplace I've been building that connects producers with artists through a seamless, modern webA application.
In this article, I'll walk you through the architecture, key features, and technical decisions that make l.outsider a robust, scalable platform for digital music commerce.
What is l.outsider?
l.outsider is an online marketplace where music producers can sell their beats, and artists can browse, purchase, and download instrumentals with different licensing options. Think of it as the "e-commerce of music production" – complete with shopping carts, payment processing, and digital file delivery.
The platform features a three-tier licensing system (WAV Lease at €19.99, Trackout Lease at €39.99, and Unlimited Lease at €79.99), multi-item shopping cart functionality, secure payment processing through Stripe, AWS S3 storage for high-quality audio files, a comprehensive admin dashboard, user authentication via NextAuth.js, and performance optimization through Redis caching.
A meaningful lesson learned from this project or a quote from someone you worked with.
2 - The Technical Stack
The frontend is built with Next.js 15 using the App Router, leveraging the latest React Server Components. I'm using React 19 for cutting-edge features and performance improvements, TypeScript for full type safety, Tailwind CSS for utility-first styling, Zustand for lightweight state management, and TanStack Query for powerful data fetching and server state management.
On the backend, I'm using Next.js API Routes for serverless endpoints, Prisma ORM for type-safe database access, PostgreSQL on Neon for reliable cloud database hosting, NextAuth.js for authentication and session management, Stripe for payment processing with webhooks, AWS S3 for scalable audio file storage, Cloudinary for image hosting and optimization, and Redis via Upstash for caching and rate limiting.
3 - Architecture
Three-Tier Licensing System
One of the most interesting aspects of l.outsider is its flexible licensing model. Each beat can be purchased with three different license types, each offering different usage rights and download access.
The WAV Lease (€19.99) provides master files only with commercial use rights. The Trackout Lease (€39.99) includes both master files and stems with limited distribution rights. The Unlimited Lease (€79.99) offers master files and stems with unlimited distribution capabilities.
This is implemented in the database schema with separate pricing fields and Stripe Price IDs for each license type, allowing customers to choose the right option for their specific project needs.
Multi-Item Cart System
Unlike many beat marketplaces that only allow single-item purchases, l.outsider supports adding multiple beats with different license types to a cart in a single transaction.
The implementation uses client-side state management via Zustand for immediate UI updates, localStorage persistence for cart recovery across sessions, server-side validation before checkout, and Stripe Checkout Sessions with multi-item support. The cart system intelligently groups items by license type and calculates totals dynamically, providing a smooth shopping experience.
Secure File Delivery
Audio files are stored on AWS S3 and delivered securely through presigned URLs. The system ensures that files are only accessible after successful payment, download links expire after a set period, different file types (masters vs. stems) are available based on license type, and large files are served efficiently through S3's CDN.
This approach provides both security and performance, preventing unauthorized access while maintaining fast download speeds even for large audio files that can be 50-100MB or more.
Payment Processing
The Stripe integration handles checkout sessions for both single and multi-item purchases, webhooks for processing payments, refunds, and disputes, metadata attachment for license information on each purchase, and automatic order creation and status updates.
The webhook handler is particularly robust, processing various Stripe events to keep the system perfectly in sync with payment status. This ensures that order fulfillment happens automatically and reliably.
Performance Optimization
With potentially thousands of beats and high traffic, performance is crucial. The platform uses Redis caching for beat listings, stats, and frequently accessed data. Database indexing is optimized for queries on genre, BPM, key, and price. Image optimization is handled through Cloudinary CDN for artwork. Code splitting is automatic through Next.js, enabling lazy loading where appropriate.
4 - Challenge
Complex state management
Managing cart state, user sessions, and server data across client and server components presented a significant challenge. The solution was a hybrid approach using Zustand for client-side UI state (cart, theme) and TanStack Query for server state (beats, orders). This separation keeps the codebase clean and maintainable while providing the best of both worlds.
File upload & storage
Handling large audio file uploads (WAV files can be 50-100MB+) and serving them efficiently required careful planning. The solution was implementing direct upload to S3 using presigned URLs, bypassing the Next.js server entirely.
This reduces server load and enables faster uploads. Images go through Cloudinary for automatic optimization.
License-Based Access Control
Ensuring users can only download files they've purchased with the correct license type was critical for the business model. The solution involves server-side validation in API routes that checks order history and license type before generating presigned S3 URLs. The download endpoints verify payment status and license permissions on every request.
Multi-Item Stripe Checkout
Stripe's checkout session has limitations with complex multi-item purchases that include metadata. The solution was structuring the checkout session with line items that include license metadata, and using the webhook to properly parse and create order items in the database. This allows tracking exactly which beat and license type was purchased.
5 - Security Considerations
Security was a top priority throughout development. All business logic is validated on the server. File access uses presigned URLs with time limits. Admin routes are protected with role-based access control. Stripe webhook verification ensures payment events are legitimate. Environment variables keep sensitive data from being exposed to the client. Rate limiting via Redis protects against abuse.
6 - Deployment & Infrastructure
l.outsider is deployed on Vercel, which provides automatic deployments from Git, serverless functions for API routes, global CDN for static assets, and environment variable management.
The database runs on Neon PostgreSQL, offering serverless PostgreSQL, automatic scaling, branching for development and testing, and direct SSL connections.
File storage is handled by AWS S3 for audio files (masters and stems) and Cloudinary for images (artwork, thumbnails).
Lessons Learned
Plan for scale from the start: Database indexing and caching decisions made early prevent issues later.
Building l.outsider taught me that type safety is worth it – TypeScript caught countless bugs before they reached production. Stripe webhooks are powerful but complex, and proper error handling and idempotency are crucial. File storage strategy matters – using S3 presigned URLs instead of proxying through the server was the right call.
User experience over features: A smooth checkout process is more valuable than many nice-to-have features.
Conclusion
l.outsider represents a complete, production-ready music marketplace built with modern web technologies. The combination of Next.js 15, TypeScript, Prisma, and Stripe creates a powerful foundation for digital commerce, while thoughtful architecture decisions ensure scalability and maintainability.
Whether you're building a similar marketplace or just interested in modern web application architecture, I hope this overview provides insights into the challenges and solutions involved in creating a full-featured e-commerce platform.
The codebase is a testament to how far modern web development has come – building what would have taken a large team months can now be accomplished by a solo developer with the right tools and architecture.
Want to see l.outsider in action? Check out the live demo or explore the codebase. Have questions about the implementation? Feel free to reach out!
Built with ❤️ using Next.js, TypeScript, and a lot of coffee.
Wesley Ajavon
wesleyajavon2203@hotmail.com
Wesley Ajavon
Building l.outsider: A Modern Music Beats Marketplace with Next.js 15
1 - Introduction
The music production industry has evolved dramatically in recent years, with independent artists and producers needing accessible platforms to buy and sell beats. Enter l.outsider – a full-stack music beats marketplace I've been building that connects producers with artists through a seamless, modern web application.
In this article, I'll walk you through the architecture, key features, and technical decisions that make l.outsider a robust, scalable platform for digital music commerce.
What is l.outsider?
l.outsider is an online marketplace where music producers can sell their beats, and artists can browse, purchase, and download instrumentals with different licensing options. Think of it as the "e-commerce of music production" – complete with shopping carts, payment processing, and digital file delivery.
The platform features a three-tier licensing system (WAV Lease at €19.99, Trackout Lease at €39.99, and Unlimited Lease at €79.99), multi-item shopping cart functionality, secure payment processing through Stripe, AWS S3 storage for high-quality audio files, a comprehensive admin dashboard, user authentication via NextAuth.js, and performance optimization through Redis caching.
A meaningful lesson learned from this project or a quote from someone you worked with.
2 - The Technical Stack
The frontend is built with Next.js 15 using the App Router, leveraging the latest React Server Components. I'm using React 19 for cutting-edge features and performance improvements, TypeScript for full type safety, Tailwind CSS for utility-first styling, Zustand for lightweight state management, and TanStack Query for powerful data fetching and server state management.
On the backend, I'm using Next.js API Routes for serverless endpoints, Prisma ORM for type-safe database access, PostgreSQL on Neon for reliable cloud database hosting, NextAuth.js for authentication and session management, Stripe for payment processing with webhooks, AWS S3 for scalable audio file storage, Cloudinary for image hosting and optimization, and Redis via Upstash for caching and rate limiting.
3 - Architecture
Three-Tier Licensing System
One of the most interesting aspects of l.outsider is its flexible licensing model. Each beat can be purchased with three different license types, each offering different usage rights and download access.
The WAV Lease (€19.99) provides master files only with commercial use rights. The Trackout Lease (€39.99) includes both master files and stems with limited distribution rights. The Unlimited Lease (€79.99) offers master files and stems with unlimited distribution capabilities.
This is implemented in the database schema with separate pricing fields and Stripe Price IDs for each license type, allowing customers to choose the right option for their specific project needs.
Multi-Item Cart System
Unlike many beat marketplaces that only allow single-item purchases, l.outsider supports adding multiple beats with different license types to a cart in a single transaction.
The implementation uses client-side state management via Zustand for immediate UI updates, localStorage persistence for cart recovery across sessions, server-side validation before checkout, and Stripe Checkout Sessions with multi-item support. The cart system intelligently groups items by license type and calculates totals dynamically, providing a smooth shopping experience.
Secure File Delivery
Audio files are stored on AWS S3 and delivered securely through presigned URLs. The system ensures that files are only accessible after successful payment, download links expire after a set period, different file types (masters vs. stems) are available based on license type, and large files are served efficiently through S3's CDN.
This approach provides both security and performance, preventing unauthorized access while maintaining fast download speeds even for large audio files that can be 50-100MB or more.
Payment Processing
The Stripe integration handles checkout sessions for both single and multi-item purchases, webhooks for processing payments, refunds, and disputes, metadata attachment for license information on each purchase, and automatic order creation and status updates.
The webhook handler is particularly robust, processing various Stripe events to keep the system perfectly in sync with payment status. This ensures that order fulfillment happens automatically and reliably.
Performance Optimization
With potentially thousands of beats and high traffic, performance is crucial. The platform uses Redis caching for beat listings, stats, and frequently accessed data. Database indexing is optimized for queries on genre, BPM, key, and price. Image optimization is handled through Cloudinary CDN for artwork. Code splitting is automatic through Next.js, enabling lazy loading where appropriate.
4 - Challenge
Complex state management
Managing cart state, user sessions, and server data across client and server components presented a significant challenge. The solution was a hybrid approach using Zustand for client-side UI state (cart, theme) and TanStack Query for server state (beats, orders). This separation keeps the codebase clean and maintainable while providing the best of both worlds.
File upload & storage
Handling large audio file uploads (WAV files can be 50-100MB+) and serving them efficiently required careful planning. The solution was implementing direct upload to S3 using presigned URLs, bypassing the Next.js server entirely.
This reduces server load and enables faster uploads. Images go through Cloudinary for automatic optimization.
License-Based Access Control
Ensuring users can only download files they've purchased with the correct license type was critical for the business model. The solution involves server-side validation in API routes that checks order history and license type before generating presigned S3 URLs. The download endpoints verify payment status and license permissions on every request.
Multi-Item Stripe Checkout
Stripe's checkout session has limitations with complex multi-item purchases that include metadata. The solution was structuring the checkout session with line items that include license metadata, and using the webhook to properly parse and create order items in the database. This allows tracking exactly which beat and license type was purchased.
5 - Security Considerations
Security was a top priority throughout development. All business logic is validated on the server. File access uses presigned URLs with time limits. Admin routes are protected with role-based access control. Stripe webhook verification ensures payment events are legitimate. Environment variables keep sensitive data from being exposed to the client. Rate limiting via Redis protects against abuse.
6 - Deployment & Infrastructure
l.outsider is deployed on Vercel, which provides automatic deployments from Git, serverless functions for API routes, global CDN for static assets, and environment variable management.
The database runs on Neon PostgreSQL, offering serverless PostgreSQL, automatic scaling, branching for development and testing, and direct SSL connections.
File storage is handled by AWS S3 for audio files (masters and stems) and Cloudinary for images (artwork, thumbnails).
Lessons Learned
Plan for scale from the start: Database indexing and caching decisions made early prevent issues later.
Building l.outsider taught me that type safety is worth it – TypeScript caught countless bugs before they reached production. Stripe webhooks are powerful but complex, and proper error handling and idempotency are crucial. File storage strategy matters – using S3 presigned URLs instead of proxying through the server was the right call.
User experience over features: A smooth checkout process is more valuable than many nice-to-have features.
Conclusion
l.outsider represents a complete, production-ready music marketplace built with modern web technologies. The combination of Next.js 15, TypeScript, Prisma, and Stripe creates a powerful foundation for digital commerce, while thoughtful architecture decisions ensure scalability and maintainability.
Whether you're building a similar marketplace or just interested in modern web application architecture, I hope this overview provides insights into the challenges and solutions involved in creating a full-featured e-commerce platform.
The codebase is a testament to how far modern web development has come – building what would have taken a large team months can now be accomplished by a solo developer with the right tools and architecture.
Want to see l.outsider in action? Check out the live demo or explore the codebase. Have questions about the implementation? Feel free to reach out!
Built with ❤️ using Next.js, TypeScript, and a lot of coffee.
Wesley Ajavon
wesleyajavon2203@hotmail.com
864-563-3182
