╔══════════════════════════════════════════════════════╗ ║ ║ ║ F O R G E — F I N E A U C T I O N S ║ ║ Real-Time Bidding × Angular 21 ║ ║ ║ ╚══════════════════════════════════════════════════════╝
A vintage-aesthetic, real-time auction frontend! Built to feel like a Christie's catalogue, engineered to move like a trading floor.
forge-engine-ui is the Angular frontend for the FORGE auction platform — a production-grade, real-time bidding system. While most auction UIs feel transactional and cold, FORGE leans into the theatre of live bidding — parchment tones, serif typography, countdown clocks, and live WebSocket feeds that update without a single page refresh.
This is not a CRUD app with a table. This is a bidding room.
| Layer | Technology |
|---|---|
| Framework | Angular 21 (Standalone Components) |
| Language | TypeScript 5.x |
| Real-time | WebSocket + STOMP over SockJS |
| Styling | Pure CSS (custom properties, no UI library) |
| HTTP | Angular HttpClient |
| Routing | Angular Router with lazy loading |
| Auth | JWT — stored in localStorage |
┌─────────────────────────────────────────────────────┐
│ LIVE AUCTIONS Real-time bid updates via WS │
│ COUNTDOWN TIMER Live end-time clock per auction │
│ ACTIVITY LOG Streaming bid history, live │
│ WALLET Top-up, balance, tx history │
│ MY BIDS Active bids + won/lost status │
│ LIST ITEM Create & schedule new auctions │
│ RESULTS Completed auction outcomes │
└─────────────────────────────────────────────────────┘
- Real-time bidding — WebSocket/STOMP connection to forge-engine; bid placed → all connected clients update instantly
- Live countdown — per-auction timer, auto-extends on last-minute bids (anti-sniping)
- Wallet system — top-up funds, locked/available balance, paginated transaction history
- JWT auth — login/register flow, token-gated routes
- Parchment aesthetic — dark warm palette, Playfair Display headings, vintage serif throughout
- Responsive — works across desktop and tablet viewports
src/app/
├── components/
│ ├── auction-lobby/ # Live auctions grid + featured lot
│ ├── auction-detail/ # Bidding room — WS, timer, activity log
│ ├── create-auction/ # List a new lot
│ ├── wallet/ # Funds management
│ ├── my-bids/ # User's active bids
│ ├── results/ # Completed auctions
│ ├── profile/ # User profile
│ ├── login/ # Auth
│ ├── register/ # Auth
│ └── navbar/ # Global navigation
├── services/
│ ├── wallet.service.ts # Balance + transaction API
│ └── websocket.service.ts# STOMP connection management
└── guards/ # Route auth guards
Prerequisites: Node 18+, Angular CLI 21, FORGE backend running on :8080
# Clone
git clone https://github.com/Ketansinghrajput/forge-engine-ui.git
cd forge-engine-ui
# Install
npm install
# Run (dev server)
ng serve
# Open
# http://localhost:4200Backend required — start FORGE first (Docker Compose recommended):
# In the FORGE repo
docker compose up -dBrowser (Angular)
│
│ SockJS handshake → HTTP upgrade
▼
FORGE Backend (Spring Boot)
│
├── /topic/auctions/{id} ← Broadcast: bid updates, price changes
├── /user/queue/errors ← Private: bid rejection reasons
└── /app/auction/{id}/bid → Send: place a bid
On auction-detail load:
- JWT fetched from localStorage
- STOMP connection established with auth header
- Subscribed to auction topic + personal error queue
- Bid placed → optimistic UI update → confirmed/rejected via WS
Auction Lobby — featured hero lot + paginated grid. Status-aware cards: ACTIVE opens bidding room, PLANNED opens detail/preview.
Bidding Room — live price tracker, countdown timer with anti-snipe extension indicator, activity log streaming in real-time, available funds validation before bid submit.
Wallet — preset amounts + custom input, mock payment flow (UPI/Card/Net Banking), paginated transaction history with CREDIT/DEBIT filter.
Built by Ketansingh Rajput
× FORGE FINE AUCTIONS × EST. MMXXVI × LIVE AUCTION ×