Torky Store Men's

متجر تركي للأحذية الرجالية

Egyptian Arabic-first e-commerce storefront for men's shoes.

Guest checkout · Cash on Delivery · Instapay · Vodafone Cash 50 EGP flat delivery · 1-day return window

Live site · License · Author

Stack

• Framework: Next.js 15 (App Router) · React 19 · TypeScript
• Styling: Tailwind v4 · OKLCH design tokens · shadcn-style primitives
• State: Zustand (cart, persisted to localStorage)
• Server data: Supabase (Postgres, RLS, Storage) · TanStack Query
• Forms: react-hook-form + Zod
• Motion: framer-motion
• PWA: Serwist (offline shell + runtime caching)
• Image: sharp (server-side invoice re-encode + favicon generator)
• Lint / format: oxlint · oxfmt
• Hooks: husky (pre-commit, pre-push, commit-msg) · commitlint

Quickstart

nvm use            # Node 25
pnpm install
pnpm dev           # http://localhost:3000

Required env (.env.local)

NEXT_PUBLIC_SUPABASE_URL=https://<project>.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=<anon-or-publishable-key>
SUPABASE_SERVICE_ROLE_KEY=<service-role-jwt>      # server only
NEXT_PUBLIC_SITE_URL=https://torkystore.com

Service-role key is required for /api/upload-invoice (private bucket write) and the dynamic sitemap (Supabase fetch). Never commit .env.local.

Scripts

Script	Action
pnpm dev	Next dev server
pnpm build	Production build
pnpm start	Run prod build
pnpm lint / pnpm lint:fix	oxlint
pnpm format / pnpm format:check	oxfmt
pnpm type-check	tsc --noEmit
pnpm favicons	regenerate favicon set from public/brand/logo.jpg

Supabase setup

This repo uses Supabase Postgres + Storage. The schema lives in numbered MCP-applied migrations:

1. init_reference_tables — colors, sizes, categories
2. init_shoes — shoes, shoe_categories, shoe_variants, shoe_images
3. init_orders — enums + orders, order_items with constraints
4. stock_triggers_and_place_order_rpc — auto-maintain shoes.in_stock, place_order RPC
5. enable_rls_policies — public read on catalog, RPC-only writes on orders
6. seed_reference_data — colors, sizes, categories
7. storage_buckets_only — public shoes bucket, private invoices bucket
8. harden_security_definer_functions — revoke RPC exposure of internal helpers

Regenerate TypeScript types after schema changes via the Supabase MCP generate_typescript_types tool and paste into src/lib/supabase/types.ts.

Shoe data entry

Manage products via Supabase Studio (no admin UI built this phase):

1. Insert into shoes (Arabic name_ar, description_ar, EGP price, custom_id like TKY-0001)
2. Insert per (color, size) row in shoe_variants with stock
3. Upload product photos to the shoes bucket → insert path into shoe_images
4. Optional: link categories via shoe_categories

Stock-out is automatic — shoes.in_stock flips to false when total variant stock hits zero.

Order moderation

Orders arrive in pending status. Open orders in Studio → flip status to delivered. For Instapay / Vodafone Cash orders, invoice_path points to a private object in the invoices bucket — use Studio's storage explorer (or a signed URL) to view.

Design system

• Theme: light default · dark opt-in (toggle in header)
• Palettes: Indigo (default) · Emerald · Rose (toggle in header)
• Typography: Cairo (Google Fonts) — Arabic + Latin, weights 400–800
• RTL: full document-level (dir="rtl"), logical properties only

Tokens live in src/app/globals.css (OKLCH variables) and src/lib/motion.ts (durations + ease curves). Don't introduce raw hex colors or hardcoded easings; reuse tokens.

Banned patterns (see DESIGN.md):

• Side-stripe borders, gradient text, default glassmorphism, hero metric tiles, identical card grids, modal-as-first-thought.

Accessibility

WCAG 2.2 AA target. Skip link, ARIA labels (Arabic, in constants.aria.*), keyboard navigation, 44×44 touch targets, contrast verified per palette × theme. prefers-reduced-motion disables auto-advance and translate animations.

Repository layout

See AGENTS.md for the full folder map and code conventions. AGENTS.md is the canonical reference for AI agents and human contributors — keep it in sync when files change in src/.

Author

Mohamed Elhawary · LinkedIn · mohamed.k.elhawary@gmail.com

License

Proprietary — All Rights Reserved. © Mohamed Elhawary. See LICENSE for full terms. Unauthorized copying, modification, or distribution is prohibited.