Back to Projects

Al Najm Al Zaher — Commodity Trading Corporate Site

Technologies:Next.js, Typescript, Tailwind CSS, Vercel
View on GitHub

Al Najm Al Zaher

Table of Contents

Introduction

Al Najm Al Zaher is a modern, responsive commodity trading platform I developed for a client in the commodities sector. This project demonstrates my ability to deliver professional, business-focused web solutions that meet specific client requirements while implementing best practices in full-stack development.

The client needed a platform to showcase their commodity trading services, focusing on agricultural products with detailed product information, company profiles and contact functionality. I translated these business requirements into a fully functional, SEO-optimised website with a clean, professional design.

Features

  • Responsive Design: Fully responsive layout that works seamlessly across all devices
  • Dynamic Navigation: Interactive dropdown menus and mobile-friendly navigation
  • Hero Slider: Engaging hero section with auto-rotating slides
  • Product Showcase: Detailed product pages with specifications and descriptions
  • SEO Optimization: Comprehensive SEO implementation including structured data, meta tags and sitemap
  • Performance Optimised: Fast loading times with optimised images and code splitting
  • Accessibility Compliant: WCAG-compliant design with proper semantic HTML
  • Contact Integration: Email contact functionality as per client requirement

Tech Stack

This project leverages the following modern technologies:

  • Next.js 14: React framework with App Router for server-side rendering and routing
  • TypeScript: For type safety and improved developer experience
  • Tailwind CSS: Utility-first CSS framework for responsive design
  • Shadcn UI: Component library for consistent UI elements
  • Lucide React: Lightweight icon library
  • SEO Optimisation: Custom metadata, JSON-LD structured data and sitemap generation
  • Responsive Images: Next.js Image component for optimised image loading
  • Server Components: Leveraging Next.js server components for improved performance

Getting Started

  1. Clone this repository to your local machine:
git clone https://github.com/SadmanKibria/Al-Najm-Al-Zaher.git
  1. Navigate to the project directory:
cd al-najm-al-zaher
  1. Install dependencies:
npm install
  1. Run the development server:
npm run dev
  1. Open http://localhost:3000 in your browser to see the application.

Usage

The website is structured to provide a seamless user experience:

  1. Homepage: Features a hero slider, about section, commodities showcase and contact information
  2. Products: Detailed pages for each commodity with specifications and descriptions
  3. About: Company information including profile, directors and global presence
  4. Contact: Direct email contact functionality

Project Structure

The project follows a clean, modular architecture:

/
├── app/                  # Next.js App Router pages
│   ├── about/            # About section pages
│   ├── products/         # Product detail pages
│   ├── layout.tsx        # Root layout with metadata
│   └── page.tsx          # Homepage
├── components/           # Reusable React components
│   ├── ui/               # UI components from shadcn
│   ├── navbar.tsx        # Navigation component
│   ├── footer.tsx        # Footer component
│   └── ...               # Other components
├── lib/                  # Utility functions
│   └── seo-config.ts     # SEO configuration
├── public/               # Static assets
└── ...                   # Configuration files

Challenges and Solutions

  1. SEO Optimisation:

  2. Challenge: The client required comprehensive SEO for better market visibility

  3. Solution: Implemented centralised SEO configuration with structured data (JSON-LD), dynamic metadata and sitemap generation

  4. Responsive Navigation:

  5. Challenge: Creating an intuitive navigation system that works across all devices

  6. Solution: Developed a responsive navbar with dropdown menus for desktop and a slide-out menu for mobile

  7. Performance Optimisation:

  8. Challenge: Ensuring fast load times with image-heavy content

  9. Solution: Utilized Next.js Image component, code splitting and lazy loading techniques

  10. Content Management:

  11. Challenge: Organising product information in a maintainable way

  12. Solution: Created reusable product detail components with structured data models

Key Learning

  • Client Collaboration: Effectively translated client requirements into technical solutions
  • Next.js App Router: Applied Next.js 14's App Router architecture and server components in a production environment
  • SEO Best Practices: Implemented advanced SEO techniques including structured data and dynamic metadata
  • Component Architecture: Designed a scalable component system with clear separation of concerns
  • Responsive Design Patterns: Applied modern responsive design techniques using Tailwind CSS
  • Accessibility: Ensured the application meets accessibility standards with semantic HTML and ARIA attributes

Future Enhancements

  • Authentication System: Add user authentication for client portals
  • CMS Integration: Implement a headless CMS for easier content management
  • Multi-language Support: Add internationalization for global reach
  • Analytics Dashboard: Integrate analytics to track user engagement
  • Blog Section: Add a blog for market insights and company news
  • Real-time Chat: Implement a chat feature for customer support

Contact

For any inquiries about this project or to discuss potential opportunities, please contact me at:

This client project demonstrates my ability to deliver high-quality, performant web applications that meet specific business requirements. I pride myself on creating solutions with attention to detail, clean code architecture and modern development practices while ensuring exceptional user experiences.