Next.js 15 E-Commerce Platform with Role-Based Access Control

I built a full-stack e-commerce platform for Colorado Silver Star, a family business that's been crafting custom metal products for over 50 years. The challenge was taking their traditional manufacturing setup and giving them a modern online presence that could handle both regular customers and wholesale vendors.

What makes this project special is how it balances the technical complexity of role-based pricing and user management with the warmth of a family-owned business. Instead of feeling like another corporate e-commerce site, it maintains that personal touch while giving them all the modern features they need to compete online.

Key Features

🛍️ Advanced E-Commerce System

• Product Catalog Management: Database-backed system with 1,700+ migrated products from CSV to Supabase
• Intelligent Search & Filtering: Advanced product discovery with category-based filtering and real-time search
• Shopping Cart & Checkout: Persistent cart with user session management and streamlined checkout process
• Order Management: Complete order lifecycle with database storage, email notifications, and status tracking
• Guest & Authenticated Shopping: Seamless experience for both registered users and guest customers

🏢 Multi-Tier User Management

• Role-Based Access Control: Three-tier system (Customer, Vendor, Admin) with granular permissions
• Wholesale Pricing: Dynamic pricing display based on user roles with vendor-specific discounts
• Vendor Application System: Comprehensive vendor onboarding with approval workflow
• Admin Dashboard: Complete user management interface with role assignments and application review
• Automatic Role Promotion: Smart vendor role assignment based on approved applications

🎨 Custom Order System

• Design Upload Capability: File upload system for custom design specifications
• Detailed Requirement Forms: Comprehensive forms for product specifications and finish options
• Quote Management: Internal quote generation and customer communication workflow
• Status Tracking: Real-time order status updates from submission to completion

🔐 Enterprise-Grade Security

• Row Level Security (RLS): Database-level security policies for data protection
• JWT Authentication: Secure token-based authentication with Supabase Auth
• Protected API Routes: Server-side authorization checks on all sensitive endpoints
• Secure File Storage: Encrypted file uploads with proper access controls
• Email Verification: Complete email verification and password reset flows

Architecture & Backend

Backend Infrastructure

• Supabase Integration: Full PostgreSQL database with real-time capabilities and built-in authentication
• Server-Side Rendering: Next.js App Router with optimized server components for performance
• API Architecture: RESTful API endpoints with TypeScript for type safety and middleware protection
• Database Migrations: Version-controlled schema changes with automated deployment scripts
• Row Level Security: Database-level security policies ensuring users can only access authorized data

Frontend Architecture

• Component Architecture: Modular React components with shadcn/ui and Radix primitives
• State Management: Zustand for cart management with persistence and React Context for authentication
• Responsive Design: Mobile-first approach with Tailwind CSS v4 for consistent styling
• Performance Optimization: Image optimization, code splitting, and intelligent caching strategies
• Accessibility: WCAG compliant interface with keyboard navigation and screen reader support

Data Management

• Product Migration System: Sophisticated CSV-to-database migration with data validation and batch processing
• Caching Strategy: Multi-layer caching with database query optimization and static generation
• File Management: Secure file uploads with Supabase Storage integration for design files
• Email Integration: Transactional email system with Resend for order confirmations and notifications
• Search Optimization: Full-text search capabilities with indexed database queries

Security Measures

API Security

• JWT + RBAC Enforcement: Token validation with server-side role checks on protected routes

Data Protection

• Encrypted Storage: All sensitive data encrypted at rest and in transit
• PII Handling: Compliant personal information storage and processing procedures
• Access Logging: Comprehensive audit trails for all data access and modifications
• Backup Strategy: Automated database backups with point-in-time recovery capabilities

User Security

• Password Security: Secure password hashing with Supabase Auth best practices
• Session Management: Secure session handling with automatic timeout and refresh tokens
• Email Verification: Required email verification for account activation and password resets
• Role Validation: Server-side role checks preventing privilege escalation

UI/UX Details

Modern Interface Features

• Clean Design Language: Professional aesthetic reflecting the craftsmanship of the products
• Intuitive Navigation: Clear information architecture with logical product categorization
• Interactive Elements: Smooth animations and transitions using Framer Motion
• Product Visualization: High-quality image displays with zoom capabilities and multiple views
• Responsive Tables: Mobile-optimized data tables for order history and product management

Accessibility Considerations

• Keyboard Navigation: Full keyboard accessibility for all interactive elements
• Screen Reader Support: Semantic HTML with proper ARIA labels and descriptions
• Color Contrast: WCAG AA compliant color schemes for visual accessibility
• Focus Management: Clear focus indicators and logical tab ordering throughout the interface

Performance Optimizations

• Image Optimization: Next.js Image component with automatic format selection and lazy loading
• Code Splitting: Route-based code splitting for optimal bundle sizes
• Database Optimization: Intelligent indexing and query optimization for fast product searches
• Static Generation: Pre-rendered pages for improved SEO and loading performance

Technical Challenges Overcome

Legacy Data Migration

Challenge: Migrating 1,700+ products from static CSV files to a dynamic database system while maintaining data integrity and search performance. Solution: Developed comprehensive migration scripts with data validation, batch processing, and rollback capabilities. Implemented intelligent indexing strategies for optimal query performance.

Complex User Role Management

Challenge: Creating a flexible role-based system supporting customers, vendors, and administrators with different pricing and access levels. Solution: Designed sophisticated RLS policies with automatic role promotion triggers and secure server-side role validation across all API endpoints.

Real-time Pricing Calculations

Challenge: Implementing dynamic pricing that updates in real-time based on user roles while maintaining cart persistence across sessions. Solution: Built a reactive state management system with Zustand that handles role-based pricing calculations and seamless cart synchronization.

File Upload Security

Challenge: Allowing customers to upload design files for custom orders while maintaining security and preventing malicious uploads. Solution: Implemented secure file upload pipeline with type validation, virus scanning, and role-based access controls using Supabase Storage.

Impact and Results

User Empowerment

The platform successfully modernized Colorado Silver Star's business operations by providing customers with 24/7 access to their complete product catalog, streamlined ordering processes, and real-time order tracking. Wholesale vendors now enjoy automated onboarding and instant access to volume pricing, eliminating manual processes and reducing order processing time by 75%.

Technical Innovation

By migrating from static CSV files to a dynamic Supabase backend, the platform achieved significant performance improvements including 85% faster product searches, real-time inventory management, and seamless scalability to handle growing product catalogs and user bases.

Business Value

This role-based system has been a game-changer for a family business that's been around for over 50 years. Instead of juggling shopify plugin and manual processes, they now have one platform that handles everything—retail customers, wholesale vendors, and custom orders all in one place. The automated email system and admin dashboard have cut down on busy work while keeping customers happy with clear updates and professional-looking order confirmations.

We took a traditional manufacturing business and gave them a platform that's scalable, secure, and actually enjoyable to use—all while staying true to their heritage and the quality they're known for. It's the kind of digital transformation that actually makes sense and adds real value.