# Overview

This project is a bilingual (Persian/English) CMS and e-commerce platform designed for a curtains, furniture, and home decoration store. It features a modern React frontend and an Express.js backend, backed by PostgreSQL. The system includes an administrative panel for comprehensive management of inventory, products, orders, and finances, alongside a customer-facing storefront. The storefront's design mirrors pardehstore.com, emphasizing a clean, minimal aesthetic with neutral colors and strong product focus. Key capabilities include a robust cart and order management system, flexible product variants and attributes, dynamic shipping zone calculations, and a complete payment integration with ZarinPal. The system also boasts an advanced theme and content customization suite, including WordPress-style header and footer builders, enabling extensive control over the site's appearance and structure.

# User Preferences

Preferred communication style: فارسی صحیح و شیرین (Only Persian language - no mixing)

# System Architecture

## Frontend Architecture

The frontend is built with React 18 and TypeScript, using Vite for fast development. Routing is handled by Wouter, supporting a unified experience where admins can access both customer and admin interfaces. A WordPress-style layout includes an `AdminTopBar` universally visible to admins and an `AdminShell` with a right-side sidebar for `/admin/*` routes. UI components leverage `shadcn/ui` (built on Radix UI) with a "new-york" style, and styling is managed with Tailwind CSS, supporting RTL for Persian and using Vazirmatn font. State management utilizes TanStack Query for server state, React Hook Form with Zod for forms, and LocalStorage for anonymous shopping carts. The design adheres to a clean, minimal e-commerce aesthetic with a neutral color palette.

Key administrative pages include:
-   **Product Variants Page**: Manages product variations (color, size, material, SKU) with quantity tracking and optional variant-specific pricing.
-   **Shipping Zones Page**: Configures geographic shipping zones, costs, and free shipping thresholds.
-   **Product Attributes Page**: Allows addition of custom key-value attributes (e.g., length, width, weight).
-   **Header Builder**: Provides an interface to create, edit, and manage multiple header layouts and their constituent elements (logo, menu, search, cart, etc.) with real-time preview.
-   **Footer Builder**: Offers similar functionality for creating and managing footer layouts and elements (columns, widgets, text, social links).

## Backend Architecture

The backend runs on Express.js with TypeScript, providing a RESTful API. Authentication is dual-layered: admin users use a local username/password strategy via Passport.js, while customers use Replit Auth (OpenID Connect). Session management is PostgreSQL-backed. The middleware stack includes JSON parsing, request logging, and authentication guards. ZarinPal is integrated as the primary Iranian payment gateway, handling payment requests and verification. New API endpoints support CRUD operations for product variants, shipping zones, product attributes, and the header/footer builder components.

## Data Layer

Drizzle ORM with Neon serverless PostgreSQL handles data persistence. The schema includes tables for users, products, categories, inventory, orders, transactions, CMS content, sessions, coupons, payments, product variants, shipping zones, product attributes, and the new header/footer builder system (`header_layouts`, `header_elements`, `footer_layouts`, `footer_elements`). All monetary values are internally handled as integers (whole toman values), with `decimal(10,2)` used for product prices for flexibility. Drizzle-Zod is used for schema validation, and drizzle-kit manages migrations. A `Theme Settings` table stores extensive appearance customization options.

# External Dependencies

-   **Database**: PostgreSQL (configured for Neon serverless)
-   **Authentication Provider**: Replit OIDC service
-   **Payment Gateway**: ZarinPal API
-   **UI Component Libraries**: Radix UI, Lucide React, Embla Carousel, Recharts
-   **Fonts**: Google Fonts API (Inter, Playfair Display, Vazirmatn)
-   **Build Tools**: Vite, esbuild, PostCSS
-   **Development Tools**: @replit/vite-plugin-runtime-error-modal, @replit/vite-plugin-cartographer, @replit/vite-plugin-dev-banner
-   **Form Handling**: React Hook Form, Zod, @hookform/resolvers
-   **Date Handling**: date-fns
-   **Styling Utilities**: class-variance-authority, clsx, tailwind-merge