Back to Projects

Lorem Ipsum Gallery

2026

Next.js
TypeScript
Tailwind CSS
Express
PostgreSQL
Prisma
Elasticsearch
GSAP

Full-stack design marketplace and mockup gallery — shop, visuals, blog, and admin CMS. Next.js 16 frontend with an Express + PostgreSQL API, Elasticsearch search, and manual payment checkout with proof upload.

Overview

Lorem Ipsum Gallery is a production e-commerce platform for design assets, mockups, and editorial content. The public site combines a curated shop, visuals gallery, blog, and service pages; operators manage the full catalogue from a protected admin panel.

The stack spans Next.js 16 (App Router, server actions) and loremipsumgallery-backend — Express 4 + Prisma on PostgreSQL (Neon), with optional Elasticsearch for product search. Auth is JWT in httpOnly cookies; media lives on Cloudinary and Firebase Storage.

Public experience

The homepage uses GSAP scroll reveals, carousels, featured work, and testimonials. Shoppers browse /shop by category, open /product/[slug] for variants and media, and search via /search (Elasticsearch-backed GET /api/search).

/visuals — bento-style curated imagery with lightbox. /blogs — published posts from the TipTap CMS. /cart and /checkout support guest and logged-in flows with express shipping (PKR 200).

Checkout & payments

No Stripe or card gateway — checkout uses offline verification suited to Pakistan:

  • Bank transfer or Easypaisa selected at checkout
  • Customer submits transaction ID, reference note, and up to 2 proof images (PNG/JPEG/PDF)
  • Proofs upload to Firebase Storage; order created via POST /api/orders with Payment status PENDING
  • Admins approve payments in the panel (PATCH /api/payments/:idCOMPLETED) which triggers confirmation email

Guest carts auto-create a JWT guest user; checkout can convert guests to full accounts with a generated password.

Admin panel

Admins (role: ADMIN) access /admin with dashboard widgets (orders, users, GA4 realtime via local API routes).

  • Products — CRUD, variants, attributes, brands, categories, media reorder (@dnd-kit)
  • Orders & payments — status updates, payment proof review
  • Content — TipTap blog editor, service pages, visuals, testimonials, wide banners, featured work
  • SEO — catalog tooling; database — Neon backup/restore from admin
  • Users — customer management and order history

Backend API

The backend exposes /api/auth (signup, login, OTP, password reset, email verify) and a monolithic /api router for catalog, cart, orders, payments, CMS, and admin DB ops.

  • 30+ Prisma models — products, variants, warehouses/stock, cart, orders, payments, blog, visuals
  • Search — Elasticsearch indexes products on write; multi_match with fuzziness on name/description/slug
  • Email — Nodemailer/Gmail templates for OTP, order confirmation, shipped/delivered, payment status
  • Security — Helmet, CORS whitelist, rate limiting (skipped for admin), bcrypt passwords, XSS/mongo sanitization