Yug Vinod Dhandhat

Product Requirements Document (PRD)

Jai Jashubai Garment Accessories - Button Supplier Website

Project Type: B2B Catalog Website with Inquiry System
Date Created: January 24, 2025
Last Updated: January 24, 2025

1. Original Problem Statement

Build a website for “Jai Jashubai Garment Accessories” that sells buttons of various varieties.

Assumed Requirements (Based on defaults):

2. User Personas

Primary Users

  1. Garment Manufacturers: Looking for bulk button orders with competitive pricing
  2. Fashion Designers: Seeking specialized fashion and decorative buttons
  3. Textile Business Owners: Need reliable suppliers for various button types
  4. Industrial Buyers: Requiring heavy-duty buttons for workwear

3. Core Requirements (Static)

Functional Requirements

Non-Functional Requirements

4. Architecture & Tech Stack

Frontend

Backend (To be implemented)

Design System

5. What’s Been Implemented

✅ Phase 1: Frontend with Real Catalog Data (January 24, 2025)

Real Product Integration

Pages Created

  1. Home Page (/)
    • Hero section with company tagline and CTAs
    • “Why Choose Us” features section
    • Button category showcase (6 categories)
    • Customer testimonials
    • Final CTA section
  2. Products Page (/products)
    • Product grid with 14 sample products
    • Category filtering system
    • Product cards with:
      • Images and category badges
      • Available sizes and colors
      • Pricing information and MOQ
      • “Request Quote” CTA buttons
    • Responsive filter toggles
  3. About Page (/about)
    • Company story and history
    • Statistics section (25+ years, 500+ clients, 700+ designs)
    • Product offerings overview
    • Core values showcase
    • “Why Partner With Us” benefits
  4. Contact Page (/contact)
    • Contact information cards (phone, email, address, hours)
    • Quote request form with validation
    • WhatsApp quick contact card
    • Form fields: name, company, email, phone, button type, quantity, message

Components Created

Real Catalog Data Structure (/app/frontend/src/data/mock.js)

Real Catalog Card Images

All category and product images now use authentic catalog cards:

Design Features

6. Prioritized Backlog

P0 Features (Must Have - Next Phase)

P1 Features (Should Have)

P2 Features (Nice to Have)

7. Next Tasks

Immediate Next Steps:

  1. User Confirmation: Confirm satisfaction with frontend design and functionality
  2. Backend Development:
    • Design database schema for products, categories, inquiries
    • Create FastAPI endpoints
    • Implement MongoDB models
    • Add form submission logic
  3. Integration:
    • Connect frontend to backend APIs
    • Remove mock data
    • Add error handling and loading states
  4. Testing: Full E2E testing with testing agent

Future Enhancements:

8. API Contracts (To Be Implemented)

GET /api/categories

Response:

[
  {
    "id": 1,
    "name": "Plastic Buttons",
    "description": "...",
    "image": "url",
    "productCount": 150,
    "color": "#3dd3ee"
  }
]

GET /api/products?category={id}

Response:

[
  {
    "id": 101,
    "categoryId": 1,
    "name": "Classic Round Plastic Button",
    "sizes": ["12mm", "15mm"],
    "colors": ["White", "Black"],
    "price": "₹2-5 per piece",
    "moq": "1000 pieces",
    "image": "url"
  }
]

POST /api/inquiries

Request:

{
  "name": "string",
  "company": "string",
  "email": "string",
  "phone": "string",
  "buttonType": "string",
  "quantity": "string",
  "message": "string"
}

Response:

{
  "success": true,
  "message": "Inquiry submitted successfully",
  "inquiryId": "uuid"
}

9. Mock Data Details (To Be Replaced)

File: /app/frontend/src/data/mock.js

Current Mock Includes:

Integration Notes:

10. Success Metrics

Technical Metrics

Business Metrics (Future)

Notes