Auction UI

A clean, bilingual (English / العربية) React frontend for the Auction API — .NET 8 + Dapper + JWT.

Built with Vite + React + TypeScript + Tailwind CSS. Auth, a browse board with server-side search / category / price / sort / pagination, product detail with gallery, live countdown and self-refresh, bidding with anti-snipe extension, buy-it-now, hidden reserve prices, bid history, photo upload, comments, likes, a watchlist, a notifications feed, public seller profiles, and "my listings / my bids" with winning · outbid · won · lost state per lot.

Marketplace features

Feature	Where
Categories with live counts, price band, sort (ending / newest / most bids / price)	Browse board
Buy it now — instant purchase, open until the first bid lands	Lot detail
Reserve price — hidden seller minimum; bidders see only met / not met	Lot detail, sell form
Anti-snipe — a bid in the final minutes pushes the deadline out	Bid panel
Watchlist — every lot you liked, in one grid	/watchlist
Notifications — outbid, new bid, won, lost, sold, unsold, bought	Navbar bell
Public seller profile — member since, live / sold counts, total sales, their lots	/users/:id
Activity per lot — bids, watchers, views	Cards and lot detail

Prerequisites

• Node.js 18+ and npm
• .NET 8 SDK
• PostgreSQL running locally, database auction created and schema.sql applied:

  createdb -h localhost -p 5432 -U postgres auction
  psql -h localhost -p 5432 -U postgres -d auction -f ../Auction/schema.sql

  On an existing database, apply the marketplace migration instead of recreating the schema (it is additive and safe to re-run):

  psql -h localhost -p 5432 -U postgres -d auction -f ../Auction/migrations/002_marketplace.sql

• JWT signing key set in the API (user-secrets, min 32 chars) — the API won't boot without it:

  cd ../Auction
  dotnet user-secrets set "Jwt:Key" "<a-random-32+-character-secret>"

Run both (one command)

./start.sh

Starts the API on http://localhost:5241 and the UI on http://localhost:5173, and stops both on Ctrl-C. The API path defaults to the sibling ../Auction; override with:

AUCTION_API_DIR=/path/to/Auction ./start.sh

Cross-platform alternative (via concurrently):

npm run dev:all

Frontend only

npm install
npm run dev

The API base URL is read from .env (VITE_API_URL, defaults to http://localhost:5241). CORS for http://localhost:5173 is already whitelisted in the API.

Scripts

Script	Description
npm run dev	Vite dev server (frontend only)
npm run dev:all	API + frontend together
npm run build	Type-check + production build
npm run preview	Serve the production build

Notes

• Uses JWT stored in localStorage; a 401 clears the session and redirects to login.
• Language toggle (EN / ع) is in the navbar; Arabic switches the layout to RTL.
• Auction times are DateTimeOffset (UTC on the wire), rendered in the viewer's local time.
• The reserve amount is only ever sent to the lot's seller; other viewers receive hasReserve / reserveMet flags, so the number cannot leak through the API.
• Anti-snipe timing is server config (Auction:SnipeGuardMinutes / SnipeExtendMinutes); set SnipeExtendMinutes to 0 to switch extensions off.