CushLabs Image Portfolio

Overview

CushLabs Image Portfolio is a purpose-built photo gallery application designed for showcasing images in a professional, visually striking format. Built on Next.js 16 with the App Router, it features dual gallery layouts (masonry and grid), a full-screen lightbox with slider navigation, drag-and-drop upload with automatic WebP conversion, and Clerk v7 authentication with social login.

The design uses a CushLabs orange (#F26522) and black color palette — dark, modern, and intentionally distraction-free so the images take center stage. The application ships as a Progressive Web App, making it installable on any device as a native-feeling app. A custom dog silhouette logo and favicon carry the brand throughout.

The Challenge

• Gallery solutions are heavy: Most photo gallery platforms bundle CMS features, user management, and e-commerce that aren't needed for a simple showcase
• Design quality drops at "simple": Stripping features usually means stripping design quality — minimal galleries tend to look generic
• Mobile experience is an afterthought: Many web galleries don't handle touch navigation, swipe gestures, or mobile layout with the same care as desktop
• Sharing is clunky: Most galleries don't integrate with messaging apps for quick sharing

The Solution

Focused feature set, high execution: A gallery that does four things well — display, navigate, upload, and share. Authentication via Clerk keeps the gallery private, while the access request flow provides a clean onboarding path for new users.

Dark-first, brand-consistent design: CushLabs orange against a pure black background. Every component — header, gallery, lightbox, upload zone, Clerk auth screens, footer — follows the same design language with subtle animations via Framer Motion. Clerk components are styled via CSS overrides and the @clerk/themes dark base.

Auto-optimized uploads: All uploaded images are automatically converted to WebP (quality 82) via Sharp on the server. A batch of PNGs that might be 80MB drops to under 3MB without visible quality loss.

Native sharing: The lightbox includes a share button that uses the Web Share API on mobile (opening the native share sheet with WhatsApp, Messages, etc.) with a direct WhatsApp fallback on desktop.

Technical Highlights

• Next.js 16 App Router: Server components for static pages, API routes for image CRUD operations
• Clerk v7 authentication: Social login (Google, Apple, Facebook), middleware-level route protection, dark-themed components with CSS overrides
• Tailwind CSS v4 @theme inline: Design tokens defined as CSS custom properties, using v4 utility syntax (bg-linear-to-r, bare z-100)
• Sharp WebP pipeline: All uploads auto-converted to optimized WebP on ingest, reducing storage by 90%+
• Per-file upload: Images uploaded one at a time to avoid body size limits, with individual progress tracking
• Web Share API: Native share sheet on mobile, WhatsApp fallback on desktop, with file sharing when supported
• File-based storage: Images stored in public/uploads/ with a meta.json manifest — no database dependency
• Custom branding: Dog silhouette favicon and nav logo generated from source PNG via Sharp

Results

For the End User:

• Sign in with Google, Apple, or Facebook — no new account to create
• Upload photos via drag-and-drop with automatic optimization
• Browse in masonry or grid layout with a single toggle
• View full-screen images with swipe or arrow key navigation
• Share photos directly to WhatsApp from the lightbox
• Install as a phone app from the browser (Android and iOS)

Technical Demonstration:

• Modern Next.js 16 patterns with App Router and server/client component split
• Clerk v7 integration with custom dark theme styling
• Tailwind CSS v4 design system with custom tokens
• Production-quality UI with attention to animation, accessibility, and mobile UX
• Clean architecture with minimal dependencies and no database requirement