Sekhar Albums — Custom Photo Album & E-Commerce Platform

Overview

Sekhar Albums is a production-ready, high-performance full-stack e-commerce web application designed for professional photography studios and clients to design, customize, and order high-resolution physical photo albums online.

Built using Next.js 16 (App Router) and React 19, the platform bridges the gap between traditional manual studio printing and digital customer self-service. Clients can upload high-resolution media, customize photo page layouts via an intuitive drag-and-drop interface, complete secure payments via Razorpay, and track order fulfillment in real-time.

---

💡 The Challenge

Traditional photo album creation is hindered by manual proofing workflows, heavy email attachments, inefficient phone updates, and payment friction:

1. Large Media Overhead: Photographers work with multi-gigabyte RAW/JPEG files, leading to severe bandwidth bottlenecks on conventional forms.
2. Static & Rigid Customization: Clients lacked a visual way to sequence album pages or review cover prints prior to manufacturing.
3. Manual Payment Verification: Processing manual UPI or bank transfer proofs resulted in delayed order processing.
4. Admin Tracking Complexity: Studio admins needed a centralized dashboard to track print status alongside live revenue analytics.

---

🛠️ The Solution & Implementation Deep Dive

This project was built from the ground up to solve the challenges of high-res image uploads and seamless checkout. Here is a detailed breakdown of every core implementation.

1. High-Performance Media Pipeline (Cloudinary)

Handling high-resolution photography required an optimized pipeline so users wouldn't crash the browser or experience timeout errors.

Implementation Details:

• Client-Side Compression: Before any file is sent to the network, the ImageUploader component intercepts it. If an image exceeds Cloudinary's 9.5MB tier limit, it is drawn onto an HTML5 <canvas> and capped at 3840px (Ultra HD 4K) to maintain print resolution, outputting a high-quality (92%) JPEG.
• Secure Signed Uploads: The client makes a POST request to an internal Next.js Route Handler (/api/upload/sign) with the file size and type. The server signs the upload request securely using the Cloudinary Secret and returns a signature.
• Direct-to-Cloudinary: To bypass Next.js API payload limits and Vercel timeouts, the compressed image is POSTed directly from the browser to Cloudinary's secure API.
• Relocation: During checkout, images uploaded loosely are mapped and relocated to a specific customer_uploads/ORDER_NUMBER/ folder using Cloudinary's rename API for studio organization.

2. State Management & Offline Resilience (React Context + LocalStorage)

To ensure users do not lose their customized album in case of an accidental refresh, cart and state management was built using a robust custom context provider (SekharStoreProvider).

Implementation Details:

• Hybrid Syncing: State (Cart, Orders, Products, Categories) is maintained in React Context but simultaneously persisted to localStorage (e.g., sekhar_cart_v1).
• Hydration: On the initial mount, the store hydrates from local storage to provide immediate UI interactivity, and then asynchronously fetches live data from Supabase to reconcile any price changes or stock availability.
• Store Hook: The entire application interacts with state via a strongly typed useSekharStore() hook, exposing functions like addToCart, updateCartItemPersonalization, and createOrder.

3. Database & Authentication (Supabase)

Relational data and secure endpoints were powered by Supabase PostgreSQL.

Implementation Details:

• Centralized DB Service: A dedicated db-service.ts abstracts all Supabase queries.
• Schema Design:
  • products: Contains base product info.
  • product_variants: 1-to-many relation for sizing and pricing.
  • product_images: 1-to-many for gallery images.
  • orders & order_items: Handles checkout finalization.
  • order_status_history: Tracks the lifecycle (New -> Processing -> Shipped).
• Graceful Fallbacks: If the Supabase connection fails or is uninitialized, the data service gracefully falls back to a mock-data.ts catalog to ensure the UI never completely crashes.

4. Interactive Drag-and-Drop Album Builder (DnD Kit)

For customizing the page order of photo books, users needed a tactile, responsive UI.

Implementation Details:

• DnD Kit Architecture: Utilized @dnd-kit/core and @dnd-kit/sortable to create a fluid, physics-based drag-and-drop grid.
• Live Preview: Changes in the sortable grid instantly update the global cart context, mapping the visual order directly to the personalization payload attached to the order.
• Micro-Interactions: framer-motion was used extensively to add spring animations, modal reveals, and smooth height transitions when pages are swapped.

5. Secure Razorpay Checkout Flow

A seamless, localized checkout experience tailored for the Indian market.

Implementation Details:

• Order Creation Phase: When a user hits checkout, the cart data is validated, and an internal order is created via /api/razorpay/create-order mapping to Razorpay's Orders API.
• Client Integration: The Razorpay checkout script is loaded, invoking the payment modal directly on the site (preventing redirects).
• Cryptographic Verification: Upon successful payment, Razorpay sends back a razorpay_signature. A separate /api/razorpay/verify endpoint uses Node.js crypto to generate an HMAC SHA256 hash using the Razorpay Secret to verify the signature's authenticity. Only upon valid verification is the Supabase order status marked as 'Paid'.
• Confetti Celebration: Using canvas-confetti, a celebratory animation fires on the client side upon successful signature verification.

6. Admin Analytics & Order Management Dashboard

A private route built for the studio owners to manage fulfillment.

Implementation Details:

• Data Visualization: Integrated recharts to render daily sales metrics, revenue over time, and popular sizes.
• Order Lifecycle Controls: The admin panel directly interfaces with the updateOrderStatus function in the store, mutating the Supabase orders table and appending a record to order_status_history in real-time.

---

🏁 Conclusion

The Sekhar Albums e-commerce platform modernized the studio's entire sales workflow. By offloading image processing to the client and Cloudinary, eliminating manual payment checks via Razorpay, and offering an interactive Next.js interface, the application reduced order processing cycles from days to minutes.