Beili Photographer Portfolio
Beili Photographer Portfolio is a full-stack Next.js 14 web application built by Weby Creators Team for a professional photographer specializing in children's photography (bat mitzvah, studio, family portraits, and age-specific sessions). The site showcases Beili's work across 5 photography categories with Cloudinary integration for dynamic image loading and optimization. It features a responsive landing page with a carousel, client testimonials section, and category-based galleries. Behind the scenes, the application includes a secure admin dashboard with MongoDB integration for managing galleries, client recommendations, and user accounts.
Project journey
Project Initialization & Setup
Project creation and initial setup using Next.js Create Next App, establishing TypeScript configuration, Tailwind CSS integration, and project structure. Repository initialized with basic README and development environment configuration.
Home Page & Components Development
Development of landing page components including navigation, hero section, about me section, and categories system. Implemented responsive design with Hebrew language support. Built category-based gallery structure with 5 photography categories (Bat Mitzva, Studio, Age 3, Families, Babies).
Dashboard & Authentication Implementation
Built admin dashboard with authentication system using Next-Auth. Implemented dashboard layout with navigation, user management pages, gallery management interface, and recommendations management system. Added password hashing with bcrypt and secure session handling.
Database Connection & Recommendations Feature
Established MongoDB connection using Mongoose with caching strategy. Implemented full recommendations/testimonials feature allowing clients to add and view recommendations. Added server actions for data mutation and revalidation strategies for cache optimization.
Cloudinary Integration & Image Optimization
Integrated Cloudinary for dynamic image management and optimization. Implemented CldImage component with lazy loading, responsive image sizing, and tag-based gallery fetching. Added carousel photos functionality with automatic image optimization.
Performance Optimization & UI Refinement
Implemented performance improvements including lazy loading strategies, image eager/lazy logic, sticky header navigation, WhatsApp floating button. Added metadata and SEO optimization. Cleaned up styling and finalized dashboard UI.