How thanhdat2508/blitz-client works
This is a React starter kit with a sample product-management feature. The main user flow is navigating to the products page, searching or refreshing the list, and creating a sample product; product data is fetched through feature API hooks and Axios, then rendered as cards. The README documents broader routing, query, UI, auth-token, hook, formatting, and storage capabilities. Some route and feature API implementations were not sampled, so their wiring is shown only where the README or sampled code supports it.
Main entry points: product-list.tsx Product List · api-client.ts Axios Client · main.tsx App Bootstrap · products.tsx Products Route
Components 20
App and Routing
- App Bootstrap
src/main.tsx - Route Tree
src/routeTree.gen.ts - Products Route
src/routes/products.tsx - Home Route
src/routes/index.tsx
Products Feature
- Product List
src/features/products/components/product-list.tsx - Product Card
src/features/products/components/product-card.tsx - Product Types
src/features/products/types/product.ts - Fetch Products
src/features/products/api/get-products.ts - Create Product
src/features/products/api/create-product.ts
Data and Utilities
- Query Provider
src/main.tsx - Axios Client
src/lib/api-client.ts - Search Debounce
src/hooks/use-debounce.ts - Format Helpers
src/utils/format.ts - Storage Hook
src/hooks/use-local-storage.ts - Storage Helper
src/utils/storage.ts
Shared UI
- Common Widgets
src/components/common/empty-state.tsx - UI Primitives
src/components/ui/button.tsx
Other components
- Visitor
- Product API
- Browser Storage
Connections 19
- Visitor → App Bootstrap: opens app
- App Bootstrap → Route Tree: loads routes
- App Bootstrap → Query Provider: provides query
- Visitor → Products Route: navigates
- Visitor → Home Route: navigates
- Products Route → Product List: renders
- Product List → Fetch Products: queries
- Product List → Create Product: mutates
- Product List → Search Debounce: debounces search
- Product List → Product Card: renders results
- Product List → Common Widgets: shows states
- Fetch Products → Axios Client: requests data
- Create Product → Axios Client: sends mutation
- Axios Client → Product API: calls API
- Axios Client → Browser Storage: reads token
- Storage Hook → Storage Helper: reads and writes
- Storage Helper → Browser Storage: accesses
- Product List → UI Primitives: uses controls
- Home Route → UI Primitives: uses controls