html Adi Jamdani — Developer Prompts
7 Phases
28 Prompts
~24 Days

⚡ How to Use These Prompts

প্রতিটি prompt Claude Code / Cursor / ChatGPT-তে paste করো। একটা শেষ হলে পরেরটা। Sequential order মেনে চলো।

01

Copy the prompt using the copy button

02

Paste into Claude Code or Cursor AI

03

Review generated code, test it

04

Move to next prompt in order

00

Before You Write a Single Line

Accounts খুলো, keys সংগ্রহ করো, env file তৈরি করো

One-time Setup No Code
⚠️ এই phase skip করলে পরে সমস্যা হবে। সব API key আগে নাও, তারপর code শুরু করো।
P-00-A
Accounts & API Keys Checklistsupabase.com · sslcommerz.com · resend.com · cloudinary.com
I am building a Jamdani saree e-commerce website called "Adi Jamdani by Shohana" in Bangladesh. Before I start coding, I need to set up all required external services. Walk me through creating accounts and getting API keys for these services one by one: 1. Supabase — PostgreSQL database, auth, and file storage - Create a new project named "adi-jamdani" - What keys do I need? Where do I find them? 2. SSLCommerz — Bangladesh payment gateway (bKash, Nagad, Visa) - How to open a sandbox/test merchant account? - What is the sandbox Store ID and Password for testing? 3. Resend — Transactional email service - Free plan setup - How to verify a custom domain email? 4. Cloudinary — Image hosting and CDN - Free plan setup - What are the 3 keys I need? For each service, tell me: - Exact URL to sign up - Exactly which keys/credentials to copy - Where those keys go in my .env.local file Format the final output as a ready-to-copy .env.local file with placeholder values.
P-00-B
Create Supabase Database TablesSQL to run in Supabase SQL Editor
Write the complete Supabase SQL to create all database tables for my Jamdani saree website. I need these tables with all columns, types, constraints, and Row Level Security (RLS) policies: 1. products table: - id (uuid, primary key) - slug (text, unique) — for SEO URLs like /products/dhakai-jamdani - name_en, name_bn (text) — bilingual names - desc_en, desc_bn (text) — bilingual descriptions - price (integer, BDT) - price_original (integer, nullable) — for showing discounts - category (text) — traditional | contemporary | bridal | festival - fabric (text) - colors (text array) - images (text array) — Cloudinary URLs - stock_status (text) — in_stock | made_to_order | out_of_stock - delivery_days (integer, default 5) - is_featured (boolean, default false) - is_active (boolean, default true) - created_at (timestamptz) 2. orders table: - id (uuid, primary key) - order_number (text, unique) — format: ADJ-2025-001 - customer_name, customer_phone, customer_email, address, district - product_id (uuid, foreign key → products) - product_name (text snapshot) - color_choice, custom_notes - quantity (integer, default 1) - amount, advance_paid (integer BDT) - payment_method (text) — bkash | nagad | card | cod - payment_status (text) — pending | partial | paid - order_status (text) — pending | confirmed | weaving | ready | shipped | delivered | cancelled - ssl_tran_id (text) - created_at, updated_at (timestamptz) 3. reviews table: - id, product_id (nullable FK), reviewer, location - rating (integer 1–5, with CHECK constraint) - review_text (text) - is_approved (boolean, default false) — admin must approve - created_at Also write: - RLS policies: public can SELECT active products and approved reviews. Only service_role can INSERT/UPDATE/DELETE. - A function to auto-generate order_number like ADJ-2025-001 - Indexes on frequently queried columns (slug, category, order_status, is_active)
01

Project Setup & Design System

Next.js install → folder structure → colors → fonts → shared components

Next.js 14 Tailwind TypeScript
P-01-A
Project Bootstrap & All Dependenciespackage.json + folder structure + tailwind config
Scaffold a complete Next.js 14 (App Router) project for a Jamdani saree e-commerce website called "Adi Jamdani by Shohana". Project name: adi-jamdani Language: TypeScript Styling: Tailwind CSS 1. Show the exact terminal commands to: - Create the Next.js project - Install ALL required packages in one npm install command: @supabase/supabase-js @supabase/ssr sslcommerz-lts resend cloudinary next-intl framer-motion react-hook-form @hookform/resolvers zod zustand embla-carousel-react @radix-ui/react-dialog @radix-ui/react-select react-hot-toast sharp 2. Create this exact folder structure with empty placeholder files: src/ ├── app/[locale]/(site)/ ← public pages ├── app/[locale]/admin/ ← admin panel ├── app/api/ ← API routes ├── components/layout/ ← Navbar, Footer, FloatingButtons ├── components/home/ ← HeroSection, etc. ├── components/products/ ← ProductCard, ProductGrid, etc. ├── components/order/ ← OrderForm, OrderSteps ├── components/reviews/ ← ReviewCard, ReviewForm ├── components/ui/ ← Button, Input, Modal, Badge, Spinner ├── lib/ ← supabase.ts, sslcommerz.ts, resend.ts, cloudinary.ts ├── types/ ← product.ts, order.ts, review.ts ├── messages/ ← en.json, bn.json └── styles/globals.css 3. Create tailwind.config.ts with this custom design system: Colors: burgundy: { DEFAULT: '#6B1426', light: '#8B2438' } gold: { DEFAULT: '#C9943A', light: '#E4B86A' } ivory: { DEFAULT: '#FDF6EC', dark: '#F0E6D3' } dark: '#1C0A14' Fonts: Playfair Display (serif), Hind Siliguri (sans), EB Garamond (italic) Add google fonts import in globals.css 4. Create all TypeScript types in src/types/: - Product type with all fields from the database - Order type with all fields - Review type with all fields - ApiResponse generic type 5. Create src/lib/supabase.ts with: - createBrowserClient (for client components) - createServerClient (for server components and API routes) Using @supabase/ssr package
P-01-B
Navbar + Footer + FloatingButtonslayout components — responsive, bilingual
Build the Navbar, Footer, and FloatingButtons components for "Adi Jamdani by Shohana" — a luxury Jamdani saree brand from Bangladesh. DESIGN DIRECTION: Dark luxury — deep burgundy/dark background with gold accents. Aesthetic: like a high-end heritage brand. NOT generic. NOT corporate. Navbar (src/components/layout/Navbar.tsx): - Fixed top, backdrop blur, semi-transparent dark background - Logo: "Adi Jamdani" in Playfair Display serif, gold color, with "by Shohana" subtitle - Links: Home, Collection (products), About, Reviews - Right side: Language toggle (বাংলা / EN) + "Order Now" CTA button in gold - Mobile: hamburger menu → full-screen slide-down overlay - Scroll behavior: add shadow/border after scrolling 50px - Use next/link for all navigation - Accept locale prop to generate correct localized hrefs Footer (src/components/layout/Footer.tsx): - Dark background (#0D0509) - 3-column grid: Brand info | Quick Links | Policies - Brand column: Logo, Jamdani heritage tagline (Bengali + English), social links (Facebook, Instagram) - Social icons: Facebook = f, Instagram = ig (text-based, no icon library needed) - Bottom bar: copyright text + social links - WhatsApp number from env: process.env.NEXT_PUBLIC_WHATSAPP_NUMBER - Facebook page from env: process.env.NEXT_PUBLIC_FACEBOOK_PAGE FloatingButtons (src/components/layout/FloatingButtons.tsx): - Fixed bottom-right corner - WhatsApp button: green (#25D366), pulse animation, links to wa.me/[number] - Messenger button: blue, appears on hover of WhatsApp button - Both use emoji icons: 💬 - WhatsApp message pre-filled: "আসসালামু আলাইকুম, আমি আদি জামদানি শাড়ি সম্পর্কে জানতে চাই।" Tech requirements: - All components use Tailwind CSS only - Server components where possible, 'use client' only when needed - TypeScript with proper prop types - Framer Motion for navbar mobile menu animation
02

Home Page + About Page

Hero, features, about teaser, reviews carousel, CTA — full brand storytelling

Framer Motion Luxury Design Bengali + English
P-02-A
Hero SectionFull-screen dark luxury hero with animations
Build a full-screen Hero section for "Adi Jamdani by Shohana" Jamdani saree website. File: src/components/home/HeroSection.tsx Visual Design: - Full viewport height (min-h-screen) - Background: very dark (#1C0A14) with radial gradient overlays in deep burgundy - Subtle geometric Jamdani-motif pattern overlay (SVG background-image, low opacity) - NO generic hero image placeholder — use pure CSS/gradient beauty Content (bilingual): - Top eyebrow text: "✦ Handwoven Heritage · ঢাকাই জামদানি ✦" — gold, uppercase, letter-spaced - Main title: "Adi Jamdani" in Playfair Display, ~5-6rem, ivory white - Italic subtitle: "by Shohana" in gold, italic Playfair Display - Bengali subtitle: "বুননে ঐতিহ্য, প্রতিটি সুতায় গল্প" — muted, Hind Siliguri - Body text: Short bilingual description of the brand (2 lines max) - Two CTA buttons: 1. "Explore Collection" (gold filled) 2. "Custom Order / অর্ডার করুন" (outline, white) - Scroll indicator at bottom (animated arrow + "Scroll" text) Animations (Framer Motion): - Staggered entrance: eyebrow → title → subtitle → description → buttons - Each element fades up with 0.2s delay between them - Subtle parallax on background gradient on scroll - Buttons: hover lift + glow effect Tech: 'use client', framer-motion, next/link, Tailwind CSS, TypeScript. Accept locale prop. Links go to /[locale]/products and /[locale]/order
P-02-B
Home Page — Remaining SectionsFeatures strip, About teaser, Featured products, Reviews carousel, CTA
Build the remaining sections of the Home Page for "Adi Jamdani by Shohana". File: src/app/[locale]/(site)/page.tsx (server component, fetches from Supabase) Build these 5 sections as separate components, then assemble in page.tsx: 1. FeaturesStrip (src/components/home/FeaturesStrip.tsx) - Burgundy background (#6B1426) - 4 features in a row: 🪡 100% Handwoven | 🌿 Natural Fabric | 🎨 Custom Design | 🚚 Home Delivery - Each: icon + English title + Bengali subtitle - Reveal animation on scroll (Intersection Observer or Framer Motion whileInView) 2. AboutSection (src/components/home/AboutSection.tsx) - Dark background, 2-column grid - Left: Image placeholder (styled with burgundy gradient, 3:4 ratio) + floating gold badge "Authentic Jamdani" - Right: Brand story text (Bengali + English paragraphs), 3 stat counters (500+ Customers, 100% Handwoven, 50+ Designs) - "Read Our Story →" link button 3. FeaturedProducts (src/components/home/FeaturedProducts.tsx) - Ivory background, "Our Collection" section title - Fetches is_featured=true products from Supabase (max 6) - Uses ProductCard component (build this reusable component too) - ProductCard: image (next/image), badge (New/Bestseller), name (bn+en), price, "Order" button + WhatsApp icon button - "View All Collection →" link at bottom 4. ReviewsCarousel (src/components/home/ReviewsCarousel.tsx) - Dark background, fetches 6 approved reviews from Supabase - Auto-scrolling carousel using Embla Carousel - Each review card: star rating, italic review text, reviewer name + location avatar - Pause on hover 5. CTASection (src/components/home/CTASection.tsx) - Deep burgundy gradient background with subtle circular pattern - "Talk to Us Directly" heading - Two buttons: WhatsApp (green) + Messenger (blue) - Contact info row: Location | Response Time | Delivery | Payment methods Data fetching: page.tsx is a server component. Fetch featured products and approved reviews directly from Supabase. Pass as props to client components that need interactivity.
P-02-C
About Page (Full)/about — brand story, weaver story, photo gallery, values
Build the complete About Page for "Adi Jamdani by Shohana". File: src/app/[locale]/(site)/about/page.tsx Page Sections: 1. Page Hero: - Smaller hero (60vh), dark background, page title "Our Story / আমাদের গল্প" - Decorative Jamdani pattern overlay 2. Brand Story Section: - 2-column: large image placeholder left, rich text right - 3 paragraphs of brand story (bilingual — Bengali paragraph, then English paragraph) - Pull quote styled differently: italic gold text "প্রতিটি শাড়ি একটি শিল্পকর্ম..." 3. Meet Shohana Section: - Founder intro — image placeholder + bio text - Warm, personal tone — why she started this brand 4. The Weavers Section: - "Behind Every Saree / প্রতিটি শাড়ির পেছনের মানুষ" - 3 weaver cards with image placeholder, name, specialty - Emphasize: UNESCO heritage, traditional craft preservation 5. Our Values (3 columns): - 🤝 Authenticity — 100% genuine Jamdani - 💚 Sustainability — supporting local weavers - ✨ Quality — every thread inspected 6. Timeline Section: - Brand milestones (e.g. "2020 — Started on Facebook", "2022 — 500+ orders", "2025 — Website launch") - Vertical timeline, alternating left/right on desktop SEO: Add generateMetadata export with proper title, description, og:image for this page. Add JSON-LD Organization structured data.
03

Product Catalog + Detail Pages

Filter, search, grid, product detail with image gallery — full e-commerce catalog

Supabase Data Image Gallery SEO Slugs
P-03-A
Products Catalog PageFilter tabs, search, grid with Supabase data fetching
Build the complete Products Catalog Page for Adi Jamdani. Files to create: - src/app/[locale]/(site)/products/page.tsx - src/components/products/ProductFilter.tsx - src/components/products/ProductGrid.tsx - src/components/products/ProductCard.tsx Products Page (Server Component): - Fetches all active products from Supabase on server - Supports URL search params: ?category=bridal&search=লাল&sort=price_asc - Passes data to client components - Add generateMetadata for SEO ProductFilter (Client Component): Filter tabs: All | Traditional | Contemporary | Bridal | Festival Search bar: searches both name_en AND name_bn fields Sort dropdown: Newest | Price: Low to High | Price: High to Low Price range: show products under ৳5k, ৳5k–10k, ৳10k+ Results count: "১২টি শাড়ি পাওয়া গেছে / 12 sarees found" All filters update URL params (useRouter + useSearchParams) ProductCard (used everywhere): Props: product: Product, locale: string - Image: next/image with aspect-ratio 3:4, Cloudinary URL or placeholder - Badge: "New" (gold) | "Bestseller" (burgundy) | "Custom Order" (purple) - Name in both languages (name_bn prominent, name_en smaller) - Price in BDT — show original with strikethrough if discounted - Stock badge: "In Stock" (green) | "Made to Order" (gold) | "Out of Stock" (red) - Buttons: "Order Now" (burgundy) + WhatsApp icon (green) - Hover: card lifts, image zooms slightly - Click on card → navigate to /[locale]/products/[slug] ProductGrid: - Responsive grid: 1 col mobile, 2 col tablet, 3 col desktop - Animated entrance with staggered Framer Motion (whileInView) - Loading skeleton state - Empty state: "কোনো শাড়ি পাওয়া যায়নি / No sarees found" with reset filter button
P-03-B
Product Detail PageImage gallery, product info, related products, SEO
Build the Product Detail Page for individual Jamdani sarees. Files: - src/app/[locale]/(site)/products/[slug]/page.tsx - src/components/products/ImageGallery.tsx - src/components/products/ProductDetail.tsx Page (Server Component): - generateStaticParams: fetch all product slugs from Supabase for static generation - generateMetadata: dynamic title/description/og:image per product - JSON-LD Product structured data (for Google Shopping) - Fetch product by slug + 4 related products (same category) - notFound() if product doesn't exist ImageGallery (Client Component): - Main image (large, 3:4 ratio) using next/image - Thumbnail strip below (3-4 thumbnails) - Click thumbnail → changes main image - Mobile: swipeable with Embla Carousel - Pinch-to-zoom on mobile (CSS touch-action) - Loading blur placeholder ProductDetail (Client Component): Left column: ImageGallery Right column: - Category badge + breadcrumb (Home → Collection → [category] → [name]) - Product name (name_bn large, name_en smaller) - Price: current price bold in burgundy, original strikethrough if discounted - Stock status badge - Color selector: clickable color swatches (from colors array) - Fabric info, delivery time estimate - 3 trust badges: 🪡 Handwoven | 🚚 Free Delivery (above ৳5000) | ↩ 7-Day Return - Description tabs: Description | Care Instructions | Shipping Info - CTA buttons: 1. "Order This Saree / এই শাড়ি অর্ডার করুন" (large, burgundy, full-width) → links to /order?product=[slug] 2. "Ask on WhatsApp / WhatsApp-এ জিজ্ঞেস করুন" (green) - Reviews section: show product-specific reviews (star average + mini review cards) Related Products: - "আরও দেখুন / You Might Also Like" section - 4 cards in a row (horizontal scroll on mobile)
04

Order Form + Payment Integration

Full order flow → SSLCommerz → bKash/Nagad → email confirmation

SSLCommerz bKash / Nagad Resend Email Zod Validation
⚠️ SSLCommerz sandbox credentials লাগবে। sslcommerz.com-এ গিয়ে sandbox account খুলে Store ID ও Password নিয়ে .env.local-এ রাখো আগেই।
P-04-A
Order Form PageValidated form with React Hook Form + Zod
Build the complete Order Page for Adi Jamdani. Files: - src/app/[locale]/(site)/order/page.tsx - src/components/order/OrderForm.tsx - src/components/order/OrderSteps.tsx Order Page layout (2-column): Left column — How to Order steps: Step ১: পণ্য বেছে নিন (Choose your saree) Step ২: ফর্ম পূরণ করুন (Fill the form) Step ৩: অগ্রিম পেমেন্ট (50% advance via bKash/Nagad/Card) Step ৪: আমরা যোগাযোগ করব (We confirm within 24h) Step ৫: শাড়ি পাঠানো হবে (Delivery in 15–20 days) Right column — OrderForm (Client Component): Form fields with React Hook Form + Zod validation: - customer_name: required, min 2 chars - customer_phone: required, regex BD phone (01[3-9]\d{8}) - customer_email: optional, valid email if provided - product_type: Select — Traditional | Contemporary | Bridal | Festival | Custom - color_preference: text input - budget_range: Select — ৳3k-৳5k | ৳5k-৳10k | ৳10k-৳20k | ৳20k+ - address: required - district: Select (all 64 Bangladesh districts — provide the full list) - custom_notes: textarea, optional Payment method radio: - 💳 bKash (selected by default) - 💳 Nagad - 💳 Visa/Mastercard - 📦 Cash on Delivery Submit button: "অর্ডার করুন / Place Order" — shows loading spinner while submitting On submit: POST to /api/orders → if payment online → redirect to SSLCommerz If COD → show confirmation modal directly If ?product=[slug] is in URL, pre-fill the product_type field and show a product summary card at top of form. Error handling: show field-level errors in Bengali + English. Toast notifications for API errors.
P-04-B
Order API + SSLCommerz IntegrationFull backend: save order → payment → webhook → email
Build the complete backend order + payment system for Adi Jamdani. Files to create: - src/app/api/orders/route.ts - src/app/api/payment/initiate/route.ts - src/app/api/payment/success/route.ts - src/app/api/payment/fail/route.ts - src/app/api/send-email/route.ts - src/lib/sslcommerz.ts - src/lib/resend.ts - src/app/[locale]/(site)/payment/success/page.tsx - src/app/[locale]/(site)/payment/fail/page.tsx POST /api/orders: 1. Validate request body (Zod schema) 2. Generate order_number (ADJ-YYYY-XXX format using Supabase function) 3. Insert order into Supabase (status: pending, payment_status: pending) 4. If payment_method is COD: return order directly, skip payment 5. If online payment: call /api/payment/initiate POST /api/payment/initiate: Using sslcommerz-lts package: - Initialize SSLCommerzPayment with store_id, store_passwd, is_live (from env) - Set success_url, fail_url, cancel_url to your API routes - Include all required customer + product + transaction fields - Return the GatewayPageURL to frontend - Frontend redirects user to this URL POST /api/payment/success (webhook): 1. Validate SSLCommerz IPN signature (CRITICAL for security) 2. Update order: payment_status = 'paid', ssl_tran_id = val_id 3. Update order_status = 'confirmed' 4. Call send-email API to notify customer + admin 5. Redirect to /[locale]/payment/success?order=[order_number] POST /api/payment/fail: 1. Update order payment_status = 'failed' 2. Redirect to /[locale]/payment/fail POST /api/send-email: Using Resend: - Customer confirmation email: order number, product, amount, expected delivery - Admin notification email: same info, customer phone number - Both emails in Bengali + English (bilingual HTML template) - Use React Email templates or plain HTML Success/Fail Pages: - Success: green checkmark, order number, "আমরা শীঘ্রই আপনার সাথে যোগাযোগ করব", WhatsApp button - Fail: red X, "পেমেন্ট সফল হয়নি", retry button, WhatsApp support button All API routes: use TypeScript, proper error handling, return consistent { success, data, error } responses.
05

Reviews System + Admin Panel

Review moderation + full admin dashboard — products, orders, reviews management

Admin Dashboard Supabase Auth CRUD Operations
P-05-A
Reviews Page + Review SystemPublic reviews page + submit form + API
Build the complete Reviews system for Adi Jamdani. Files: - src/app/[locale]/(site)/reviews/page.tsx - src/components/reviews/ReviewCard.tsx - src/components/reviews/ReviewForm.tsx - src/app/api/reviews/route.ts Reviews Page (Server Component): - Fetches all is_approved=true reviews from Supabase - Shows aggregate stats at top: average rating, total count, star distribution bar chart - Filter tabs: All Stars | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ - Responsive grid of ReviewCards - ReviewForm modal (opens on "রিভিউ দিন" button) - generateMetadata for SEO ReviewCard: - Dark card with gold star rating - Italic review text in EB Garamond - Reviewer name + location + avatar (initials-based, no image needed) - Date of review (relative: "2 months ago / ২ মাস আগে") ReviewForm (Client Component — in Modal): Fields: - Star rating: 5 clickable stars (interactive, highlight on hover/click) - reviewer name: required - location: Bangladesh district - review_text: textarea, min 20 chars, max 500 chars - product: optional select (from active products list) - character counter on textarea Submit → POST /api/reviews → show "রিভিউ সাবমিট হয়েছে! Admin approve করার পর দেখা যাবে।" message POST /api/reviews: - Validate with Zod - Insert to Supabase with is_approved = false - Basic spam check: same IP can't submit more than 3 reviews per day - Return success message Note: Reviews are NOT shown until admin approves them. Admin panel handles approval.
P-05-B
Admin Panel — Auth + DashboardSupabase Auth protected admin with stats dashboard
Build the Admin Panel for Adi Jamdani — protected by Supabase Auth. Files: - src/app/admin/layout.tsx (auth guard) - src/app/admin/page.tsx (dashboard) - src/middleware.ts (protect /admin/* routes) Authentication: - Use Supabase Auth (email + password login) - middleware.ts: redirect to /admin/login if no valid Supabase session for any /admin/* route - Admin login page: /admin/login — simple centered card with email + password form - Use @supabase/ssr for server-side session checking Admin Layout: - Sidebar with navigation: Dashboard | Products | Orders | Reviews | Logout - Dark theme (different from public site — more utilitarian) - Breadcrumb in header - Mobile: collapsible sidebar Dashboard Page (Stats Cards): Fetch these stats from Supabase in parallel: 1. Today's new orders count + total amount 2. This month's confirmed revenue (sum of amount where payment_status='paid') 3. Pending orders count (order_status='pending' or 'weaving') 4. Active products count 5. Pending reviews (is_approved=false) 6. Top selling product (most orders) Display in a 3x2 grid of stat cards with icons, numbers, and trend indicators. Recent activity feed: - Last 10 orders: order_number, customer_name, amount, status badge, time ago - Clickable rows → navigate to order detail Order Status Badges (color-coded): pending=yellow | confirmed=blue | weaving=purple | ready=teal | shipped=orange | delivered=green | cancelled=red
P-05-C
Admin — Product + Order + Review ManagementFull CRUD with Cloudinary image upload
Build the complete Admin CRUD pages for products, orders, and reviews. Files: - src/app/admin/products/page.tsx - src/app/admin/products/new/page.tsx - src/app/admin/products/[id]/edit/page.tsx - src/app/admin/orders/page.tsx - src/app/admin/orders/[id]/page.tsx - src/app/admin/reviews/page.tsx - src/app/api/admin/products/route.ts (GET all, POST new) - src/app/api/admin/products/[id]/route.ts (PUT, DELETE) - src/app/api/admin/orders/[id]/route.ts (PUT status) - src/app/api/admin/reviews/[id]/route.ts (PUT approve/reject) - src/app/api/admin/upload/route.ts (Cloudinary upload) Products List Page: - Table: thumbnail | name (bn+en) | category | price | stock | featured | actions - Search + filter by category - Toggle is_featured (click star) - Toggle is_active (click toggle) - Delete with confirm dialog - "Add New Product" button → /admin/products/new Add/Edit Product Form: Complex form with: - name_en, name_bn (both required) - slug (auto-generated from name_en, editable) - desc_en, desc_bn (rich textareas) - price, price_original - category (select) - fabric (text) - colors: dynamic tag input (add/remove color tags) - stock_status (select) - delivery_days (number) - is_featured, is_active (checkboxes) - Image upload: drag-and-drop zone → uploads to Cloudinary via /api/admin/upload → shows uploaded image thumbnails with delete button → stores URLs in images array Orders List Page: - Table with search by order_number/phone/name - Filter tabs by order_status - Date range filter - Each row: order_number | customer_name | phone | product | amount | payment | status | date - Export to CSV button Order Detail Page: - Full customer info display - Product details with image - Payment timeline - Status updater: dropdown + "Update Status" button - When status → 'shipped': show field for tracking number - "Send WhatsApp Update" button: opens wa.me with pre-filled status message - Notes section (admin internal notes) Reviews Moderation: - Two tabs: Pending (is_approved=false) | Approved - Each card shows full review + Approve ✓ / Reject ✗ buttons - Bulk approve option Security: All /api/admin/* routes MUST verify Supabase session using service_role key. Return 401 if not authenticated.
06

Bilingual (i18n) + SEO

Bengali/English routing, meta tags, structured data, sitemap, analytics

next-intl JSON-LD Google Analytics Facebook Pixel
P-06-A
next-intl Bilingual SetupBengali default + English — routing, messages, switcher
Set up complete bilingual (Bengali + English) support using next-intl. 1. middleware.ts: - Default locale: 'bn' (Bengali) - Supported locales: ['bn', 'en'] - Redirect / to /bn automatically - Don't apply i18n to /admin/* routes 2. next.config.ts: Configure next-intl plugin properly. 3. Translation files — create COMPLETE translations: src/messages/bn.json (Bengali — all strings): { "nav": { "home", "products", "order", "about", "reviews", "orderNow" }, "hero": { "eyebrow", "title", "subtitle", "description", "exploreCta", "orderCta" }, "features": { "handwoven", "handwoven_desc", "natural", "natural_desc", "custom", "custom_desc", "delivery", "delivery_desc" }, "products": { "title", "subtitle", "allFilter", "traditional", "contemporary", "bridal", "festival", "orderBtn", "whatsappBtn", "viewAll", "noResults", "resultsCount" }, "order": { "title", "subtitle", "nameLabel", "phonelabel", "emailLabel", ... all field labels and validation messages }, "reviews": { "title", "addReview", "submitReview", "pendingApproval" }, "footer": { "description", "quickLinks", "policies", "copyright" }, "payment": { "successTitle", "successMessage", "failTitle", "failMessage", "retry" } } src/messages/en.json — same structure, English translations. 4. Language Switcher Component: - Compact toggle: "বাংলা | EN" - Switches between /bn/... and /en/... - Preserves current path (e.g. /bn/products/dhakai → /en/products/dhakai) - Store preference in cookie 5. Update ALL components to use useTranslations() hook: Show me how to update the Navbar component as a reference example.
P-06-B
SEO + Analytics + SitemapMeta tags, JSON-LD, sitemap.xml, GA4, Facebook Pixel
Implement complete SEO and Analytics for Adi Jamdani website. 1. Root Layout Metadata (src/app/layout.tsx): Default metadata object: - title template: "%s | আদি জামদানি by Shohana" - default title: "আদি জামদানি by Shohana | Handwoven Jamdani Sarees Bangladesh" - description: bilingual SEO description (150 chars) - keywords: ["জামদানি শাড়ি", "Jamdani saree Bangladesh", "handwoven saree", "ঢাকাই জামদানি", "Dhakai Jamdani online", "custom Jamdani saree"] - openGraph: site name, locale (bn_BD + en_US), type website, og:image - twitter card - robots: index, follow - alternates: canonical + hreflang (bn → /bn/..., en → /en/...) 2. Per-page Metadata — show generateMetadata for: - /products page - /products/[slug] page (dynamic, fetch product data) - /about page - /order page 3. JSON-LD Structured Data — create for: - Organization (for site-wide, in root layout) - Product (for each product detail page — include price, availability, image) - BreadcrumbList (for product and category pages) - FAQPage (for FAQ page) 4. Sitemap (src/app/sitemap.ts): - Static pages: /, /products, /about, /reviews, /order, /faq - Dynamic product pages: fetch all active product slugs from Supabase - Both /bn/ and /en/ versions for each page - Include lastModified, changeFrequency, priority 5. Robots.txt (src/app/robots.ts): - Allow all for public pages - Disallow /admin/* 6. Google Analytics 4 (src/components/analytics/GoogleAnalytics.tsx): - Script using next/script with afterInteractive strategy - Track: page views, product views, order form starts, order completions - Custom events: trackProductView(slug), trackOrderStart(), trackOrderComplete(amount) 7. Facebook Pixel (src/components/analytics/FacebookPixel.tsx): - ViewContent event on product pages - InitiateCheckout event on order form - Purchase event on payment success 8. og-image (public/og-image.jpg): - Generate a Next.js opengraph-image.tsx for the home page - Shows brand name + tagline + brand colors
07

Final Pages + Deploy + Launch

FAQ, 404, performance optimization, Vercel deploy, domain, launch checklist

Vercel Deploy Performance Launch 🚀
P-07-A
FAQ Page + 404 Page + Error HandlingAccordion FAQ, custom 404, global error boundary
Build the remaining utility pages for Adi Jamdani. 1. FAQ Page (src/app/[locale]/(site)/faq/page.tsx): Accordion-style FAQ with these categories and questions: অর্ডার / Orders: Q: কীভাবে অর্ডার দেব? / How to place an order? Q: কাস্টম ডিজাইন কি সম্ভব? / Can I get a custom design? Q: অর্ডারের পর কতদিনে পাব? / How many days after ordering? পেমেন্ট / Payment: Q: কোন কোন পেমেন্ট পদ্ধতি আছে? / What payment methods are accepted? Q: অগ্রিম কত দিতে হবে? / How much advance is required? Q: পেমেন্ট কি নিরাপদ? / Is payment secure? ডেলিভারি / Delivery: Q: কোথায় কোথায় ডেলিভারি দেওয়া হয়? Q: ডেলিভারি চার্জ কত? রিটার্ন / Returns: Q: পণ্য ফেরত দেওয়া যাবে? Q: ক্ষতিগ্রস্ত পণ্য পেলে কী করব? যত্ন / Care: Q: শাড়ি কীভাবে ধুতে হবে? Q: কীভাবে সংরক্ষণ করব? Each question: click to expand/collapse (CSS animation, no JS library needed) Active question: gold left border, expanded answer 2. Custom 404 Page (src/app/not-found.tsx): - Brand-styled 404 - Large "404" in Playfair Display, gold - Bengali + English message: "পেজটি পাওয়া যায়নি / Page Not Found" - Button: "হোমে ফিরুন / Go Home" - Suggested links: Products, About, Contact 3. Global Error Page (src/app/error.tsx): - Shows when server-side error occurs - Friendly error message - "Reload" + "Go Home" buttons 4. Loading States (src/app/loading.tsx): - Brand-colored skeleton loader - Shows Adi Jamdani logo with subtle pulse animation
P-07-B
Performance OptimizationImages, fonts, bundle size, Core Web Vitals
Optimize the performance and Core Web Vitals of Adi Jamdani website. 1. next.config.ts optimizations: - Configure Cloudinary domain in images.remotePatterns - Enable experimental.optimizeCss - Bundle analyzer setup (npm run analyze) - Compress: true - PoweredByHeader: false (security) 2. Image optimization throughout: - All next/image instances: add sizes prop correctly - Blur placeholder: base64 for above-fold images - Priority={true} for hero and above-fold images only - Lazy loading for product grid images 3. Font optimization: - Use next/font/google for Playfair Display + Hind Siliguri - font-display: swap - Subset: latin + bengali - Preload: true for primary fonts 4. Data fetching optimization: - Implement React.cache() for repeated Supabase calls - unstable_cache for product list (revalidate: 3600 — 1 hour) - Product detail pages: revalidate: 86400 (24 hours) with on-demand revalidation on product update 5. Bundle optimization: - Dynamic imports for: admin components, Framer Motion (heavy), Embla Carousel - Example: const MotionDiv = dynamic(() => import('framer-motion').then(m => m.motion.div)) 6. Supabase query optimization: - Select only needed columns (never SELECT *) - Use .limit() on all list queries - Add proper indexes (from Phase 0 SQL) Show me the before/after Lighthouse scores to expect and what each optimization achieves.
P-07-C
Vercel Deployment + Domain SetupComplete deployment guide — env vars, domain, DNS
Give me the complete deployment guide to launch Adi Jamdani on Vercel with a custom domain. 1. Pre-deployment checklist: - Run: npx tsc --noEmit (TypeScript errors) - Run: npm run build (build errors) - Test: npm run start (production locally) - Check: all env variables are in .env.local - Verify: .gitignore includes .env.local and .env*.local 2. GitHub setup: - Initialize git, create .gitignore (Next.js template) - Create GitHub repository: adi-jamdani - Push code: exact commands 3. Vercel deployment: - Import GitHub repo on vercel.com - Framework preset: Next.js (auto-detected) - Add ALL environment variables (list every single one from .env.local) - Production branch: main - Build command: npm run build (default) - Deploy! 4. Domain setup on Namecheap: - Buy domain: adijamdani.com (suggest alternatives if taken) - In Vercel: Settings → Domains → Add custom domain - In Namecheap DNS: - Add CNAME: @ → cname.vercel-dns.com - Add CNAME: www → cname.vercel-dns.com - Wait for SSL certificate (automatic, ~5 min) - Test: https://adijamdani.com loads correctly 5. Post-deployment: - Update NEXT_PUBLIC_URL to production URL in Vercel env vars - Update SSLCommerz success/fail URLs to production URLs - Switch SSL_IS_LIVE from false to true (after merchant account approved) - Submit sitemap to Google Search Console - Verify domain in Facebook Business Manager (for Pixel) - Test complete order flow on production 6. Monitoring setup: - Enable Vercel Analytics (free) - Enable Vercel Speed Insights - Set up Vercel deployment notifications (Slack or email) Give me a final production launch checklist — 20+ items I should verify before announcing to customers.
P-07-D
Facebook → Website Migration AnnouncementPost copy for announcing the new website to existing FB followers
Write social media announcement posts for "Adi Jamdani by Shohana" launching their new website. Write these in the brand voice: warm, traditional, Bengali-first, proud of heritage. 1. Facebook launch post (Bengali primary): - Exciting announcement tone - Mention: website URL, what they can do now (order online, see full collection) - Mention payment options (bKash, Nagad) - Call to action: visit and place first order - Suggest 2-3 relevant hashtags - Suggest where to place in post: relevant product photo 2. Short follow-up post (2 days later): - "কীভাবে অর্ডার করবেন?" tutorial-style post - Step by step (3–4 steps, emoji-formatted) - Link to website 3. Pinned bio update for Facebook page: - New short bio with website URL - Updated contact info format 4. WhatsApp status text: - 1–2 lines with website URL - For broadcasting to existing customers Also suggest: what to do with the existing Facebook page posts — keep them, archive them, or migrate content to website blog?
🚀 All 28 prompts complete! Follow them sequentially — Phase 0 → 7. প্রতিটি prompt-এর output test করার পরই পরেরটায় যাও। Build time: approximately 20–24 days solo developer.