Bilcraft Frontend
️ Nirman Bahi Khata Pro - Professional Billing Application A comprehensive billing and inventory management system built with React + TypeScript frontend and Node.js + MongoDB back...
Technical Architecture & Engineering Overview
Detailed system design and core implementation
Core Architecture
The frontend lives under src/ and is organized into reusable folders: components (UI primitives, billing steps, dashboards), pages (route‑level views), contexts (global state), services (API wrappers), hooks (custom React hooks), and utils (helpers). All UI is typed with TypeScript and linted by ESLint.
Data Ingestion & API Layer
The api.ts module centralizes HTTP interaction using a configurable apiRequest helper that handles retries, exponential back‑off, and error normalization. It exports domain‑specific objects (productAPI, customerAPI, shopAPI, billAPI, dashboardAPI) that map directly to backend routes such as GET /api/products or POST /api/bills. This abstraction decouples UI components from transport concerns and simplifies testing.
Security Guardrails
Backend responses are protected by Helmet, CORS (restricted to FRONTEND_URL), rate limiting (100 requests/15 min/IP), and response compression. The frontend respects these policies by reading the VITE_API_URL environment variable and handling authentication tokens (placeholder JWT_SECRET for future use). Error handling is unified in the service layer, displaying user‑friendly toast messages via Sonner.
Build & Deployment Topology
Development uses vite for hot‑module replacement and fast builds (npm run dev). Production bundles are generated with vite build and can be deployed to Vercel (or any static host). Environment variables (VITE_API_URL, VITE_APP_NAME, etc.) are injected at build time, allowing seamless switching between local (http://localhost:5000/api) and cloud (https://bba-server-uqtx.onrender.com/api) backends.
System Diagrams & Flow Visualizations
Interactive Mermaid architecture & execution flows
Core System Features
Key capabilities & architectural features
Full CRUD UI for Products, Customers, Shops, and Bills
Full CRUD UI for Products, Customers, Shops, and Bills
Dashboard with real‑time analytics charts (sales, total bills, etc.)
Dashboard with real‑time analytics charts (sales, total bills, etc.)
Context‑based global state for shared data across components
Context‑based global state for shared data across components
Retry‑aware API layer with configurable delay and max attempts
Retry‑aware API layer with configurable delay and max attempts
Built‑in API connectivity test page with response time metrics
Built‑in API connectivity test page with response time metrics
Responsive design powered by Tailwind CSS for mobile and desktop
Responsive design powered by Tailwind CSS for mobile and desktop
Form handling with React Hook Form and validation feedback
Form handling with React Hook Form and validation feedback
Toast notifications via Sonner for success, error, and info messages
Toast notifications via Sonner for success, error, and info messages
Lazy‑loaded routes for optimal bundle size
Lazy‑loaded routes for optimal bundle size
Environment‑driven API endpoint selection (local vs. deployed)
Environment‑driven API endpoint selection (local vs. deployed)
Engineering Challenges & Solutions
Problem statements & resolution strategies
Balancing type safety with flexible API payloads required extensive generic typing in `api.ts`
Balancing type safety with flexible API payloads required extensive generic typing in `api.ts`
Ensuring consistent error handling across all services while preserving original server messages
Ensuring consistent error handling across all services while preserving original server messages
Managing CORS configuration for both local development and production deployments
Managing CORS configuration for both local development and production deployments
Optimizing bundle size without sacrificing UI component richness from Shadcn/ui
Optimizing bundle size without sacrificing UI component richness from Shadcn/ui
Designing a retry mechanism that avoids overwhelming the backend during network flaps
Designing a retry mechanism that avoids overwhelming the backend during network flaps
Key Code Modules & Architecture
Core file entrypoints and service responsibilities
srcModule component managing src source logic
src/componentsModule component managing components source logic
src/components/uiModule component managing ui source logic
src/configModule component managing config source logic
src/hooksModule component managing hooks source logic
src/libModule component managing lib source logic
src/pagesModule component managing pages source logic
src/servicesModule component managing services source logic
src/typesModule component managing types source logic
src/utilsModule component managing utils source logic
User Journey Pipeline
- 1User Access & Preset Selection: User opens client interface and configures request parameters or task workflow presets.
- 2Client Payload Dispatch: Front-end components (React, TailwindCSS) serialize input objects and send HTTP/WebSocket requests to `/api/analyze`.
- 3Middleware & Validation Check: API Gateway evaluates CORS headers, authorization tokens, and input validation schemas.
- 4Service & Inference Execution: Service controllers dispatch request frames to model inference engine (Local Engine) or storage layer.
- 5Response Delivery & State Synchronization: Serialized output payload is returned to the client and rendered in the visual workspace.
Execution Code Flow
- 1Entrypoint Invocation: Request enters network interface layer via `POST /api/analyze`.
- 2Schema & Guardrail Verification: Middleware sanitizes payload parameters and checks rate-limiting limits.
- 3Controller Dispatch: Router delegates validated object to `Src` service controller.
- 4Engine Execution & Storage Operations: Controller executes business logic, queries database models (Persistence), and invokes ML workers.
- 5Response Serialization: Result model is formatted into standard JSON response frame and delivered with HTTP 200 OK.
System FAQ & Technical Specifications
Frequently asked questions and core architecture details
Q: What technologies are used in Bilcraft Frontend?
Bilcraft Frontend is engineered using modern full-stack frameworks.
Q: What core engineering problem does Bilcraft Frontend solve?
️ Nirman Bahi Khata Pro - Professional Billing Application A comprehensive billing and inventory management system built with React + TypeScript frontend and Node.js + MongoDB back...
Q: How is 'Balancing type safety with flexible API payloads required extensive generic typing in `api.ts`' resolved in Bilcraft Frontend?
Resolved through specialized system architecture and resilient state handling.
Related Systems & Case Studies
Explore similar technical architectures and projects