CugrancaXXI

CugrancaXXI is a comprehensive commercial management system specialized for importing companies that handles the complete cycle of import operations. The system manages key documents such as invoices (invoiceNumber), bills of lading (blNumber), port dates (portDate), and importer dates (importerDate), controlling the entire process from purchase order to final delivery. It includes production modules for local manufacturing, international supplier management, inventory control with weights and dimensions for logistics, packaging, and detailed tracking of costs and payments for both imports and local productions, offering complete visibility of each transaction's status and enabling the generation of operational reports for strategic decision-making.



Technologies used:

Front End:

Modern and well-structured technology stack that combines React 19 with TypeScript for robust typing, using Vite as a bundler for rapid development. The architecture implements Zustand with persistence for global state management and authentication, along with React Hook Form and Zod for typed form validation. The system uses Tailwind CSS v4 for modern styling and React Router v7 for declarative navigation, complemented with TanStack React Table for complex tables and Recharts for data visualization. Notable is the use of @react-pdf/renderer for PDF document generation and axios with retry for resilient HTTP communication, showing good error handling practices with Sonner for notifications and a custom component system through fazt-web-module. The application follows clean architecture patterns with separation of concerns between containers, components, and contexts, implementing a responsive and accessible design with optimized loading state handling and centralized UI management.

  • React

  • TypeScript

  • Vite

  • Tailwind

Back End:

Robust enterprise architecture built with NestJS that implements modern design patterns such as dependency injection, functional modules, and TypeScript decorators for scalable and maintainable code. The system uses TypeORM with MySQL for data persistence with a well-normalized relational schema, implementing ACID transactions with QueryRunner to guarantee integrity in complex operations. Security is handled with JWT and Passport.js through local and JWT strategies, with decorative guards for route protection and DTO validation with class-validator and class-transformer. The RESTful API follows standard HTTP conventions with robust error handling and CORS configured for multiple origins. Notable are the repository pattern, service layer with separated business logic, and data transfer objects for validation. The system handles complex use cases such as financial calculations with Decimal.js for monetary precision, report generation with complex data aggregations, and import workflows with states and transitions. Configuration is environment-aware with @nestjs/config and the database is automatically initialized with seed data, demonstrating good configuration practices and deployment-ready architecture.

  • MySql

  • NestJS

  • TypeORM



Code not available