Nkyi Brothers Cosmetics Manager — Inventory & POS System

A full-featured PWA-based inventory management and point-of-sale system for cosmetics retailers, featuring real-time analytics, offline functionality, and integrated payment processing.

Overview

Cosmetics Manager is a comprehensive business management solution designed for cosmetics retailers to streamline operations. Built as a Progressive Web App, it eliminates the need for traditional installations while providing full offline functionality through service workers and Firebase Firestore persistence. The system combines inventory tracking, point-of-sale processing, order management, and detailed business analytics in a single, responsive interface. Features include real-time inventory monitoring with low-stock alerts, multi-channel payment processing (cash and MoMo), customer relationship management, and comprehensive sales reporting with visual analytics. The application supports mobile and desktop use cases and can be installed on any device, making it ideal for retail environments from small boutiques to larger distribution networks.

The challenge

The primary challenge was creating a sophisticated business management system that could function seamlessly offline while maintaining real-time data synchronization with Firebase. Key challenges included: 1. Implementing efficient offline-first architecture with Firestore persistence. 2. Building a responsive POS system that handles complex cart operations and multiple payment methods. 3. Creating a comprehensive analytics dashboard with real-time data visualization. 4. Designing an intuitive inventory management interface that handles stock tracking, low-stock alerts, and restock workflows. 5. Ensuring PWA compatibility across multiple device types and browsers. 6. Managing state complexity across multiple interconnected features (inventory, orders, customers).

Our approach

1. Frontend Architecture: Built with React 18 and TypeScript for type safety, using Vite for optimal build performance. 2. Data Management: Integrated Firebase Firestore with IndexedDB persistence for seamless offline functionality and real-time synchronization. 3. Service Worker: Implemented app-shell caching strategy with custom service worker for offline-first UX. 4. UI Framework: Utilized shadcn/ui components built on Radix UI primitives for accessible, customizable interfaces 5. State Management: Used Zustand for configuration store and React Query for efficient data fetching and caching. 6. Payment Integration: Integrated MoMo payment gateway alongside cash payment support with QR code generation. 7. Analytics: Implemented Recharts for interactive revenue trends, weekly order patterns, and category-based sales analysis. 8. Responsive Design: Built with Tailwind CSS utility-first approach for mobile-first responsive design. 9. Testing: Configured Vitest for unit testing and ESLint for code quality assurance.

What we built

  • Dashboard Analytics: Real-time revenue tracking, 30-day revenue trends, weekly order patterns, category-based sales distribution, low-stock alerts, pending order overview.
  • Point of Sale (POS): Product search and filtering, cart management, discount application, multiple payment methods (cash/MoMo), digital receipt generation, payment link generation with QR codes.
  • Inventory Management: Product CRUD operations, category management, stock level tracking, bulk restock functionality, product featured/new arrival tagging, image gallery support, price and sale price management.
  • Order Management: Order status workflow (pending → confirmed → preparing → ready → completed/cancelled), order history with filters and search, order details with item breakdown, cancellation reason tracking, customer communication notes.
  • Customer Management: Customer directory, order history per customer, contact information storage, customer segmentation.
  • Product Categories: Category CRUD, category-based filtering, hierarchical organization.
  • Reports & Analytics: Revenue reports, order volume tracking, product performance analysis, category performance metrics.
  • Dark Mode: System-wide dark theme toggle for comfortable use in various lighting conditions.
  • PWA Features: Offline functionality, installable on home screen, app-like experience, background sync.
  • Authentication: Firebase authentication with secure login/logout, role-based access control.
  • Mobile Optimization: Touch-friendly interface, responsive layouts, fast mobile performance.

Outcome

  • 100% Offline Capability: Application functions fully offline with automatic synchronization when connection restored.
  • Sub-2s Load Time: Optimized bundle splitting and caching resulting in fast initial load and navigation.
  • 60+ Components: Built reusable component library covering all UI needs from basic buttons to complex data tables.
  • Real-time Analytics: Dashboard displays live revenue metrics, order tracking, and inventory status with automatic updates.
  • Multi-platform Support: Fully responsive across desktop, tablet, and mobile; installable as standalone PWA.
  • Efficient Inventory: Low-stock alerts and restocking workflows reduce stockouts by 40% (estimated).
  • Payment Flexibility: Support for both cash and digital payments with payment link generation and QR codes.
  • Production Ready: Deployed with Firebase backend, automated CI/CD, and error tracking.