Barkat Enterprise: A Freelance Project for an Enterprise

📊 Key Metrics at a Glance

---

Welcome to the official technical documentation for Barkat Enterprise, a full-scale React marketplace serving 3,000+ viewers with modern UI/UX and interactive PDF catalogues. This project implements JAMstack architecture with WebP optimization and mobile-first design, built as a freelance project for a tiles and marbles enterprise.

In this documentation, we'll provide a deep dive into the technologies used, the business challenge addressed, detailed solutions implemented, and the measurable impact achieved.

---

🔗 Quick Links

---

📋 Table of Contents

• The Challenge
• The Solution
• Business Impact
• Technologies and Tools Used
• Project Overview
• Key Features
• Technical Deep Dive
• Challenges Faced
• Deployment and Testing
• Screenshots Gallery
• What I Learned
• Future Improvements
• Conclusion
• FAQs

---

🎯 The Challenge

Traditional tile showrooms struggle to showcase vast product inventories online effectively. The tiles and marbles industry faces unique digital transformation challenges:

The core challenge: Create an engaging digital experience that matches the tactile showroom experience while handling hundreds of product images efficiently across diverse network conditions in India.

---

💡 The Solution

Developed a React 18 + Vite powered single-page application with a comprehensive feature set designed to address each pain point:

Architecture Decisions

Key Implementation Highlights

javascriptCopy
// Dynamic product filtering with debounced search
const filteredProducts = sampleTiles.filter(tile => 
  (tile.category === selectedCategory || selectedCategory === 'All') && 
  (selectedSubcategory === 'All Types' || tile.subcategory === selectedSubcategory) &&
  tile.name.toLowerCase().includes(debouncedSearch.toLowerCase())
);

javascriptCopy
// Intersection observer-based lazy loading
import LazyLoad from 'react-lazyload';

<LazyLoad height={200} offset={100} placeholder={<ImageSkeleton />}>
  <img src="/assets/Products/tile.webp" alt="Premium Tile" loading="lazy" />
</LazyLoad>

---

📈 Business Impact

The platform delivered measurable results across multiple business metrics:

Quantified Results

Impact Breakdown

• ✅ 3,000+ viewers with strong engagement metrics and low bounce rate
• ✅ 50+ organic leads generated through contact forms and direct inquiries
• ✅ Sub-2 second initial load time via WebP compression and lazy loading
• ✅ Mobile conversion rate improvement through responsive design optimization
• ✅ Reduced catalogue distribution costs via digital PDF system
• ✅ Measurable B2B conversions and repeat customer inquiries

---

Technologies and Tools Used

Core Stack

Supporting Libraries

Development Tools

---

Project Overview

Barkat Enterprise was developed as a full-fledged business solution showcasing 10+ product categories with dynamic filtering and advanced search capabilities.

Core Capabilities

Technical Architecture

┌─────────────────────────────────────────────────────────────┐
│                     Vercel Edge Network                      │
│                    (Global CDN Delivery)                     │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                    React 18 SPA (Vite)                       │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │   Router    │  │  Components │  │   State Management  │  │
│  │  (6 Routes) │  │ (Modular)   │  │   (React Hooks)     │  │
│  └─────────────┘  └─────────────┘  └─────────────────────┘  │
└─────────────────────────────────────────────────────────────┘
         │                    │                    │
         ▼                    ▼                    ▼
┌─────────────┐      ┌─────────────┐      ┌─────────────────┐
│  PDFJS-Dist │      │   EmailJS   │      │ Vercel Analytics│
│  (Catalogues)│      │  (Contact)  │      │  (Tracking)     │
└─────────────┘      └─────────────┘      └─────────────────┘

Dynamic Catalog Generation

javascriptCopy
const catalogues = {
  catalogue1: {
    name: '1×1.5 BARKAT ENTERPRISE',
    images: Array.from(
      { length: 29 }, 
      (_, i) => `/assets/Catalogue/1X1.5 BARKAT ENTERPRISE/${i + 1}.webp`
    ),
    pdfPath: '/assets/Catalogue/1X1.5 BARKAT ENTERPRISE (ALL)_compressed.pdf'
  },
};

This approach enables:

• Scalability: Easy addition of new catalogues without code duplication
• Maintainability: Centralized configuration for all product catalogues
• Performance: Efficient path generation for large image sets

---

Key Features

1. Secure Contact Integration

📧 EmailJS Integration:

2. Image Optimization Pipeline

🖼️ WebP Optimization Strategy:

jsxCopy
// Optimized image implementation
<LazyLoad height={200} offset={100}>
  <img 
    src="/assets/Products/tile.webp" 
    alt="Premium Tile"
    className="w-full h-auto object-cover"
    loading="lazy"
  />
</LazyLoad>

3. PDF Catalogue System

📄 PDFJS-Dist Features:

• ✅ Product catalogues rendered directly in-browser
• ✅ No external downloads required for viewing
• ✅ Seamless download option for offline access
• ✅ Mobile-responsive PDF viewer with zoom controls
• ✅ Page navigation and thumbnail previews

4. Advanced Product Filtering

jsxCopy
// Multi-level filtering system
useEffect(() => {
  const filtered = sampleTiles.filter(tile => 
    (tile.category === selectedCategory || selectedCategory === 'All') && 
    (selectedSubcategory === 'All Types' || tile.subcategory === selectedSubcategory) &&
    tile.name.toLowerCase().includes(searchQuery.toLowerCase())
  );
  setFilteredTiles(filtered);
}, [selectedCategory, selectedSubcategory, searchQuery]);

5. Hardware-Accelerated Animations

jsxCopy
// GPU-optimized hero carousel
<section className="relative h-[92vh] overflow-hidden">
  <h1 className="transform-gpu will-change-transform leading-tight">
    BARKAT ENTERPRISES
  </h1>
  {images.map((img, index) => (
    <div 
      key={index}
      className={`absolute inset-0 transition-opacity duration-1000 
        ${currentSlide === index ? 'opacity-100' : 'opacity-0'}`}
    >
      <img src={img} className="object-cover w-full h-full" alt="" />
    </div>
  ))}
</section>

---

Technical Deep Dive

Performance Optimizations

Accessibility Compliance

Mobile-First Responsive Design

cssCopy
/* TailwindCSS responsive breakpoints optimized for Indian devices */
/* sm: 640px (basic smartphones) */
/* md: 768px (tablets, large phones) */
/* lg: 1024px (small laptops) */
/* xl: 1280px (desktops) */

/* Example responsive utility usage */
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  {/* Product cards */}
</div>

---

Challenges Faced

1. Image Path Issues on Vercel

jsxCopy
// Before (broken on deployment)
<img src="../assets/logo.png" />

// After (working correctly)
<img src="/assets/Logo/logo.png" />

2. SPA Routing 404 Errors

jsonCopy
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

3. Hero Carousel Stability

4. Indian Network Optimization

---

Deployment and Testing

Vercel Deployment Configuration

Deployment Benefits

Testing Strategy

---

📸 Screenshots Gallery

Desktop Views

Mobile View

---

What I Learned

This freelance project offered invaluable lessons in modern web development and client delivery:

Technical Skills

Soft Skills

---

Future Improvements

Planned Feature Roadmap

Technical Roadmap

• Implement Progressive Web App (PWA) capabilities with offline support
• Add comprehensive unit and integration tests with Jest + React Testing Library
• Set up CI/CD pipeline with automated testing and deployment gates
• Implement advanced caching strategies with service workers
• Add SEO optimizations with meta tags, structured data, and sitemap

---

Conclusion

Barkat Enterprise is a prime example of modern web development tailored to meet enterprise needs in the Indian market. Developed as a freelance project, it seamlessly integrates React 18, TailwindCSS, Vite, and Vercel to deliver a robust, scalable, and user-friendly platform.

Skills Demonstrated

Key Achievements

• ✅ Built responsive, component-based UI serving 3,000+ viewers
• ✅ Generated 50+ organic leads through optimized contact forms
• ✅ Achieved sub-2 second load times via performance engineering
• ✅ Delivered cost savings through digital catalogue distribution
• ✅ Implemented WCAG 2.1 accessibility compliance

---

FAQs

What technologies were used in this project?

The project utilizes React 18.3.1 with functional components, Vite 5.4.1 for building, TailwindCSS 3.4.10 for styling, and Vercel for deployment. Supporting libraries include PDFJS-Dist for PDF rendering, EmailJS for contact forms, React LazyLoad for performance, and Vercel Analytics for tracking.

What were the main challenges faced?

Primary challenges included:

• 🖼️ Image path resolution on Vercel deployment
• ⚡ SPA routing 404 errors on page refresh
• 📱 Optimizing for varied Indian network conditions
• 🎠 GPU-accelerated carousel animations

How were images optimized?

Images were optimized through:

1. Converting all images to WebP format (30-50% size reduction)
2. Relocating to /public directory with absolute paths
3. Implementing intersection observer-based lazy loading
4. Using placeholder components during load

What business impact was achieved?

• 3,000+ viewers with strong engagement
• 50+ leads generated through contact forms
• Sub-2 second initial load time
• Reduced costs via digital catalogue distribution
• Improved mobile conversion through responsive design

Is the project scalable for larger businesses?

Yes, the architecture supports enterprise scaling:

• Modular component structure for feature additions
• Centralized data management for products
• Performance optimizations for large catalogues
• Vercel's edge network for global delivery
• Analytics for data-driven decisions

---

🏷️ Project Badges

---