§01
Overview
- What it is: Single-page app for call-center/CRM operators — category picker, product search, cart assembly, modifiers, recommended products, total. Works on top of Bitrix24 (fields
ID,NAME,UF_QUANTITY— Bitrix24 userfields). Data is pulled from an external API. - Type / status / role: web-app (internal tool) / maintained / solo (44 of 45 commits — the user; 1 — root deploy).
- Active period: 2021-10-10 → 2025-12-19. Old history (2021) is legacy; the current product is the December (2025) rewrite
5217b80 Modernize CRM Cart: Next.js 16, TypeScript, shadcn/ui.
§02
Stack
- Languages: TypeScript (strict).
- Frameworks/libraries: Next.js 16 (App Router, Turbopack), React 19, TanStack Query v5, @tanstack/react-virtual (list virtualization), Zustand v5 (cart/UI store), shadcn/ui (Radix), Tailwind 3, axios, currency.js (money), latin-to-cyrillic + convert-layout (transliteration/layout for search), lucide-react.
- Infra/deploy: PM2 (
ecosystem.config.js, port 8082, nvm node 20, cwd/home/davr/chopar/crm_cart), choparpizza.uz server. Bun + yarn (both lockfiles). - Data: external REST API; backend — Bitrix24 CRM.
- Notable tooling: shadcn/ui (components.json).
§03
What was shipped
Old messages are junk ("asd", "dsad", "sss"); the December rewrite — clean ones.
- Modernization on Next 16 + shadcn/ui (
5217b80) — full rewrite of the legacy version. - Search with transliteration and layout conversion (
3bf9ee1 translit, seehooks/use-products.ts). - Virtualized product list (
components/products/product-list.tsx). - Cart with modifiers (
5af701a ability to remove modifier,c3c454e stock,6a0d6aa fix of stop text). - Recommended products (
bfc5359 related products). - PM2/deploy fix (4 commits: node v20.19.0 path, cwd, launching next via node).
- Volume: 45 commits, ~44 by the user. Activity in short bursts; the major burst — the December 2025 rewrite.
§04
Technical challenges
- Product list virtualization (
product-list.tsx,@tanstack/react-virtual):useVirtualizer({ count, estimateSize: () => 44, overscan: 8 })with absolute row positioning inside a 520px scroll container. → performant rendering of a large catalog without lag; understanding of virtualization. - Smart search with transliteration and layout switching (
hooks/use-products.ts):convert-layout/ru+latin-to-cyrillic—product.NAME.includes(translit(lowerSearch)), so the operator finds a product even when typing in Latin script or in the wrong keyboard layout (a common pain point for RU/UZ input). → considered UX for the domain locale. - Optimistic cart updates (
stores/cart-store.ts, Zustand):optimisticIncrement/Decrement/Remove+isUpdatingflag — instant UI response before the server confirms (decrement with guardUF_QUANTITY > 1). → optimistic UI pattern over a CRM backend. - Monetary calculations via
currency.js(no float artifacts). - Integration with Bitrix24 (
UF_*userfields) — adapting the UI store to the CRM schema.
§05
AI-assisted development
- Sessions found: 0 for the exact path. Locally there is a
.claude/(settings) — the project was likely developed with Claude Code, but sessions are not saved in the user profile (or were deleted / are on another machine). - What was done with AI: indirectly — the December rewrite on Next 16/shadcn with clean commit messages looks AI-assisted, but there are no direct sessions.
- Without session data — no inferences about the AI workflow.
§06
Achievements & metrics
- Solo tool, rewritten on a modern stack (Next 16 / React 19 / TanStack / Zustand / shadcn).
- 3 specific engineering techniques in a small volume: virtualization, transliterated search, optimistic UI.
- Real production use (PM2, Bitrix24 CRM of the Restaurant chain (UZ) chain).
- Modest scale (single-page tool, ~5 component groups).