Artistry by Mridhula
Premium Bridal Makeup Website, SEO Platform & Content Management System
A talented artist, discovered only through Instagram.
Before this build, Artistry by Mridhula had no website at all — just an Instagram page to showcase her work, and no structured way to capture leads beyond a phone number or a DM.
With nothing to be found on Google, every enquiry depended on someone already knowing to look her up on Instagram. There was no SEO presence, no blog, and no way to rank against other bridal makeup artists in Chennai.
The brief was to build a real website from the ground up: a premium public-facing site that could actually rank in search, plus a private admin console that let the owner publish content and manage leads herself, without touching code.
Instagram-only presence
No standalone website — just a social media page
No SEO
No metadata, structured data or sitemap strategy
No blog
No organic-traffic content engine
No CMS
Nothing to manage content through
No dedicated gallery
Portfolio work lived only in Instagram posts
No product management
No way to list recommended products
No booking management
Leads arrived with no structured follow-up
Phone/DM-only contact
No structured enquiry or booking form
Ten goals, one build.
Every module in this platform traces back to one of these.
Beautiful Premium Website
A public site that reflects the quality of the artistry itself.
Generate Organic Traffic
An SEO-first build designed to win search, not just look good.
Easy Content Updates
The owner publishes changes herself — no developer, no redeploy.
Showcase Portfolio
A categorised gallery that grows with every new shoot.
Accept Bookings
A structured booking flow that captures real lead detail.
Improve Google Rankings
Structured data and technical SEO built in from day one.
Improve Conversion
Clear paths from browsing to booking on every page.
Admin Dashboard
One console to manage every piece of public content.
Fast Performance
Server-first rendering with no client-side fetch waterfalls.
SEO-First Architecture
Metadata, structured data and rendering strategy designed together, not bolted on.
One platform, nine pillars.
A public site built to convert, and a private console built to run it — without a developer.
Website
A premium, responsive public site across Home, About, Services, Gallery, Blog, Products, Contact and Book.
CMS
A private admin console covering blogs, gallery, products, bookings, messages and settings.
SEO
21 SEO mechanisms across metadata, structured data, semantics and rendering strategy.
Booking System
A structured booking form with event type, date and venue, backed by an instant Telegram alert.
Blog
A custom block-based content renderer — headings, lists, tables, callouts, FAQ blocks — with no MDX dependency.
Gallery
Drag-and-drop upload, a 12-category taxonomy, and automatic homepage sync of the latest work.
Affiliate Products
A simple, filterable recommendations page for makeup products the owner actually uses.
Performance
Server Components, targeted ISR and a sharp-powered image pipeline for a fast, light site.
Responsive UI
Every section — hero to footer — designed mobile-first.
Every public page, screen by screen.
The live site — title, description and business value for every screen.
Homepage Hero
A clear positioning statement — "Professional Bridal Makeup Artist in Chennai" — paired with a real portrait, immediate CTAs and a Google rating badge.
Tells a visitor exactly who this is and what to do next within the first second on the page.
Services Preview
Six service cards — Bridal, Reception, Engagement, Hairstyling, Saree Draping, Photoshoot Makeup — each with a one-line description.
Lets a visitor self-identify their occasion in seconds, with a direct link to the full Services page.
Recent Looks
A homepage portfolio strip pulling in real client photos — the six most recent gallery uploads, synced automatically.
Fresh proof of work on the homepage with zero manual maintenance once a photo is uploaded in admin.
Testimonials
Three five-star client quotes with names and occasions, presented as clean editorial cards.
Social proof placed directly in the homepage scroll, right where a visitor is deciding whether to enquire.
FAQ
A ten-question accordion covering booking lead time, trials, brands used, timing, travel, and cancellation policy.
Answers the objections that would otherwise become repetitive phone calls, and doubles as FAQ-schema content for search.
Instagram + CTA
A six-photo Instagram preview grid linking to @artistry_by_mridhula, followed by a "Let's Create Your Dream Look" call-to-action.
Cross-promotes the Instagram following while giving a second, lower-pressure conversion moment before the footer.
Closing CTA + Footer
A final "Book on WhatsApp" / "Send Enquiry" pairing, followed by a footer with site navigation and direct contact details.
Two distinct conversion paths — instant WhatsApp or a tracked enquiry form — so no visitor is forced into a channel they don't want.
About
Viji's personal story — how she started at sixteen, her philosophy, and stat tiles (5+ years, 150+ brides, 100+ weddings, 30+ editorial shoots).
Turns an anonymous service into a trusted relationship before a bride ever gets on a call.
Philosophy
A quote-led section on staying power through a 12-hour wedding day, and makeup that enhances rather than transforms.
Differentiates on craft philosophy, not just service listings — the kind of detail that builds trust with a discerning bride.
Why Choose Me
Four differentiators — certified training, premium products (MAC, PAC, Estée Lauder, NARS), a personal approach, and on-location service.
Directly answers "why her, not someone else" right before the page's own booking CTA.
Services (Detail)
Full service cards for Bridal and Reception Makeup, each with what's included and a numbered process — consultation through touch-ups.
Sets clear expectations up front, reducing back-and-forth before a booking is confirmed.
Gallery
A filterable portfolio — Wedding, Engagement, Reception, Party, Hairstyle, Saree Draping, Photoshoot and more — with live counts per category.
Lets a bride browse specifically for her own occasion type instead of scrolling everything.
Blog
A blog index — "Beauty Tips & Guides" — with cover images, publish dates and excerpts for posts like bridal skincare timelines and makeup mistakes to avoid.
The primary organic-traffic engine — long-form, search-intent content that simply didn't exist before this site.
Products
A curated "Viji's Recommendations" page — real products she uses and trusts, each with a description and a Shop Now affiliate link.
A monetisable page maintained in minutes, with no inventory or payment system to run.
Contact
Phone/WhatsApp, email and location, a WhatsApp shortcut, an Instagram link, a peak-season booking note, and a structured enquiry form.
Every contact channel a bride could want on one page, with a nudge to book early during peak wedding season.
Book Your Look
A dedicated booking form — name, phone/WhatsApp, event date, event type, venue and notes — with a 24-hour confirmation promise.
Captures the exact detail needed to quote and confirm a booking in one submission, instead of a back-and-forth over WhatsApp.
The console behind the content.
Every admin page — purpose, features and business value.
Dashboard
The landing screen after login — a live status view of the whole business.
- Live counts across blogs, gallery, products and bookings
- 8 enquiries tracked at a glance
- Quick-create shortcuts for new posts, images and products
The owner sees the state of her whole content operation in one glance, with zero clicks to start the next task.
Blog Editor
Publishing long-form content without a heavyweight CMS or MDX dependency.
- Write / Preview / Split view modes
- Custom toolbar — headings, lists, quotes, tables, tips, notes, FAQ blocks
- Auto-slugify, excerpt, publish date and cover image upload
- Live word count and reading-time estimate
Publishes SEO-ready long-form content — the primary organic-traffic lever — without hiring a developer per post.
Gallery
Publishing new portfolio work anywhere beyond an Instagram post.
- Drag-and-drop upload with title/alt text and category
- 12-category taxonomy
- 106 images already managed live
- Delete removes the image and its generated variants
New work goes from phone camera to live portfolio — and the homepage — in under a minute, with zero image-editing skill required.
Products
Curating an affiliate storefront without a full e-commerce stack.
- Product name, category, description
- Affiliate URL field, validated as a real link
- Optional product image upload
A monetisable recommendations page maintained in minutes, with no inventory or payment system to run.
Bookings
Triaging structured leads from the booking form without a separate CRM.
- Search by name or phone, filter by status
- Event type, date and venue shown per booking
- 4-stage status workflow — Pending, Confirmed, Completed, Cancelled
Every booking lead is tracked from first contact to confirmed job in one place, backed by an instant Telegram alert on arrival.
Messages
A simple inbox for general enquiries that aren't full booking requests.
- Search by name, email or phone
- Service and event date shown per enquiry
- One-click delete
General questions get triaged separately from firm bookings, so nothing falls through the cracks.
Settings
Business details that change occasionally shouldn't require a code change.
- Business name, owner name, phone, WhatsApp
- Email and address
- Instagram, Facebook and YouTube URLs
One place to update contact details site-wide instead of hunting through component files — it feeds the footer, floating actions and structured data everywhere at once.
Twenty-one SEO mechanisms, built in.
Metadata, structured data, semantics and rendering strategy — all native to the Next.js App Router, no third-party SEO plugin.
Discovery & Metadata
Metadata API + metadataBase
One absolute base URL for every relative OG/canonical link, set once in the root layout.
Correct absolute URLs in every share preview — no domain hard-coded across pages.
Dynamic Metadata Generation
generateMetadata() derives each blog post's title, excerpt and OG image from live content.
Every new post is search- and share-ready the moment it's published — zero manual SEO entry.
Open Graph Tags
Per-page openGraph blocks — title, description, url, images — with type: "article" on blog posts.
Booking links shared on WhatsApp render as branded cards, not bare URLs.
Twitter Card Tags
summary_large_image cards on the root layout and every blog post.
Consistent branded preview across platforms, not just Open Graph consumers.
Canonical URLs
alternates.canonical declared on every static and dynamic page.
Search engines consolidate ranking signal onto one URL per page.
Dynamic robots.txt
MetadataRoute.Robots disallows /admin/, /login and /api/, and links the sitemap.
Admin UI and API responses never leak into Google results.
Blog-Aware Sitemap
MetadataRoute.Sitemap combines 8 static routes with every published blog slug, live from Supabase — revalidated hourly.
New blog posts get discovered by crawlers within the hour, with no manual sitemap edits.
Search Console Verification
A verification meta tag proves domain ownership to Google.
Enables indexing reports, coverage errors and performance data in Search Console.
Structured Data — 7 JSON-LD Schemas
LocalBusiness + BeautySalon
One @graph node in the root layout — name, phone, email, address, geo-coordinates, hours, price range, social profiles.
Eligible for Google's local business panel and Maps-linked rich results.
BreadcrumbList
A reusable component rendered on every page — Home / Section / (Post title on blog).
Breadcrumb trail renders directly under the result snippet, improving click-through.
Service (×9, @graph)
One Service node per offering — Bridal, Reception, Engagement, Party, Groom, Bridesmaid, Hairstyling, Saree Draping, Photoshoot.
Improves relevance for service-intent queries like "bridal makeup Chennai".
BlogPosting / Article
Headline, image, datePublished/dateModified, word count, Person author, Organization publisher.
Eligible for "Top stories"-style placements and author attribution in search.
FAQPage (×2 instances)
A static 10-question set on the homepage, plus a second instance on every blog post with inline-authored FAQs.
Can occupy multiple expandable answer slots directly in the SERP, increasing result real estate.
CollectionPage
A name + description node marking the products page as a curated listing.
Signals a browsable collection rather than a single product to crawlers.
ReserveAction
A schema.org ReserveAction/EntryPoint targeting /book for desktop and mobile web.
Positions the site for booking-intent rich results as support broadens.
Content, Semantics & Rendering
Image SEO / Alt Text
Every content image carries descriptive, keyword-relevant alt text — gallery items reuse the title field.
A secondary discovery channel through Google Images for portfolio work.
Semantic HTML & Heading Hierarchy
One <h1> per page via a shared PageHero, <article> around blog posts, <nav aria-label> for pagination, skip-to-content link.
A clean outline for crawlers and screen readers alike — accessibility and SEO share the same fix.
Clean URL Structure
Flat static segments (/services, /gallery, /blog/[slug]); slugs are validated, not generated from IDs.
URLs like /blog/bridal-makeup-tips-chennai instead of /blog/48fa2...
Static Generation + ISR
generateStaticParams() pre-renders every blog slug at build; each route sets its own revalidate window (1800–3600s).
Pages serve from cache but self-refresh within the hour as content changes — no redeploy needed.
Font Optimization
next/font/google self-hosts Cormorant Garamond + Karla at build time with display: swap.
No third-party request to Google Fonts at runtime — better Core Web Vitals (LCP/CLS).
Image Optimization Pipeline
next/image with a scoped Supabase allowlist, layered on sharp-generated WebP + JPEG + thumbnail variants.
Faster gallery and blog loads without any manual image resizing by the site owner.
Social Sharing
One-click share to WhatsApp, Facebook, Pinterest and X, plus copy-link, on every blog post.
Turns readers into a secondary distribution channel for content marketing.
From a visitor's click to a live update.
The real data flow, verified against the Server Action and Route Handler code.
Visitor
A prospective bride browses the site and fills the booking or enquiry form.
Booking Form
The form is validated and rate-limited (2/hr by phone) before it's accepted.
Supabase
The submission is inserted into Postgres, protected by Row Level Security.
Telegram Notification
The Telegram Bot API pushes an instant, formatted alert to the owner's phone.
Admin Dashboard
The lead appears in Bookings or Messages, ready to search, filter and action.
Owner
The owner reviews the lead and progresses its status — Pending → Confirmed.
Website Updated
Any related content change goes live instantly via revalidatePath() — no rebuild, no redeploy.
How the pieces fit together.
Server Components, Server Actions and Supabase — one deployable, no separate backend service.
Frontend
Next.js 16 App Router — Server Components, Server Actions and Route Handlers in one deployable, no separate backend service.
Backend
Route Handlers and Server Actions run as Vercel serverless functions — no standalone backend framework.
Authentication
Supabase Auth (email + password) via /login, with HttpOnly SSR-managed session cookies.
Database
PostgreSQL via Supabase — 7 flat tables, no ORM, no foreign keys, schema managed via hand-written SQL.
Storage
Two public Supabase Storage buckets — gallery and blog-images — server-side uploads only.
Deployment
Vercel Git integration — build on push, no separate CI workflow or admin subdomain.
Notifications
Telegram Bot API pushes instant alerts on every booking and enquiry — no email or SMS provider.
Caching
Next.js Data Cache with targeted revalidatePath() on every admin write; React cache() memoises settings per request.
Performance
Server-first rendering with no client-side fetch waterfalls on public pages; route-level code splitting is automatic.
Security
Two-layer auth guard (route proxy + per-action requireAdmin()), on top of Postgres Row Level Security.
Image Processing
sharp resizes, recompresses and reformats every upload into JPEG + WebP, full-size + thumbnail, at upload time.
API Architecture
REST-ish Route Handlers for public forms and uploads; authenticated admin mutations use Server Actions instead of a shared API layer.
Server Actions
6 Server Action files power all admin CRUD — each opens with requireAdmin() and ends with revalidatePath().
Route Handlers
9 API route handlers cover public forms, admin uploads, auth and a Telegram diagnostic endpoint.
Admin Authentication
A single privileged owner account — no tiers or granular permissions — re-verified on every privileged request.
Row Level Security
Enabled on all 7 tables — public read-only or insert-only policies, with a service-role bypass reserved for the trusted server client.
A modern, typed, server-first stack.
Next.js 16 on the frontend, Supabase for Postgres, Auth and Storage — deployed on Vercel.
Next.js
v16.2.7App Router — Server Components, Server Actions, file-based routing, route handlers.
React / React DOM
v19.2.4Core UI library, function components with hooks throughout.
TypeScript
^5Static typing across app, lib and components.
Tailwind CSS
^4Utility-first styling via @tailwindcss/postcss with a custom OKLCH design-token theme.
lucide-react
v1.17.0The icon set used across admin and public UI.
next/font (Google)
Self-hostedCormorant Garamond (serif display) + Karla (sans body), no runtime font requests.
Supabase JS SDK
^2.107.0Database, Auth and Storage client SDK — Postgres, Auth and Storage as one backend-as-a-service.
@supabase/ssr
^0.10.3Cookie-based Supabase session client for App Router server/browser contexts.
sharp
v0.35.1Server-side image pipeline — resize, recompress, JPEG/WebP conversion at upload time.
PostgreSQL
via Supabase7 tables, no ORM or migration tool — hand-written SQL applied directly.
Telegram Bot API
lib/telegram.tsInstant booking and enquiry alerts — no email or SMS provider integrated.
Vercel
HostingServerless function hosting, build pipeline and next/image optimisation.
Everything the platform ships with.
No roadmap items — every card below is live.
Custom CMS
A self-serve admin console spanning blogs, gallery, products, bookings and enquiries.
Booking System
A structured request form with a 4-stage status workflow and instant Telegram alerts.
Blog Engine
A hand-built content renderer with headings, tables, callouts and inline FAQ blocks — no MDX.
SEO Engineering
21 mechanisms across metadata, 7 JSON-LD schemas, and rendering strategy.
Gallery Management
Drag-and-drop upload, 12-category taxonomy, automatic homepage sync.
Product Management
Affiliate product CRUD with URL validation and a filterable public grid.
Telegram Alerts
Sub-minute lead awareness on every booking and enquiry, with no vendor cost.
Analytics, Opt-In
Google Analytics 4 and Meta Pixel components render only when their env vars are set.
Image Optimization
Dual-format, dual-resolution pipeline — JPEG + WebP, full-size + thumbnail.
Responsive Design
Every page, admin included, built mobile-first with a slide-in admin sidebar.
Performance
Server Components, targeted ISR, and zero client-side fetch waterfalls.
Admin Dashboard
Live counts across 5 content types with one-click quick-create shortcuts.
Before and after.
Real operational shifts — not invented percentages.
No website — Instagram was the only public presence
A premium, SEO-ready website with a self-serve CMS the owner publishes through herself
No SEO strategy at all
21 SEO mechanisms and 7 JSON-LD schemas built into the architecture
No blog, no organic content engine
A working blog CMS actively publishing SEO-driven content
No structured way to capture or track leads
Two lead-capture flows, both logged to Postgres and alerted via Telegram
Portfolio updates required editing files by hand
Drag-and-drop gallery upload with automatic homepage sync
No way to list recommended products
A live, filterable affiliate product page
Every content change meant a redeploy
Every admin save goes live instantly via targeted cache revalidation
Nine steps, from discovery to optimization.
Discovery
Mapping the business's real workflow — services, leads, content habits — before any design work started.
Planning
Scoping the CMS modules and SEO requirements against the site's actual content needs.
Design
A Cherry Blossom design system — an OKLCH token set driving the entire Tailwind theme.
Architecture
Server Components, Server Actions and Supabase laid out as one deployable, no separate backend.
Development
Public site and admin console built module by module — blog, gallery, products, bookings, messages, settings.
SEO
Metadata, 7 structured-data schemas, sitemap and semantic HTML implemented alongside the pages themselves, not after.
Testing
Validation, rate limiting and upload hardening checked against real form submissions.
Deployment
Shipped to Vercel via Git integration — the admin console and public site as one build.
Optimization
Caching windows tuned per route, images passed through the sharp pipeline, fonts self-hosted.
The build, in numbers.
What makes this build distinct.
Built Entirely on Next.js 16 App Router
Server Components, Server Actions and Route Handlers as one deployable — no separate backend service.
No Third-Party CMS
A hand-built admin console and content renderer, purpose-fit to this business instead of a generic platform.
Custom Admin Dashboard
Live counts, quick-create shortcuts, and full CRUD across every content type.
Server Actions Throughout
Admin mutations run as Server Actions — requireAdmin() in, revalidatePath() out, on every write.
Supabase Storage Pipeline
Two storage buckets feeding a sharp-powered dual-format image pipeline.
SEO-First Architecture
Metadata and structured data designed alongside the pages, not retrofitted.
Performance Optimized
ISR tuned per route, self-hosted fonts, and next/image throughout.
Image Processing Pipeline
Every upload becomes JPEG + WebP, full-size + thumbnail, automatically.
Modern, Responsive UI
A cohesive Cherry Blossom design system across 24 pages, public and admin alike.
What this build reinforced.
Server Components as the default
Leaning on Server Components for data-heavy pages removed an entire class of client-side loading states and fetch waterfalls.
SEO is architecture, not an afterthought
Structured data and metadata are easiest to get right when they're designed alongside the routes themselves, not bolted on at the end.
A custom CMS can be the right call
For a single-owner business with well-defined content types, a purpose-built admin console was simpler to build and use than adapting a generic CMS.
Performance is a pipeline, not a setting
Real speed came from the image pipeline and caching strategy working together, not any single optimisation.
Image optimization pays for itself immediately
Generating WebP and thumbnail variants at upload time meant the browser never had to fetch a raw camera file, on any page.
Design for the actual owner, not a persona
Every admin decision was tested against one real, non-technical user — which kept the CMS honest and simple.
A clear content workflow beats more features
The most valuable part of the build wasn't any single feature — it was the straight line from a visitor's booking to a Telegram alert to a status update, with nothing to lose in between.
Interested in building something similar?
Artistry by Mridhula now runs on a platform built specifically for how the business actually works — publish content in minutes, track every lead automatically, and let the site itself do the work of ranking in search.