# Replit.md ## Overview WarehouseTrack Pro is a comprehensive warehouse inventory management system built as a full-stack web application. The system provides real-time inventory tracking, stock movement management, document generation, barcode scanning capabilities, and reporting features. It's designed to streamline warehouse operations with an intuitive interface optimized for both desktop and mobile use. ## User Preferences Preferred communication style: Simple, everyday language. ## System Architecture ### Frontend Architecture - **Framework**: React 18 with TypeScript and Vite for build tooling - **UI Library**: shadcn/ui components built on Radix UI primitives for accessibility - **Styling**: Tailwind CSS with CSS custom properties for theming - **Routing**: Wouter for lightweight client-side routing - **State Management**: TanStack Query (React Query) for server state management - **Form Handling**: React Hook Form with Zod validation - **Mobile-First Design**: Responsive layout with bottom navigation for mobile, traditional header for desktop ### Backend Architecture - **Runtime**: Node.js with Express.js framework - **Language**: TypeScript with ES modules - **Database ORM**: Drizzle ORM for type-safe database operations - **Schema Validation**: Zod schemas shared between client and server - **Development Server**: Vite middleware integration for hot module replacement - **API Design**: RESTful endpoints with JSON responses ### Data Storage Architecture - **Database**: PostgreSQL with Neon serverless hosting - **ORM**: Drizzle ORM with PostgreSQL dialect - **Schema Management**: Code-first approach with migrations in `./migrations` - **Data Models**: Products, stock movements, documents, orders, and notifications - **Relationships**: Foreign key constraints between products and stock movements ### Core Data Models - **Products**: SKU-based inventory items with stock levels and thresholds - **Stock Movements**: Audit trail for all inventory changes (in/out/adjustments) - **Documents**: Generated PDFs for delivery notes, packing lists, shipping labels - **Orders**: Customer order management with item tracking - **Notifications**: System alerts for low stock and other events ### Development and Build System - **Build Tool**: Vite for frontend bundling and development server - **Backend Build**: esbuild for Node.js server bundling - **TypeScript**: Strict type checking across client, server, and shared modules - **Path Aliases**: Clean imports using @ for client code and @shared for common types - **Hot Reload**: Development mode with automatic server and client refresh ### Component Architecture - **Design System**: Consistent UI components using shadcn/ui - **Layout Components**: Header, bottom navigation, and floating action button - **Page Components**: Dashboard, inventory, documents, scanner, and reports - **Feature Components**: Modular components for inventory management, document creation, and scanning - **Shared Components**: Reusable UI elements like alerts, dialogs, and forms ### Document Generation System - **PDF Creation**: Server-side PDF generation for warehouse documents - **Templates**: Predefined templates for delivery notes, packing lists, shipping labels - **Dynamic Content**: Documents populated with real inventory and order data - **Download System**: Client-side PDF download functionality ### Mobile Optimization - **Responsive Design**: Mobile-first approach with tablet and desktop breakpoints - **Touch Interface**: Large touch targets and mobile-friendly navigation - **Barcode Scanner**: Camera-based scanning with manual entry fallback - **Offline Considerations**: Local state management for poor connectivity scenarios ## External Dependencies ### Database and Hosting - **Neon Database**: Serverless PostgreSQL hosting with connection pooling - **Drizzle Kit**: Database migration and schema management tools ### UI and Styling - **Radix UI**: Accessible component primitives for complex UI elements - **Tailwind CSS**: Utility-first CSS framework with custom design tokens - **Lucide React**: Icon library for consistent iconography - **Google Fonts**: Roboto font family for typography ### Development Tools - **Vite**: Frontend build tool and development server - **TypeScript**: Static type checking and enhanced developer experience - **React Query**: Server state management and caching - **React Hook Form**: Form state management and validation - **Zod**: Runtime schema validation for type safety ### Replit Integration - **Replit Vite Plugins**: Development environment integration and error handling - **Runtime Error Modal**: Development-time error overlay for debugging ### Node.js Backend Dependencies - **Express.js**: Web application framework for API routes - **Connect PG Simple**: PostgreSQL session store for Express - **Date-fns**: Date manipulation and formatting utilities - **UUID Generation**: Unique identifier creation for database records