moboPOS - Modern POS Solution

Overview#

moboPOS is a complete, web-based Point of Sale (POS) solution built with Next.js 16, TypeScript, MongoDB, and Tailwind CSS. Developed as a training project to understand how real cash register systems work technically – from product management to sales registration and data analysis. The system demonstrates comprehensive business logic, AI-inspired pricing, and modern web development best practices with a focus on accessibility and user experience.

Key Features#

🛒 Checkout System (Main Page)#

Complete point of sale interface:

• Responsive product grid - 2-6 columns with color-coded categories
• Shopping cart - Quantity management, automatic VAT calculation (25%)
• Payment methods - Card, Cash, Vipps, Invoice (color-coded)
• Receipt printing - Print-optimized display with window.print()
• Return function - Select previous sale, products, and reason
• Keyboard shortcuts - Enter (complete sale), Escape (clear cart)

🔧 Admin Panel#

Comprehensive product management:

• Dashboard - Quick stats (active/hidden products, avg price, sales today)
• Product administration - Full CRUD operations with Zod validation
• Margin calculation - Real-time profit display (kr and %)
• Sorting - 5 sort fields (name, price, cost price, margin, category)
• Filtering - Search, category, and status (active/hidden)

📊 Sales History#

Complete transaction tracking:

• Overview - All sales with timestamp, products, and payment method
• Statistics - Total revenue, average sale, best-selling product
• Filtering - Today, this week, this month
• Expandable rows - Detailed item information
• CSV export - For further analysis in Excel
• Returns - Separate tab with return history and reasons

📦 Inventory Management#

Product overview and tracking:

• Product list - All products with price, cost price, and margin
• Statistics - Total, active, hidden products
• Filtering - Search, category, and status
• Margin display - Both currency and percentage per product

💰 Price Simulator (AI-Inspired)#

Dynamic pricing suggestions based on:

• Demand (low/normal/high): ±5-10%
• Time of day (morning/lunch/evening): ±2-5%
• Stock level (0-100): ±3-7%
• Margin check - Never below cost price + 10%
• Visual presentation - Margin, price change, and explanation

❓ Help System#

Comprehensive user guidance:

• Search function - Search in title and content
• Section filter - Checkout, Admin, History, Shortcuts
• Quick reference - 3 cards with important functions
• Help articles - 20+ articles across 4 sections

📄 Presentation Mode#

Project documentation:

• Project presentation - Complete overview
• PDF export - Print or save as PDF (Ctrl+P / Cmd+P)
• Glossary - Technical terms explained

Technical Implementation#

Full-Stack Architecture#

Frontend:

• Next.js 16.0.1 with App Router and Server Components
• React 19.2.0 with Hooks and Context API
• TypeScript 5 for complete type safety
• Tailwind CSS 4 for utility-first styling

Backend & Database:

• MongoDB Atlas for cloud database
• Mongoose for ODM with schemas and validation
• Zod for runtime API request validation
• localStorage for caching and offline support

UI & UX:

• Lucide React for modern icons
• Responsive mobile-first design
• WCAG AA accessibility compliance
• Print-optimized CSS for receipts

Database Schema#

Products Collection:

{
  id: string;
  name: string;
  price: number;
  costPrice: number;
  category: 'Drikke' | 'Mat' | 'Bakst' | 'Snacks' | 'Annet';
  inStock: boolean;
  timestamps: Date;
}

Sales Collection:

{
  id: string;
  timestamp: Date;
  items: CartItem[];
  total: number;
  vat: number;
  paymentMethod: 'Kort' | 'Kontant' | 'Vipps' | 'Faktura';
}

Returns Collection:

{
  id: string;
  timestamp: Date;
  originalSaleId: string;
  items: CartItem[];
  total: number;
  vat: number;
  reason: string;
}

API Architecture#

RESTful endpoints with Zod validation:

Products:

• GET /api/products - Fetch all products
• POST /api/products - Create new product
• GET /api/products/[id] - Fetch single product
• PUT /api/products/[id] - Update product
• DELETE /api/products/[id] - Delete product

Sales:

• GET /api/sales - Fetch all sales
• POST /api/sales - Register new sale

Returns:

• GET /api/returns - Fetch all returns
• POST /api/returns - Register new return

Two-Layer Architecture#

Hybrid data strategy:

• MongoDB - Primary database for persistent storage
• localStorage - Cache layer for offline support
• Automatic sync - Data synchronized between layers
• Fallback handling - Graceful degradation when offline

Validation System#

Zod schemas ensure data quality:

• Required fields checked
• Data types verified
• Values validated (positive numbers, enums, etc.)
• Detailed error messages for invalid data

Business Logic#

Sales Flow#

1. Admin adds product with price and cost price
2. Product becomes available in checkout (active products only)
3. Customer selects products and payment method
4. Sale registered with timestamp, items, total, VAT, and payment method
5. Data available in history for analysis and CSV export
6. Returns can be registered by selecting previous sale

Pricing Algorithm (AI-Inspired)#

Price suggestions calculated based on:

Demand Impact:

• Low: -10% of margin
• Normal: 0%
• High: +15% of margin

Time of Day Impact:

• Morning: -5% of margin
• Lunch: +10% of margin
• Evening: 0%

Stock Level Impact:

• High (over 70): -5% of margin
• Normal (30-70): 0%
• Low (under 30): +10% of margin

Safety Check: Never below cost price + 10% minimum margin

Example Calculation:

Current price: 35 kr
Cost price: 10 kr
Margin: 25 kr

Demand: High (+15% = +3.75 kr)
Time: Lunch (+10% = +2.50 kr)
Stock: Low (+10% = +2.50 kr)

Suggested price: 44 kr (26% increase)

Design System#

Color Palette#

• Primary (#2563eb) - Actions and active states
• Success (#16a34a) - Checkout and positive messages
• Warning (#d97706) - Warnings
• Danger (#dc2626) - Errors, deletion, and returns
• Background (#fafaf8) - Easy on the eyes

Category Colors#

• Drikke (Drinks): #2563eb (blue)
• Mat (Food): #059669 (green)
• Bakst (Bakery): #d97706 (orange)
• Snacks: #dc2626 (red)
• Annet (Other): #7c3aed (purple)

Accessibility Features#

• WCAG AA compliant with minimum 4.5:1 contrast ratio
• Full keyboard navigation with visible focus states
• ARIA attributes on all interactive elements
• Touch-optimized with minimum 44px touch targets
• Mobile-first responsive design

Responsive Breakpoints#

• Mobile: < 640px
• Tablet: 640px - 1024px
• Desktop: > 1024px

User Experience Flow#

Product Management#

1. Admin adds products with pricing
2. Set category and active status
3. View margin calculations in real-time
4. Sort and filter product list

Checkout Process#

1. Browse products by category
2. Add items to cart with quantity
3. Review cart with automatic VAT calculation
4. Select payment method
5. Complete sale and print receipt

Sales Analysis#

1. View sales history with filters
2. Analyze statistics and trends
3. Export data to CSV
4. Process returns when needed

Price Optimization#

1. Select product for pricing analysis
2. Input market conditions (demand, time, stock)
3. Review AI-suggested price
4. See margin impact and explanation

Challenges & Solutions#

Challenge: Offline Functionality#

Solution: Implemented two-layer architecture with MongoDB as primary database and localStorage as cache. Automatic synchronization ensures data consistency while providing offline support.

Challenge: Complex Business Logic#

Solution: Created comprehensive helper functions for sales calculations, VAT handling, margin computation, and return processing. Zod validation ensures data integrity throughout.

Challenge: Real-time Margin Calculation#

Solution: Developed dynamic calculation system that updates margins instantly as prices change. Visual feedback shows both currency and percentage for easy understanding.

Challenge: Accessible Design#

Solution: Followed WCAG AA guidelines with proper contrast ratios, keyboard navigation, ARIA labels, and touch-optimized targets. Tested with screen readers and keyboard-only navigation.

Challenge: Print-Optimized Receipts#

Solution: Created separate CSS for print media with optimized layout, removed unnecessary elements, and ensured proper formatting for thermal printers.

Results#

• ✅ Complete POS system with 7 main sections
• ✅ Full CRUD operations for products
• ✅ Sales tracking with statistics and export
• ✅ Return processing with reason tracking
• ✅ AI-inspired dynamic pricing
• ✅ Two-layer architecture for offline support
• ✅ WCAG AA accessibility compliance
• ✅ Responsive design for all devices
• ✅ Print-optimized receipts
• ✅ Comprehensive help system
• ✅ Production-ready application

Future Enhancements#

Planned Features#

• 📦 Stock quantity tracking
• 🖼️ Product images
• 🔐 Real authentication (Clerk/NextAuth)
• 👥 Multi-user support
• 🔄 Real-time synchronization
• 📈 Reports and charts
• 📱 Barcode scanner support
• 📧 Email/SMS receipts

Lessons Learned#

This project provided valuable experience with:

• POS domain knowledge and SMB requirements
• Full-stack Next.js 16 development with App Router
• MongoDB schema design for business applications
• Two-layer architecture for offline support
• Zod validation for API security
• Complex business logic implementation
• Real-time calculations and updates
• WCAG AA accessibility standards
• Print media CSS optimization
• Responsive design for business applications
• User experience for retail environments
• Data export and reporting features

moboPOS demonstrates how modern web technologies can create comprehensive business applications that solve real-world problems for small and medium businesses, with a focus on usability, accessibility, and offline functionality.

"Understanding how systems work is the first step to building better ones."