Custom Next.js Website Development for Mehandi Studio

Building a Complete Digital Experience for Mehandi Studio

Mehandi Studio provides professional mehndi artistry services in Delhi, catering to customers looking for bridal, Arabic, and other mehndi designs. For an art-driven business, presenting previous work, communicating available services, and building customer confidence through a strong online presence are essential. The client approached us to create a completely new website that would bring these requirements together in a polished and engaging digital experience.

We started by designing the website's entire UI/UX from scratch, developing a visual direction that complements the artistic nature of the business while keeping the experience intuitive and accessible. The website was developed using Next.js and Tailwind CSS, with responsive layouts, dedicated service pages, location-specific pages, contact forms, and appointment and WhatsApp integrations to help visitors explore services and connect with the studio.

A major part of the development was creating an immersive portfolio and gallery experience. We implemented category-based image browsing, professional image previews, zoom controls, fullscreen viewing, autoplay slideshows, and next/previous navigation. The gallery also incorporates optimized image delivery and loading techniques to provide a smoother browsing experience across devices.

For video content, we developed a custom iframe-based viewing experience using YouTube-hosted videos. Instead of immediately loading the standard YouTube player, the implementation fetches the video's thumbnail and uses it as the initial preview before loading the video experience. This provides a more cohesive presentation while helping avoid unnecessary player loading during the initial page experience.

Beyond the public website, we developed a separate custom administration application with its own UI/UX, hosted on a dedicated subdomain. The system allows the client to manage gallery images and categories, videos and thumbnails, services, location-specific content, testimonials, contact enquiries, and appointment requests without requiring direct developer involvement for routine content updates.

The backend architecture uses PostgreSQL hosted on Supabase, with Prisma ORM handling database queries and CRUD operations. We also implemented a custom proxy API layer to protect API credentials and sensitive endpoints, securely handle third-party API requests, and manage server-side communication between the frontend and backend. This architecture keeps sensitive operations away from direct client-side exposure while providing a structured foundation for application functionality.

To make the experience more engaging, we incorporated multiple animation techniques throughout the website, including scroll-triggered animations, carousel transitions, image-rendering effects, typing text effects, continuous loop animations, and animated form interactions. These effects were integrated into the interface to complement the content and create a more dynamic browsing experience without compromising responsive usability.

Search visibility and technical performance were also important parts of the project. We implemented technical and local SEO foundations across the website, including dynamic metadata, canonical URLs, structured data, XML sitemap, robots.txt, Open Graph metadata, internal linking, and location-focused content architecture. Performance improvements included image optimization, lazy loading, code splitting, caching, and other loading optimizations to support a fast and responsive experience.

• Custom Next.js website and responsive UI/UX designed and developed from scratch.

• Separate administration application with independent content management capabilities.

• Custom portfolio gallery with category filtering, image previews, zoom, fullscreen, autoplay, and navigation controls.

• YouTube thumbnail-based video previews with a custom iframe viewing experience.

• PostgreSQL database hosted on Supabase with Prisma ORM for database queries and CRUD operations.

• Secure proxy API architecture for protecting credentials, sensitive endpoints, and third-party API communication.

• Custom service pages, location pages, contact forms, appointment functionality, and WhatsApp integrations.

• GSAP-powered scroll, carousel, image, text, loop, and form animations.

• Technical SEO, local SEO, structured data, metadata, canonical URLs, sitemap, robots.txt, and internal linking.

• Performance optimization through image optimization, lazy loading, code splitting, caching, and responsive development.