Back to projects
ReactTypeScriptVitei18nextFramer Motion

Agric-Prod: Agricultural Company Website

Multi-language product showcase website for an Algerian agricultural company with WordPress CMS integration and e-commerce features.

0:00 / 0:00
Product demo: click to play

Overview

A modern product showcase and e-commerce website for Agric-Prod, an Algerian agricultural company. Consumes WordPress CMS backend via Axios, features a dynamic product catalog with filtering, internationalization support for 4 languages, and contact form integration.

What I Did

  • Built responsive React + TypeScript application with Vite build pipeline
  • Integrated WordPress CMS backend with Axios for dynamic product data fetching
  • Implemented product catalog with category filtering and search functionality
  • Created dedicated product listing and detail pages with rich metadata
  • Built contact form with server-side mailer service integration
  • Integrated WhatsApp deep-linking for direct customer inquiries
  • Implemented i18next internationalization: Arabic, French, English, Chinese
  • Enforced English as default locale with language persistence
  • Added Framer Motion animations for engaging UI interactions
  • Configured ESLint and Prettier for code quality and consistency

Challenges

  • Syncing WordPress CMS data in real-time without performance degradation
  • Managing RTL layout for Arabic while maintaining English and French support
  • Handling large product images and assets for fast load times
  • Implementing effective product filtering across multiple attributes

Results

  • Non-technical staff update the catalog through WordPress, no code, no redeploys
  • Arabic, French, English, and Chinese UI opens the catalog to buyers in four languages
  • Contact form plus WhatsApp deep-linking give customers a direct line to the company
  • Clean, fast product pages replace an outdated static presence

Tech Stack

React 18

Component-based architecture for reusable product catalog components

TypeScript

Type safety for WordPress API integration and product data structures

Vite

Fast build tool optimized for modern development workflow

i18next

Seamless multi-language support for Arabic, French, English, Chinese

Framer Motion

Smooth animations for product showcase and page transitions

WordPress CMS

Centralized product management without code changes