Barkat Enterprise: A Freelance Project for an Enterprise

Welcome to the official blog post for Barkat Enterprise, a comprehensive web application designed and developed as a freelance project for an enterprise. This project embodies modern web development techniques, showcasing innovation, scalability, and robust performance to streamline business operations.

In this post, we’ll provide a deep dive into the technologies used, detailed solutions to challenges faced during development, and key features implemented to make this platform successful.

🔗 Links

• 🌐 Access the App: Barkat Enterprise
• 💻 View the Code: View Source Code

Technologies and Tools Used

The development of Barkat Enterprise required an extensive stack of modern technologies and tools to ensure an exceptional user experience and robust functionality:

Frontend Development

• 🖥️ React.js
  • A JavaScript library for building responsive and interactive UIs.
  • Utilized for creating modular, reusable components.
• 🎨 Tailwind CSS
  • A utility-first CSS framework that allows for rapid UI development with clean and customizable styling.

Additional Libraries

• ⏳ React LazyLoad
  • Installed using npm install react-lazyload to implement lazy loading for images, optimizing performance by loading only visible elements.
• 🛠️ React Icons
  • Simplifies icon usage, ensuring scalability and design consistency across components.
• 📄 PDFJS-Dist
  • Installed via npm install pdfjs-dist to render and display PDF files directly on the website, enhancing the user experience.

Deployment and Analytics

• 🚀 Vercel
  • Used for seamless CI/CD deployment and hosting.
  • Integrated Vercel analytics by installing the Vercel npm package and adding analytics script tags in the HTML for performance monitoring.

Project Overview

Barkat Enterprise was developed as a full-fledged business solution for showcasing product catalogs, streamlining customer interactions, and enhancing user engagement. Key aspects of the project include:

• 📚 Product Catalog: A detailed showcase of products with images and downloadable PDF catalogs.
• 📱 Responsive Design: Ensures an optimal user experience across devices (desktop, tablet, and mobile).
• ⚡ Enhanced Performance: Features like lazy loading for images and optimized asset management to reduce load times.

Below is a code snippet demonstrating the catalog generation using dynamic template literals:

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

Key Features

Secure Contact Integration

• 📧 Email.js Integration:
  • Easily configured templates for seamless email communication.
  • Provides secure and efficient real-time messaging capabilities.
  • Facilitates automation of email delivery with minimal setup.

Image Optimization

🖼️ Optimizing Image Deployment:

• Problem: Large file sizes like JPEG and JPG were slowing down deployment and loading times.
• Solution: Converted images to WebP format for faster loading and better performance. Additionally, moved the assets folder to the public directory and referenced images directly:

Real-Time Updates and Lazy Loading

• ⏳ Leveraged React LazyLoad to load elements only when they come into the viewport, optimizing resource usage and performance.

PDF Integration

• 📄 Used PDFJS-Dist to render product catalogs directly on the site, allowing users to view and download PDFs seamlessly.

Challenges Faced

1. Image Path Issues on Vercel

• Problem: Images were not loading on the deployed site due to incorrect asset referencing.
• Solution:
  • Moved all image files to the public directory and updated paths to reference assets directly:

2. Page Refresh Error on Vercel

• Problem: Refreshing or directly accessing a route like /products resulted in a 404 error.
• Solution:
  • Added a rewrite rule in the vercel.json file to serve the index.html file for all routes:

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

3. Dynamic Asset Loading

• 🔄 Used template literals to dynamically generate paths for assets such as product images and catalogs.

4. Seamless Contact Integration

• 📧 Integrated Email.js for secure and efficient communication with customers, enabling real-time message delivery.

Deployment and Testing

Deployment

• 🚀 Vercel was chosen for its:
  • Automatic CI/CD pipelines for rapid updates.
  • Global edge network for fast and reliable delivery.

Testing

• ✅ Conducted a comprehensive testing process:
  • Unit Testing: Validated individual components using Jest.
  • Integration Testing: Verified workflows and API interactions using Postman.

What I Learned

This freelance project offered invaluable lessons in:

• 🖼️ Asset Management: Addressing deployment challenges with Vercel by optimizing image paths and directory structures.
• ⚡ Performance Optimization: Implementing lazy loading and utilizing the public directory for assets.
• 🚀 Advanced Deployment Techniques: Resolving SPA-related issues by configuring rewrite rules in vercel.json.
• 🔄 Dynamic Code Practices: Using modern JavaScript techniques, such as template literals, for scalable and efficient code.

Future Improvements

To further enhance Barkat Enterprise, the following improvements are planned:

1. 🤖 AI-Powered Analytics: Integrating machine learning to provide actionable insights from customer interactions.
2. 🌍 Multi-Language Support: Expanding accessibility by offering the platform in multiple languages.
3. 🔐 Advanced Role-Based Access Control (RBAC): Implementing granular user permissions for enhanced security.

Conclusion

Barkat Enterprise is a prime example of modern web development tailored to meet enterprise needs. Developed as a freelance project, it seamlessly integrates React, Tailwind CSS, and Vercel to deliver a robust, scalable, and user-friendly platform.

Explore the complete codebase on the GitHub Repository.

FAQs

1. What technologies were used in this project?
   • 🖥️ React.js, 🎨 Tailwind CSS, 🚀 Vercel, ⏳ React LazyLoad, 🛠️ React Icons, and 📄 PDFJS-Dist.
2. What were the challenges faced during development?
   • Issues with 🖼️ image paths, ⚡ route refresh errors, and 🔄 dynamic asset management.
3. How were images optimized for deployment?
   • By relocating them to the public directory and using direct paths.
4. Is the project scalable for large businesses?
   • Yes, it’s designed to handle enterprise-level requirements efficiently.
5. What’s next for Barkat Enterprise?
   • 🤖 AI analytics, 🌍 multi-language support, and 🔐 enhanced security features.