A modern, browser-based inventory management solution designed to eliminate the common pain points of traditional desktop applications like Vyapar. Built for reliability, real-time collaboration, and guaranteed data consistency.
Traditional inventory management apps suffer from fundamental architectural limitations. This project reimagines inventory management from the ground up, solving critical problems that plague multi-user retail environments.
The Problem with Traditional Apps:
- Requires software installation on each device
- Tied to specific devices with licensing restrictions
- Storage and update management overhead
- Device switching creates friction and downtime
Our Solution:
- Runs directly in the browser - no installation needed
- Access from any device - desktop, tablet, or mobile
- Consistent experience across all platforms
- Always up-to-date - no manual updates required
Big Win: Complete flexibility - manage your inventory from anywhere, on any device, instantly.
The Problem with Traditional Apps:
- Data sync delays between devices
- Temporary data mismatches during busy periods
- "Who updated last?" confusion
- Sync conflicts in multi-staff environments
Our Solution:
- Single source of truth - one live system
- Instant updates - everyone sees changes in real-time
- Zero sync lag - no waiting for data to propagate
- Conflict-free collaboration - built for teams
Big Win: No more confusion about which data is current - everyone always sees the same information.
The Problem with Traditional Apps:
- Sync timing creates race conditions
- Two simultaneous sales can briefly conflict
- Overselling risk during peak hours
- Stock counts can become inaccurate
Our Solution:
- Atomic stock checks - sales allowed only if stock exists at that exact moment
- Concurrency control - simultaneous sales handled safely
- Impossible to oversell - guaranteed by system architecture
- Always accurate inventory - no phantom stock
Big Win: Stock correctness is mathematically guaranteed, not just "usually right."
The Problem with Traditional Apps:
- Billing, stock updates, and records are separate features
- Data can drift if sync fails or process is interrupted
- Ghost stock entries or missing bills
- Manual reconciliation required
Our Solution:
- Single atomic transaction:
Sale → Stock Update → Bill Generation → Email - Either all happen or none happen - no partial states
- No mismatched records - guaranteed consistency
- Zero reconciliation - system maintains integrity automatically
Big Win: Your books are always accurate - no ghost inventory or missing invoices.
The Problem with Traditional Apps:
- Difficult to track who made changes
- Limited audit trail
- No clear history of stock adjustments
- Accountability gaps in multi-staff shops
Our Solution:
- Every action is logged with user, timestamp, and details
- Complete audit trail:
- Sales transactions
- Stock adjustments
- User actions
- System events
- Full accountability - know exactly who did what and when
- Easy investigation - trace any discrepancy to its source
Big Win: Complete visibility into all operations - perfect for managing teams.
The Problem with Traditional Apps:
- Fixed, rigid workflows
- Your business must adapt to the software
- Feature overload with unnecessary complexity
- One-size-fits-all approach
Our Solution:
- Core rules-based design - built around fundamental principles
- Adaptable workflows - customize to your business needs
- Focused functionality - correctness over feature bloat
- Clean, controllable system - you're in charge
Big Win: The system adapts to your business, not the other way around.
The Problem with Traditional Apps:
- Manual app updates required
- Version fragmentation across devices
- Old versions cause compatibility issues
- Users on different versions create problems
Our Solution:
- Browser-based = always latest version automatically
- Zero user maintenance - updates happen seamlessly
- No version conflicts - everyone uses the same version
- Instant feature rollout - new capabilities available immediately
Big Win: Your team never worries about updates - the system is always current.
- Web-based architecture for universal access
- Real-time database synchronization for instant updates
- Transaction-based operations for data integrity
- Comprehensive audit logging for accountability
- Responsive design for any device
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Internet connection
- Node.js installed on your machine
Before running the application, you must configure your environment variables:
- Navigate to the
server/directory. - Duplicate the
server/.env.examplefile and rename it to.env. - Open the new
.envfile and fill in your actual credentials (MongoDB URI, Email User/Pass, Gemini API Key, etc.). Note: The application (specifically features like emails and AI chat) will fail to run or operate correctly if these variables are missing.
Simply navigate to the application URL in your browser and log in. Your inventory management system is ready to use.
- Retail shops with multiple staff members
- Warehouses requiring real-time stock visibility
- Multi-location businesses needing centralized inventory
- Growing businesses that need flexibility and scalability
- Any business tired of sync issues and data inconsistencies
- Secure authentication and authorization
- Role-based access control
- Encrypted data transmission
- Automated backups
- Disaster recovery ready
- Inventory Management - Add, update, and track products
- Sales Processing - Quick and accurate transaction handling
- Bill Generation - Automatic invoice creation
- Stock Alerts - Low stock notifications
- Reporting - Comprehensive business insights
- Multi-user Support - Team collaboration built-in
- Audit Trails - Complete action history
Contributions are welcome! Please feel free to submit issues or pull requests.
[Specify your license here]
For questions or support, please contact [your contact information]
This isn't just another inventory management system - it's a fundamental rethinking of how inventory should work in a modern, collaborative environment. By eliminating installation requirements, guaranteeing data consistency, and providing real-time visibility, we've created a system that just works - reliably, every time.
No sync issues. No overselling. No confusion. Just accurate, real-time inventory management.
- React + Vite - Lightning-fast development with modern build tooling
- Tailwind CSS - Utility-first CSS framework for rapid UI development
- Framer Motion - Production-ready animations
- Lucide React - Modern icon library
- Node.js / Express API - Robust server-side architecture
- MongoDB - Flexible NoSQL database for scalable data management
Our design philosophy prioritizes the retailer experience:
- More attractive - Premium, professional interface
- More useful - Feature-rich with business-critical tools
- Easier to use - Intuitive workflows designed for daily operations
- Business-oriented model - Built around real retailer needs
The customer interface is intentionally streamlined:
- Simple and clean - No unnecessary complexity
- Attractive but minimal - Focus on usability over flashiness
- Easy to understand - Intuitive for all users
- Quick interactions - Fast, efficient user experience
Our system combines QR code technology with OCR (Optical Character Recognition) for seamless transactions:
1. Purchase & Data Generation
- Items are purchased and MongoDB generates a unique ID
- Bill data is saved in MongoDB
- The saved data is converted into a string
- That string is encoded into a QR code / barcode
2. User Options Users can interact with their bills in two ways:
- Upload a printed bill - Take a photo and upload
- Use inbuilt camera scanner - Scan directly in the app
3. OCR Processing
- OCR extracts bill details from the image
- Data is automatically parsed and validated
- Information is ready for retailer verification
4. Retailer Interaction
- User shows the QR code to the retailer
- Retailer app scans the QR code
- QR code is converted back into string / ID
- System fetches complete data from MongoDB
- Purchase is verified and completed instantly
- Paperless option - Digital bill storage
- Quick verification - Instant QR code scanning
- Error reduction - OCR eliminates manual entry
- Flexible workflow - Multiple input methods
We chose Vite with React as our frontend stack for several strategic reasons:
- Near-instant hot module replacement (HMR)
- Optimized build output using Rollup
- Lightning-fast cold starts
- Frontend deployed on Vercel (static SPA)
- Backend deployed on Render (Node.js + Express)
- Clean separation of concerns
- Independent scaling and deployment
- Tree-shaking and code splitting out of the box
- Optimized chunking for faster page loads
- Environment variable injection at build time (
VITE_*)
Last Updated: March 22, 2026
Team: Team-12
Frontend: Deployed on Vercel
Backend: Deployed on Render
This section documents the frontend authentication redesign and the production-grade backend database architecture implementation completed today.
Redesign the authentication flow to support dual signup pages (User + Admin) while maintaining a single unified login page.
- Added navigation links:
- Create User Account
- Create Admin Account
- Preserved unified login logic so both roles authenticate from one centralized entry.
- Maintained premium UI styling (glassmorphism card, soft glow background).
- Dedicated User Registration page.
- Fields:
- Full Name
- Email Address
- Password
- Matches Login page aesthetic and design system.
- Currently includes mock redirect to
/shop.
- Dedicated Admin Registration page.
- Fields:
- Full Name
- Email Address
- Store Name
- Password
- Matches Login page premium UI styling.
- Currently includes mock redirect to
/admin/dashboard.
- Imported
UserSignupandAdminSignup. - Registered new routes:
/signup/user/signup/admin
- Integrated into main
<Routes>tree.
Design and implement a production-ready, concurrency-safe, transaction-based database layer for the Inventory Management System.
All backend changes scoped within:
a:/CSI/Team-12/server/
- Strict required field validation.
- Email:
unique: true- Regex validation
- Indexed
- Role enforced using enum:
['admin', 'user']
- Designed to support dual signup flow securely.
- Enforced:
priceminimum = 0stockminimum = 0
- Guaranteed SKU uniqueness via indexing.
- Default
lowStockThresholdconfigured. - Linked
createdByto User ObjectId. - Prevents negative inventory states at schema level.
- Embedded
itemsarray containing:productIdquantitypriceAtSale(Snapshot Pricing)
- Snapshot pricing ensures historical report accuracy even if product price changes later.
- Enforced sale status enum:
pendingcompletedcancelled
- References Sale via ObjectId.
- Enforced unique, indexed
qrString. - Designed for QR + OCR validation workflow.
- Captures:
userIdactionTypecollectionNamedocumentIdpreviousDatanewData
- Applied compound indexing on:
userIdtimestamp
- Designed for high-volume audit querying efficiency.
Implements MongoDB atomic stock reduction using:
findOneAndUpdate({ stock: { $gte: quantity } })
Guarantees:
- No race-condition overselling
- Stock can never fall below zero
- Thread-safe atomic updates
- Multi-user safety under simultaneous requests
Wraps entire sale lifecycle inside:
session.startTransaction()
Operations included:
- Stock reduction
- Sale creation
- Bill generation
- Audit logging
- Commit transaction
If any step fails:
- Executes
session.abortTransaction() - Prevents ghost transactions
- Prevents mismatched stock and financial records
- Ensures strict ACID-compliant behavior
- Defined scalable folder structure:
- models/
- services/
- controllers/
- routes/
- middlewares/
- Established separation of concerns:
- Data Layer (Models)
- Business Logic (Services)
- API Layer (Controllers & Routes)
- Documented maintainability principles for future backend expansion.
- Implemented dual-role authentication UI.
- Designed strict database schema architecture.
- Enforced validation and indexing strategies.
- Implemented atomic concurrency-safe stock control.
- Built full transaction-based sale workflow.
- Structured backend using production engineering principles.
Today's development session focused on:
- Premium SaaS-style frontend redesign
- Replacing hardcoded dashboard data with real API integration
- Implementing dynamic low-stock alert functionality
- Adding safe, read-only backend routes to support analytics
The frontend was upgraded from a basic light theme to a modern dark SaaS-style interface.
- Dark design system using
slate-950andslate-900 - Emerald accent color for primary actions
- Consistent spacing and typography
- Responsive layout (desktop + tablet)
- Framer Motion animations (fade-in, stagger effects)
- Reusable components (
StatCard,LowStockAlert) - Improved sidebar with active highlighting
- Topbar with profile dropdown
All pages (Admin, Public, and Customer) now follow a unified design system.
Previously, dashboard statistics were hardcoded. These have now been replaced with real backend data.
GET /api/productsGET /api/products/low-stockGET /api/dashboard/stats(Admin only)
- Total product count
- Low-stock product count
- Today's completed sales total
- Monthly revenue calculation
Important:
- No changes were made to transaction logic.
- No changes were made to concurrency control.
- No changes were made to authentication.
- No schema modifications were performed.
- Only safe, read-only routes were added.
Implemented dynamic low-stock monitoring.
stock < lowStockThresholdUses MongoDB $expr to compare two fields within the same document.
- Dashboard stat card shows total low-stock count
- Dedicated alert section lists affected products
- Severity indicators: Critical (stock ≤ 2) and Warning (stock ≤ threshold)
- Product name, current stock, threshold, and SKU displayed
- No modifications to the existing
Productschema
| File | Purpose |
|---|---|
server/controllers/productController.js |
Read-only product queries |
server/controllers/dashboardController.js |
Dashboard aggregation stats |
server/routes/productRoutes.js |
GET /api/products, GET /api/products/low-stock |
server/routes/dashboardRoutes.js |
GET /api/dashboard/stats |
src/lib/api.js |
Axios client with JWT interceptor |
src/components/dashboard/StatCard.jsx |
Reusable stat card component |
src/components/dashboard/LowStockAlert.jsx |
Low-stock alert table component |
| File | Change |
|---|---|
server/index.js |
+2 lines to register new routes |
tailwind.config.js |
Dark theme tokens, Inter font, custom shadows |
src/index.css |
Dark base styles, Google Font, scrollbar styling |
src/App.css |
Cleared Vite boilerplate |
src/Layouts/AdminLayout.jsx |
Dark sidebar, topbar, profile dropdown |
src/Pages/admin/Dashboard.jsx |
Real API data, stat cards, low-stock alerts |
src/Pages/admin/Products.jsx |
Real API data, search, dark theme |
src/Pages/admin/Stock.jsx |
Dark theme restyling |
src/Pages/admin/Orders.jsx |
Dark theme restyling |
src/Pages/admin/SupplierBills.jsx |
Dark theme, improved upload UI |
src/Pages/admin/Settings.jsx |
Dark theme with section icons |
src/Pages/Landing.jsx |
Dark hero, feature cards, animations |
src/Pages/Login.jsx |
Dark card, labeled inputs |
src/Pages/AdminSignup.jsx |
Dark card, labeled inputs |
src/Pages/UserSignup.jsx |
Dark card, labeled inputs |
src/Pages/customer/Shop.jsx |
Dark product cards |
src/Pages/customer/Cart.jsx |
Dark cart items |
src/Pages/customer/Checkout.jsx |
Dark checkout form |
src/Pages/customer/OrderConfirmation.jsx |
Dark confirmation card |
axios— HTTP client with interceptorsframer-motion— Animation librarylucide-react— Icon library@emailjs/browser— Frontend email service (added March 2026)
- Redesigned entire frontend to premium dark SaaS theme.
- Replaced all hardcoded dashboard data with real API calls.
- Implemented functional low-stock alert system.
- Added 4 new read-only backend files (zero impact on existing logic).
- All 14 pages now follow unified dark design system.
- Backend safety fully maintained — no changes to transactions, schemas, or auth.
Convert the application from a single-store demo into a multi-shop inventory management system with real backend operations and proper role-based routing.
GET /api/shops— Lists admin users withstoreNameas shopsGET /api/shops/:id/products— Fetches products usingcreatedBy
- Registers shop endpoints (JWT-protected)
POST /api/orders- Validates stock for each item
- Deducts stock using
$inc - Creates Sale document
- Returns real
orderIdandtotalAmount - Replaced MongoDB transaction logic with sequential validation
- Registers
POST /api/orders(JWT-protected)
- New
/shopspage - Fetches shops from backend
- Displays animated shop card grid
- Added logout button and user greeting
- Registered
/api/shopsand/api/ordersroutes - Added
createProduct()to persist products in MongoDB - Scoped product queries to logged-in admin only
- Added protected
POST /api/productsendpoint
- Added
/shopsand/shop/:shopIdroutes - Implemented shop-scoped cart (
cartShopId,cartShopName) - Cart auto-clears when switching shops
- Removed hardcoded products
- Replaced random checkout simulation with real order API call
- Order confirmation now displays real backend order data
- Updated user redirects from
/shop→/shops - Rebranded application to StockSmart
- Shop inventory showing no products → Fixed by implementing backend product persistence
- Order placement returning 500 error → Fixed by removing MongoDB transaction dependency
- Missing logout on customer side → Added logout button in ShopsList
- Added missing AuditLog enums (
SALE_DEDUCTION,RESTOCK,ADJUSTMENT) to prevent crashes. - Fixed “Cannot set headers after they are sent” error in authentication middleware.
- Wrapped authentication controllers (
registerUser,loginUser,getUserProfile,updateUserProfile) in proper try/catch blocks. - Implemented soft-delete feature for products (
isDeleted: true). - Created
DELETE /api/products/:idendpoint.
- Implemented global error-handling middleware.
- Added database connection retry logic with exponential backoff.
- Implemented unhandled promise rejection catchers.
- Improved backend reliability to prevent server crashes.
- Set up in-memory MongoDB Replica Set using
MongoMemoryReplSet. - Implemented 16 automated backend tests.
- Verified:
- Duplicate email prevention.
- Concurrency safety (no overselling).
- Proper transaction rollback on failed orders.
- Designed premium Order Confirmation Ticket UI.
- Ensured Order ID matches real database
orderId. - Implemented functional “Download Ticket” button.
- Replaced live camera scanner with Upload QR Image feature.
- Integrated
html5-qrcodelibrary for live camera QR extraction. - Successfully tested complete end-to-end QR verification workflow.
- AI chatbot feature fully implemented.
- Powered by Google Gemini-2.5-flash AI model.
- Connected to real-world store database for context-aware inventory queries.
- Floating Chatbot UI integrated across the entire frontend (except on auth pages).
- Created a new
QRCodeScanner.jsxcomponent using thehtml5-qrcodelibrary. - Integrated webcam access to physically scan QR codes in real-time.
- Styled the live scanner with an animated emerald scanning line to match the SaaS theme.
- Configured proper memory management to stop camera streams and prevent memory leaks.
- Added graceful error handling for missing camera hardware or denied permissions.
- Enhanced
BillScanner.jsxwith an elegant toggle switch. - Users can securely swap between "Scan with Camera" and "Upload QR Image" modes.
- Both modes successfully connected directly into the
GET /api/bills/verify/backend controller.
- Permanently removed Optical Character Recognition (OCR) from the software roadmap to focus on purely digital QR workflow.
- Audited the codebase to confirm full completion of the Google Gemini AI Chatbot (
ChatBot+chatController), updating project tracking accordingly.
- Backend testing completed.
- UI automated testing (Cypress/Selenium) not implemented.
- Only manual testing performed.
- ✅ MongoDB Atlas cluster configured and connected.
- ✅
.envproduction configuration completed. - ✅ Frontend deployed on Vercel.
- ✅ Backend deployed on Render.
- Real-device staging validation pending.
- The backend is stable, secure, and production-ready.
- The QR verification system is fully functional.
- The AI Chatbot is fully integrated.
- Cloud deployment is complete (Vercel + Render).
- Automated UI testing is the next major step.
This session focused on fixing production deployment issues and migrating the email system.
- Frontend deployed to Vercel (
stocksmart-div.vercel.app) - Backend deployed to Render (
team-12-1.onrender.com) .env.productionupdated with correct Render backend URLvercel.jsonconfigured with SPA rewrites
- Models (
Product.js,Sale.js,Bill.js,AuditLog.js) updated to export compiled models instead of raw schemas tenantConnection.jsupdated withgetSchema()helper to handle both compiled models and raw schemas- Prevents
Cannot overwrite model once compilederrors in multi-tenant setup - Removed duplicate SKU index in
Product.js
- Migrated email sending from backend (Nodemailer/SMTP) to frontend (EmailJS)
@emailjs/browserpackage addedCheckout.jsxsends order confirmation emails via EmailJS after successful order- Backend
orderController.jsno longer handles email dispatch - Required Vercel env vars:
VITE_EMAILJS_SERVICE_ID,VITE_EMAILJS_TEMPLATE_ID,VITE_EMAILJS_PUBLIC_KEY
- Updated
eslint.config.jsto ignore config files (vite.config.js,tailwind.config.js, etc.) - Prevents false lint errors on build/config files
- Added
html5-qrcodefallback for QR file uploads inBillScanner.jsx - Improved reliability when primary scanner fails on uploaded images
- Added standalone test scripts:
test-db.js— MongoDB Atlas connection testtest-ethereal-direct.js— Ethereal SMTP testtest-smtp-debug.js— SMTP connectivity test