🔖 Introduction
About the project
An online platform designed to streamline the management of a dairy business. It helps in registering employees, storing information about dairy products, and tracking the milk received from farmers. The system facilitates the exchange of liquid milk for processed dairy products and keeps detailed records of all transactions. Additionally, it generates invoices for transactions, ensuring smooth and efficient operations in the dairy supply chain.
🤔 Problem space
Problems to solve/Requirements to Create
The Milk Shop app needs to address the following requirements:
Allow clients to register and manage employees, track milk received from farmers, and generate invoices.
Enable clients to search for milk farmers by name or NIC and modify product prices when entering them into bills.
Ensure the app records transaction details, provides a calendar view for scheduling, and allows clients to edit prices for flexibility in billing.
👉 Search Feature: Implement a search feature for finding milk farmers by name or NIC.
Current Solution
Users currently manually search through extensive lists of milk farmers without an efficient way to filter or locate them quickly. There is no search functionality built into the product.
How do we know it is a problem
The client mentioned that finding milk farmers manually takes a lot of time and effort, leading to delays in processing transactions.
👉 Price Modification: Enable modification of product prices during billing.
Current Solution
Currently, users manually adjust prices during billing outside the app, making it prone to human error. The product does not support dynamic price updates during the billing process.
How do we know it is a problem
The client expressed difficulty in keeping prices accurate during transactions and mentioned that modifying prices manually often causes billing inconsistencies.
👉 Employee Registration: Allow for easy employee registration and management within the app.
Current Solution
Employee records are maintained manually, often using spreadsheets or separate tools. The app does not offer a centralized employee management feature.
How do we know it is a problem
The client mentioned that managing employees manually is time-consuming and leads to inefficiencies, as employee data is scattered across different systems.
👉 Product Management: Store and manage detailed information about dairy products.
Current Solution
Product details, such as names and prices, are manually logged and updated outside the app. The system doesn’t offer a streamlined way to store or manage product details.
How do we know it is a problem
The client shared that tracking products manually causes mismatches in inventory and delays in product management.
👉 Milk Tracking: Track milk received from farmers, including quantity and quality.
Current Solution
Milk received from farmers is tracked manually in external documents, which may not capture quality details accurately. The app does not include automated tracking for milk data.
How do we know it is a problem
The client noted that the current manual tracking method leads to discrepancies in inventory and milk quality, affecting product delivery.
👉 Invoice Generation: Automatically generate invoices for each transaction.
Current Solution
Invoices are created manually, using external tools or paper, which can result in human error. The product lacks an integrated invoice generation system.
How do we know it is a problem
The client reported that manual invoicing is time-consuming and often results in errors, causing inconsistencies in billing and customer dissatisfaction.
👉 Transaction History: Record and store all transaction details.
Current Solution
Transactions are logged manually, often in spreadsheets or paper records, which are not integrated into the product. The app does not provide a history of all transactions in one centralized system.
How do we know it is a problem
The client mentioned that keeping track of transaction history manually makes it difficult to retrieve data quickly, resulting in delays in auditing and reporting.
👉 Calendar Integration: Integrate a calendar view to track tasks, deliveries, shifts, and deadlines.
Current Solution
Schedules are manually managed in external tools, such as physical calendars or spreadsheets, with no integration within the app. This makes it harder to stay on top of deadlines and shifts.
How do we know it is a problem
The client shared that they often miss important deadlines and deliveries because the schedules are not integrated into the app, causing confusion and delays.
👉 Data Security: Ensure data security for sensitive information.
Current Solution
Data is stored in unencrypted formats, often relying on external systems that don’t offer advanced security features. The app does not implement robust security measures for sensitive information.
How do we know it is a problem
The client raised concerns about unauthorized access to sensitive data and expressed worries about non-compliance with security regulations.
Goals
Company objective 🎯
💡 Create an efficient Dairy Management System to streamline milk tracking, invoicing, and employee management.
Project goals
Project goal: Track milk received from farmers and manage dairy products seamlessly.
Project goal: Implement a search feature for quick access to farmer records.
Project goal: Enable real-time price modification during billing.
Project goal: Develop an employee registration and management system.
Project goal: Store transaction history for accurate financial records.
Project goal: Integrate a calendar to track tasks, deliveries, and shifts.
Project goal: Ensure secure data storage and encryption for sensitive information.
Project goal: Use React, Express, and Mongoose for scalability and consistency across the application.
Project goal: Implement ShadCN and Tailwind CSS for a clean, modern, and simplified UI/UX experience.
User Stories
Cashier
The Cashier is responsible for handling customer transactions, processing sales, managing product exchanges, and generating invoices.
Goals: Efficiently process sales transactions, track milk deliveries, and manage product exchanges.
Needs: An intuitive POS system to quickly process transactions, search for milk farmers, modify product prices during billing, and generate accurate invoices.
Other characteristic: Works under time pressure, so the system should be fast, responsive, and easy to navigate for quick operations.
Admin
The Admin manages the overall system, ensuring smooth operation, managing employees, overseeing transactions, and ensuring data security.
Goals: Oversee the dairy store’s operations, manage employee registrations, monitor transactions, and ensure data security.
Needs: Access to detailed transaction history, the ability to register and manage employees, and secure data handling features for confidentiality and privacy.
Other characteristic: Requires access to reports, data analytics, and user management to ensure smooth store operations and address any issues.
🌟 Design space
UI Design
Main Dashboard Overview
The Main Dashboard has two primary tabs:
Transaction History
Purchase Milk & Dairy Products
Purchase Milk & Dairy Products
Includes a billing phase for processing milk and dairy product purchases.
After successfully entering a bill, it automatically navigates to Transaction History.
Transaction History
Other Pages
Development Phase
Technology Stack Selection
Frontend - React.js with Redux Toolkit (RTK), TanStack Query, Tailwind CSS, ShadCN
Why React.js?
Component-Based Architecture: React allows us to break down the UI into reusable components, making the codebase modular, maintainable, and scalable as the application grows.
Efficient UI Updates: With the virtual DOM, React provides fast and responsive UI updates, ensuring smooth user interactions.
Rich Ecosystem: React has a large community and vast library support, enabling faster development and the ability to leverage pre-built solutions.
Why Redux Toolkit (RTK)?
State Management: RTK provides a simplified approach to managing application state, reducing the need for boilerplate code compared to traditional Redux.
Developer Efficiency: Includes tools for data fetching, caching, and state synchronization, streamlining the development process.
Simplified Reducers and Actions: RTK reduces the complexity of managing reducers and actions with its built-in utilities and custom hooks.
Why TanStack Query for Data Fetching?
Automatic Data Synchronization: Keeps data, such as products, employees, and transactions, up-to-date without unnecessary API calls.
Background Fetching & Caching: Minimizes repeated requests and optimizes performance by caching data and refetching only when necessary.
Optimistic Updates: Enhances user experience by allowing updates to the UI before server confirmation, making the application feel more responsive.
Error Handling & Retry Logic: Effectively handles network failures and retries, ensuring the app remains functional in cases of temporary issues.
Why Tailwind CSS?
Utility-First Approach: Tailwind allows rapid development of custom designs without needing to write a lot of custom CSS.
Consistency and Flexibility: Tailwind ensures consistency across the app, while its flexibility allows developers to create unique designs quickly.
Responsive Design: Built-in responsive utilities ensure the UI looks great on all devices.
Why ShadCN?
Modular UI Components: ShadCN enables a streamlined, consistent, and reusable UI component structure, helping maintain UI consistency across the application.
Customizable: It allows for easy customization of UI elements to meet specific branding and functional requirements.
High-Level Architecture Diagram
Description: The system follows a client-server architecture with the React.js frontend making calls to an Express.js server that handles the business logic. MongoDB is used to store dynamic product, employee, and transaction data. The backend handles user authentication, data validation, and communication with the database, while the frontend handles UI rendering and interaction.
The backend uses REST APIs for data exchange, and the frontend uses TanStack Query to fetch and cache data for smooth user interactions.
Entity-Extended Relationship Diagram
Description:
The Product entity is linked to Transactions, where each transaction references the products purchased or sold.
The Employee entity is related to Transactions, where employees can process sales and transactions.
The Transaction History is linked to both Employees and Products, recording sales transactions, products sold, and employee details for auditing and tracking.
Key Features of the Software
1. Employee Registration
Decision: Implemented an easy-to-use registration and management system to add, update, and delete employee information, ensuring smooth operation management.
Implementation: Used MongoDB to store employee data with necessary fields like role, shift times, and login credentials for secure access.
2. Product Management
Decision: Designed the product management feature to store detailed information about dairy products like milk, butter, and cheese.
Implementation: Products are stored in MongoDB with attributes like product name, category, price, and stock levels, providing easy access and updates.
3. Milk Tracking
Decision: Added a milk tracking feature to monitor the quantity and quality of milk received from farmers, ensuring accurate inventory.
Implementation: Each milk entry is linked to a transaction record to track milk received and product exchange.
4. Invoice Generation
Decision: Automatically generates invoices for each transaction, reducing the chances of human error in billing.
Implementation: Invoices are generated based on the transaction details stored in MongoDB, with features like discounts and tax calculations included.
5. Transaction History
Decision: Implemented transaction history for tracking all purchases, sales, and exchanges of dairy products.
Implementation: All transactions are logged in MongoDB, providing full traceability of actions by employees and clients.
7. Data Security with Clerk
Decision: To ensure secure user authentication and seamless identity management, we implemented Clerk for user authentication.
Implementation: Clerk is used for handling secure sign-up, sign-in, and user sessions. It provides features like multi-factor authentication (MFA) and passwordless authentication, ensuring high levels of security for user accounts. Clerk also integrates easily with the React.js frontend, simplifying user management while maintaining robust security practices.
Challenges Faced and Solutions
Problem 1: Real-Time Invoice Generation and Transaction Updates
Simultaneous updates caused delays and inconsistencies in transaction history.
Solution 1:
Used Optimistic UI Updates for immediate feedback afor real-time sync of transaction history using RTK querry.
Problem 2: Data Security and Authentication
Ensuring secure access to sensitive data for authorized users only.
Solution 2:
Integrated Clerk for secure authentication with role-based access control to restrict sensitive data access.
Problem 3: Milk and Product Data Tracking
Real-time tracking of milk quantity and product details was challenging.
Solution 3:
Used TanStack Query for automatic data synchronization and React Query for efficient background fetching.
Problem 4: Slow Transaction History Search
Search functionality was slow with a growing transaction history.
Solution 4:
Optimized search with MongoDB indexing and added pagination for faster access to recent transactions.
Future Vision / next steps
Long-term Vision:
Online Purchases: Add online product purchasing with a payment gateway.
Mobile App: Launch a mobile version for easy management.
Real-time Analytics: Track sales, inventory, and milk quality with live updates.
AI Automation: Automate workflows like pricing and inventory management with AI.
Data Visualizations: Add charts for tracking sales and inventory.
Next Iteration (V.2):
UI/UX Improvements: Refine navigation and add interactive data visualizations.
Advanced Search: Improve filtering for transaction history.
Reports: Generate detailed sales and inventory reports.
Future Enhancements (V.3):
AI Pricing Recommendations: Automate pricing suggestions based on trends.
Payment Integration: Enable seamless online payments.
Employee Management: Add tools for scheduling and payroll tracking.
Get visibility from recruiters & peers