BHMX
Photography Portfolio & CMS
A high-performance, full-stack photography portfolio application built with Next.js and MySQL. This platform combines a stunning, fluid user experience with a powerful administrative backend for seamless gallery and content management.
Hero Section
Lightbox
Images parallax
About me Page
Portfolio Banner
About me Section
Portfolio page
Services Page
About Section
login Page
Project Overview
BHMX Photography Portfolio is a full-stack web application designed for professional photographers to showcase their work and manage client interactions. Built with Next.js, it provides a visually rich, performant public-facing portfolio and a secure administrative dashboard for content management. The platform enables visitors to explore photography collections organized by categories, learn about services offered, and submit contact inquiries—while administrators maintain full control over photos, categories, projects, and incoming messages. Target users include public visitors (potential clients browsing portfolios and making contact) and administrators (photographers managing content and client inquiries).
Tech Stack
Frontend
Backend & Database
Key Features
System Flow
Public Page Request (SSG/ISR): User navigates → Next.js serves pre-rendered HTML from build cache → Page includes getStaticProps() with revalidation timer (10-60 seconds) → Client hydrates React components → Background regeneration if interval passed → API requests to /api/* endpoints fetch latest data from MySQL → Page re-renders with fresh data → Response served with optimized images (AVIF/WebP)
Contact Form Submission: User fills form → Client-side validation (required fields, email format, phone format) → Form data sanitized → POST to /api/contact/add → Server validates inputs (email regex, phone regex) → Message sanitized with sanitize-html → Data inserted into contact_submissions table → Success animation displayed
Admin Authentication: User visits /login → Enters credentials → POST to /api/auth/login → Server queries users table → Password compared using bcrypt → JWT token generated (1-hour expiration, HS256) → Token set as HTTP-only, secure, SameSite=Strict cookie → Redirect to /admin dashboard → All admin pages verify token using verifyAuth() middleware
Photo Upload: Admin opens Add Picture modal → Fills form with title, category, optional project, description → Selects image file (client-side preview) → Validates file type and size (10MB max) → Submits multipart/form-data to /api/photos/add → verifyAuth() checks JWT → Formidable parses upload → File type validated → Category name sanitized → Directory created: /public/images/[category-name]/ → File renamed with timestamp → Dimensions extracted using image-size → Photo metadata inserted into photos table → Admin UI refreshes
Dynamic Category Page Generation: Build time: getStaticPaths() queries all categories → Each category slug generates static page → User visits category page → Next.js serves pre-rendered HTML → Page queries photos by category_id → Photos rendered in masonry grid → User clicks photo → Lightbox opens with zoom → ISR: Page regenerates every 60 seconds if traffic occurs
Benefits
SEO Excellence
Server-side rendering, dynamic meta tags, sitemap, robots.txt, and JSON-LD structured data ensure maximum search visibility and discoverability.
Performance
SSG + ISR delivers near-instant page loads (AVIF/WebP optimization) while keeping content fresh. Connection pooling and caching prevent database overload.
Scalability
Serverless architecture scales automatically with traffic. Efficient database schema and indexed queries support growing portfolios without performance degradation.
Security
JWT authentication, HTTP-only cookies, bcrypt hashing, input sanitization, and parameterized queries provide enterprise-grade security.
Professional Presentation
High-quality animations, smooth scrolling (Lenis), lightbox viewing with zoom, and masonry grids showcase photography work effectively.
User Engagement
Modern design patterns, micro-interactions, page transitions, and responsive layouts keep visitors engaged across all devices.
Content Control
Comprehensive admin dashboard enables photographers to update portfolio, manage categories, moderate testimonials, and handle client inquiries without developer intervention.
Lead Generation
Contact form with client and server-side validation captures inquiries directly. Centralized inbox with read/unread status streamlines client communication.
Developer Experience
Next.js file-based routing, hot reload, built-in API routes, and modular component structure accelerate development and simplify maintenance.
Cost Efficiency
Serverless architecture reduces hosting costs. Static generation minimizes server load. Connection pooling optimizes resource usage.
Mobile Reach
Fully responsive design with mobile-first approach ensures portfolio accessible and beautiful on all devices from phones to desktops.
Error Resilience
Exponential backoff retry logic, comprehensive error handling, timeout management, and graceful degradation ensure reliability.