Joytech Gear - B2B Product Catalog

Professional ecommerce platform for Joytech Gear, a trusted supplier of electrical products, electric motors, IT products, and safety equipment across India.

📁 Project Structure

joytech-Ui/
├── frontend/                 # Angular 17 application
│   ├── src/
│   │   ├── app/
│   │   │   ├── pages/       # Page components
│   │   │   ├── services/    # Services (ProductService, etc.)
│   │   │   ├── models/      # TypeScript models
│   │   │   └── ...
│   │   ├── assets/
│   │   │   ├── data/        # Product data (products.json)
│   │   │   └── images/      # Category and brand logos
│   │   └── ...
│   ├── angular.json
│   ├── package.json
│   ├── tsconfig.json
│   └── .gitignore
├── specs/                    # Project specifications
│   ├── 001-b2b-product-catalog/
│   │   ├── spec.md
│   │   ├── plan.md
│   │   ├── data-model.md
│   │   └── ...
│   └── .gitignore
├── .gitignore               # Root level git ignore
└── README.md

🚀 Features

Product Categories

• Wires, Cables & Electrical Components - Power cables, control cables, armored cables
• Switchgear & Circuit Protection - Circuit breakers, panel assemblies, disconnect switches
• Industrial Automation & Control - PLC controllers, relays, timers & counters
• Electric Motors - AC, DC, geared, and servo motors
• Safety Products - Helmets, goggles, gloves, shoes, respirators
• Lighting & Wiring Devices - LED lights, switches, socket outlets
• IT Products - Laptops, desktops, printers, networking, storage

Ecommerce Features

✅ Category browsing with professional SVG illustrations ✅ Brand selection with company logos ✅ Product filtering (search, type, sorting) ✅ Product details with contact options ✅ Email inquiry (mailto links) ✅ WhatsApp integration for quick contact ✅ Pagination support ✅ Responsive design (desktop, tablet, mobile) ✅ Professional color scheme and animations

🛠️ Tech Stack

• Frontend: Angular 17, TypeScript 5.2
• Styling: SCSS with CSS custom properties
• State Management: RxJS Observables, Component-level state
• Data: JSON-based product catalog
• Build: Angular CLI, Webpack

📦 Installation & Setup

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Navigate to frontend directory
cd frontend

# Install dependencies
npm install

# Start development server
ng serve

# Open browser
http://localhost:4200

Build for Production

ng build --prod

📁 Git Workflow

What's Tracked (Source Code Only)

• ✅ src/ - All source code
• ✅ specs/ - Project specifications
• ✅ angular.json, tsconfig.json, package.json
• ✅ .gitignore, README.md
• ✅ assets/data/products.json - Product data

What's Ignored (Generated Files)

• ❌ node_modules/ - Dependencies
• ❌ .angular/ - Angular build cache
• ❌ dist/ - Build output
• ❌ babel-webpack/ - Build cache
• ❌ .vscode/ - IDE settings
• ❌ .env - Environment variables
• ❌ *.log - Log files

📊 Data Model

Product

{
  id: string;
  name: string;
  brand: string;
  category: string;
  part_number: string;
  spec_summary: string;
  datasheet_url?: string;
  images?: string[];
  contact_note: string;
}

Category

{
  id: string;
  name: string;
  description: string;
  image: string;
  productTypes: string[];
  brands: string[];
}

Brand

{
  id: string;
  name: string;
  productCount?: number;
}

🎨 Design System

• Primary Color: #3b82f6 (Blue)
• Accent Color: #2563eb (Dark Blue)
• Success: #10b981 (Green)
• Warning: #f59e0b (Amber)
• Error: #ef4444 (Red)

📱 Responsive Breakpoints

• Desktop: 1200px+
• Tablet: 768px - 1199px
• Mobile: Below 768px

🔧 Available Scripts

# Development server
ng serve

# Build for production
ng build --prod

# Run unit tests
ng test

# Run e2e tests
ng e2e

# Lint code
ng lint

📝 Git Commit Best Practices

# Before committing, ensure .gitignore is working
git status  # Should NOT show node_modules, .angular, etc.

# Stage only relevant files
git add src/ specs/ angular.json package.json .gitignore README.md

# Commit with clear messages
git commit -m "feat: Add brand filtering to product categories"

🚢 Deployment

The application can be deployed to various platforms:

• Netlify
• Vercel
• Firebase Hosting
• GitHub Pages
• Traditional web servers

📧 Contact & Support

For inquiries about the product catalog:

• Email: [email protected]
• WhatsApp: Integrated in-app messaging

📄 License

Proprietary - Joytech Gear Private Limited

---

Last Updated: December 27, 2025 Version: 1.0.0