Back to Portfolio

Artiverse Galleria

Portfolio demonstration project: A full-stack e-commerce art gallery platform built with Next.js 16, showcasing modern architecture patterns, security best practices, and enterprise-grade features.

Artiverse Galleria
Next.js 16
TypeScript
PostgreSQL
Drizzle ORM
NextAuth.js v5
Tailwind CSS
React Context API
TanStack Query
Docker
Sharp (Image Processing)
Overview

Artiverse Galleria is a portfolio demonstration project showcasing full-stack development capabilities through a comprehensive e-commerce platform designed for art galleries. This project demonstrates proficiency in modern web technologies, architectural patterns, and enterprise-grade security implementations. The application features a feature-based architecture that promotes scalability and maintainability. It implements a three-layer pattern (Repository → Service → Action) ensuring clean separation of concerns. The platform includes advanced features like image processing with watermarking, rate limiting for API protection, role-based access control, and comprehensive security measures. Why this project? Built to demonstrate expertise in: modern React/Next.js patterns, TypeScript best practices, database design with Drizzle ORM, authentication flows with NextAuth.js v5, image processing pipelines, and production-ready architecture patterns.

Architecture

The application follows a feature-based architecture where code is organised by business domain rather than technical layer. This approach ensures that related code is co-located, making it easier to maintain and scale. The system uses a three-layer pattern: 1. Repository Layer: Handles data access and database operations 2. Service Layer: Contains business logic and orchestration 3. Action Layer: Server actions for client components with cache revalidation Authentication is handled through NextAuth.js v5 with JWT session strategy. The platform implements role-based access control (RBAC) with roles including Admin, Editor, ShopManager, and User. Caching is implemented at multiple levels: Next.js cache, unstable cache for server-side data fetching, and browser cache for static assets. Cache invalidation is handled through tag-based and path-based revalidation.

Key Features
  • Feature-based architecture for scalability
  • Three-layer architecture pattern (Repository → Service → Action)
  • NextAuth.js v5 authentication with role-based access control
  • Advanced image processing with watermarking and optimization
  • Rate limiting for API protection
  • Real-time analytics tracking
  • Automated order processing
  • PayFast payment integration
  • Media management with bytea storage
  • Comprehensive admin dashboard
  • Artist profile management
  • Product catalogue with advanced filtering
  • Security headers and CSRF protection
  • Database health monitoring
  • Docker containerisation support
Challenges
  • Implementing efficient image processing and storage in PostgreSQL as bytea
  • Designing a scalable rate limiting system without external dependencies
  • Creating a flexible role-based access control system
  • Optimising database queries for large product catalogues
  • Implementing secure payment webhook handling
  • Managing complex state across multiple features
Achievements
  • Demonstrates production-ready e-commerce platform development
  • Showcases clean separation of concerns with three-layer architecture
  • Implements comprehensive security measures including rate limiting and CSRF protection
  • Features scalable feature-based architecture supporting easy feature additions
  • Includes optimised image processing pipeline with automatic format conversion
  • Demonstrates admin dashboard patterns with role-based permissions