From the Roadside to the Web: Building a Portfolio Platform for Independent Artists

The Community

In my country, it's common to see artists roaming the streets, paintings tucked under their arms, trying to sell their work to passersby. It's a hustle born of passion — but also of necessity, because there simply isn't a better way for many of them to reach buyers.
This became personal for me because my own brother was one of those artists. I watched him walk the streets, talented work in hand, with no platform and no audience beyond whoever happened to walk by.
That image never left me. Artelier was built for him — and for every independent painter, illustrator, and creator like him — who deserves a professional space to showcase their work, sell their art, and receive commissions, without giving up a cut to a faceless marketplace or being limited to the reach of a sidewalk.

The goal: give street-level talent a world-class online home they truly own.

What I Built

Artelier is a modern, full-stack artist portfolio and e-commerce platform. It's not just a gallery — it's a complete creative ecosystem for artists and their audiences.

🖼️ For Visitors / Art Collectors

• Browse curated galleries and collections with smooth animations and skeleton loaders
• Image lightbox with zoom in/out and download support
• Favorites system — heart artworks and revisit them from a dedicated favorites page (persisted via localStorage)
• Social sharing — share artwork to Twitter, Facebook, LinkedIn, or copy a direct link
• Purchase artwork — buy originals or order prints in multiple sizes; payment is confirmed directly by the artist
• Commission requests — fill out a detailed form to request a custom piece directly from the artist ### 🎨 For Artists / Admins
• Upload artworks (via Supabase Storage, Cloudinary, or local) with titles, tags, pricing, and descriptions
• Gallery management — create named collections and organize artworks into them
• Print options manager — set print sizes and formats per artwork
• Order dashboard — view and update order statuses (Pending → Paid → Fulfilled → Canceled)
• Commission inbox — manage incoming commission requests with a full status workflow (New → In Review → Invoice Sent → Paid → Rejected)
• Artist profiles — public-facing profile with bio, avatar, contact links, with full CRUD in the admin panel
• Forgot password with dev-mode URL display and dark mode support ### ✨ Design Highlights
• Glass morphism UI with backdrop blur effects
• Teal-to-emerald gradient accent system
• Custom palette & paintbrush SVG logo
• Smooth micro-animations: fade-in-up, slide-in-left, scale-in
• Fully responsive and mobile-first

- Custom styled scrollbar matching the theme

Demo

artist-portfolio-five.vercel.app

Code

Byukusenge-Andrew / artist-portfolio

🎨 Artelier - Artist Portfolio & Marketplace

A modern, full-featured art portfolio and e-commerce platform built with Next.js 15, featuring artwork galleries, favorites system, print sales, and admin management.

✨ Features

🖼️ Gallery & Artwork Management

• Dynamic Galleries: Browse curated collections with smooth animations
• Advanced Search & Filtering: Filter by tags, search by title, sort by date/title
• Image Lightbox: Click-to-zoom with controls (zoom in/out, download, ESC to close)
• Related Artworks: Smart recommendations based on tags and categories
• Loading States: Elegant skeleton loaders for better UX

⭐ Favorites System

• Persistent Favorites: LocalStorage-based favorites that persist across sessions
• Favorites Counter: Real-time badge showing favorite count in header
• Sorting Options: Sort by newest/oldest, alphabetically (A-Z/Z-A)
• Bulk Actions: Clear all favorites with confirmation dialog
• Dedicated Page: View and manage all favorited artworks

🛒 E-Commerce Features

• Original Artwork Sales: Sell unique, one-of-a-kind pieces
• Print…

View on GitHub

How I Built It

🛠️ Tech Stack

Layer	Technology
Framework	Next.js 15 (App Router)
UI	React 19, Tailwind CSS 4.x, Lucide React
Type Safety	TypeScript
Forms	React Hook Form + Zod validation
Database	MySQL + Prisma ORM
File Storage	Supabase Storage (server-side upload via service role)
Image Optimization	Cloudinary + next-cloudinary
Auth	Custom JWT + cookie-based admin sessions
State	React Context API (FavoritesContext) + localStorage

🏗️ Architecture

One of the most interesting challenges was bridging two separate auth systems:

1. Admin login uses a custom password → cookie (admin_session)
2. Supabase Storage RLS expects a native Supabase Auth session (auth.uid()) The solution was a server-side upload proxy endpoint (POST /api/uploads/supabase) that:
3. Validates the admin_session cookie (keeping existing admin auth)
4. Uses the Supabase service_role key server-side (never exposed to the client)
5. Performs file type/size validation before forwarding to Supabase This keeps security airtight while making the upload experience seamless. ### 🗄️ Database Schema Key models in Prisma:
6. Artwork — title, images, tags, pricing, gallery association
7. Gallery — named collections containing many artworks
8. Artist — profile info, bio, avatar URL
9. PrintOption — print sizes and prices per artwork
10. Order / OrderItem — customer purchases
11. CommissionRequest — custom artwork requests with status tracking ### 🔒 Security
12. All admin API routes check the admin_session cookie before responding
13. Zod schemas validate every POST/PATCH body
14. HTTPS enforced in development with self-signed certificates