Skip to main content
This guide explains the file structure and organization of the Mini POS System.

​
Directory Overview

mini-pos-system/
├── css/
│   └── style.css          # Compiled Tailwind CSS (generated)
├── icons/
│   ├── favicon.ico
│   ├── icon-192.png
│   └── icon-512.png
├── images/
│   ├── logo.svg           # Codecraft by Syed branding
│   ├── pos.svg            # POS icon
│   └── screenshots/       # App screenshots
├── js/
│   ├── app.js            # Legacy/alternative entry
│   ├── dashboard.js      # Dashboard page logic
│   ├── db.js             # IndexedDB database operations
│   ├── pos.js            # POS/cart functionality
│   ├── products.js       # Product management
│   ├── reports.js        # Sales reporting & analytics
│   └── shared.js         # Shared utilities & PWA setup
├── src/
│   ├── input.css         # Tailwind source (imports Tailwind)
│   └── output.css        # Alternative output location
├── index.html            # Dashboard page
├── pos.html              # Point of Sale interface
├── products.html         # Product management page
├── reports.html          # Sales reports page
├── manifest.json         # PWA manifest
├── sw.js                 # Service Worker
└── tailwind.config.js    # Tailwind configuration

​
Core Files Explained

​
HTML Pages

The application consists of four main pages:
Purpose: Main landing page with overview statisticsKey Features:
  • Displays today’s sales, total sales, transaction count, and product count
  • Quick action buttons to navigate to other pages
  • Recent transactions list
  • Navigation bar with links to all pages
Script Dependencies:
<script type="module" src="js/shared.js"></script>
<script type="module" src="js/dashboard.js"></script>
Purpose: Transaction interface for creating salesKey Features:
  • Product selection grid
  • Shopping cart with add/remove items
  • Total calculation
  • Checkout functionality
  • Real-time cart updates
Script Dependencies:
<script type="module" src="js/shared.js"></script>
<script type="module" src="js/pos.js"></script>
Purpose: Add, view, and delete productsKey Features:
  • Product listing table
  • Add new product form
  • Delete product functionality
  • Product count display
  • Price formatting with ₹ (Indian Rupee)
Script Dependencies:
<script type="module" src="js/shared.js"></script>
<script type="module" src="js/products.js"></script>
Purpose: View and analyze sales dataKey Features:
  • Date range filtering
  • Sales summary statistics
  • Detailed transaction table
  • CSV export functionality
  • Time-based sales analysis
Script Dependencies:
<script type="module" src="js/shared.js"></script>
<script type="module" src="js/reports.js"></script>

​
JavaScript Modules

The application uses ES6 modules for code organization:

​
Database Layer

// IndexedDB wrapper with Promise-based API
const DB_NAME = 'pos-db';
const DB_VER = 1;

// Object Stores:
// - products: { id, name, price }
// - sales: { id, date, items, total }

// Key Functions:
export async function addProduct(name, price)
export async function getProducts()
export async function deleteProduct(id)
export async function addSale(sale)
export async function getSalesInRange(fromISO, toISO)
export async function getAllSales()
Database Schema: 
{
  keyPath: 'id',
  autoIncrement: true,
  fields: {
    id: number,      // Auto-generated
    name: string,    // Product name
    price: number    // Price in rupees
  }
}

{
  keyPath: 'id',
  autoIncrement: true,
  indexes: ['date'],
  fields: {
    id: number,          // Auto-generated
    date: string,        // ISO date string
    items: array,        // Array of {name, price, quantity}
    total: number        // Total sale amount
  }
}

​
Shared Utilities

// Currency formatting
export function money(n) {
  return (Math.round(Number(n) * 100) / 100).toFixed(2);
}

// Toast notifications
export function showToast(message, type = 'success') {
  // Creates temporary notification overlay
}

​
Page-Specific Modules

Responsibilities:
  • Load and display statistics (sales, transactions, products)
  • Fetch recent transactions from database
  • Render transaction list
  • Update stats on page load
Key Functions:
  • loadStats() - Calculates today’s and total sales
  • loadRecentTransactions() - Displays last 10 transactions
Responsibilities:
  • Load product catalog
  • Manage shopping cart state
  • Handle add/remove item actions
  • Process checkout and save sales
  • Calculate totals
Key Functions:
  • loadProducts() - Renders product grid
  • addToCart(product) - Adds item to cart
  • removeFromCart(index) - Removes item from cart
  • checkout() - Saves sale to database
Responsibilities:
  • Display product list
  • Handle product creation
  • Handle product deletion
  • Update product count
Key Functions:
  • loadProducts() - Renders product table
  • addProduct(name, price) - Creates new product
  • deleteProduct(id) - Removes product
Responsibilities:
  • Filter sales by date range
  • Calculate sales statistics
  • Render transaction table
  • Export data to CSV
Key Functions:
  • loadReports(fromDate, toDate) - Filters and displays sales
  • exportCSV() - Generates CSV download

​
Styling Architecture

​
Tailwind Configuration

tailwind.config.js
module.exports = {
  content: [
    "./*.html",      // All HTML files in root
    "./js/*.js"       // All JS files in js/
  ],
  theme: {
    extend: {},       // Uses default Tailwind theme
  },
  plugins: [],
}
The content array tells Tailwind which files to scan for class names. This is crucial for tree-shaking unused styles.

​
CSS Source Files

/* Minimal input file that imports Tailwind */
@import "tailwindcss";

​
PWA Components

​
Service Worker

File: sw.js (root directory) Purpose: Enables offline functionality and app caching Features:
  • Caches local assets (HTML, CSS, JS, images)
  • Provides offline fallback
  • Handles cache updates
The service worker only caches local resources. It gracefully handles failures and doesn’t cache external CDN assets.

​
Web App Manifest

File: manifest.json (root directory) 
{
  "name": "Mini POS System",
  "short_name": "Mini POS",
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4f46e5",
  "description": "Offline Point of Sale System",
  "icons": [...]
}
Purpose: Defines how the app appears when installed as a PWA

​
Assets Organization

​
Icons Directory

  • favicon.ico - Browser tab icon
  • icon-192.png - PWA icon (192x192)
  • icon-512.png - PWA icon (512x512)
  • apple-touch-icon.png - iOS home screen icon

​
Images Directory

  • logo.svg - Codecraft by Syed branding (495KB)
  • pos.svg - POS icon used in header (657KB)
  • screenshots/ - App preview images
Logos are displayed with rounded-full class for circular appearance. Replace logo.svg to customize branding.

​
Module Dependencies

The application follows this dependency flow: 
HTML Pages
    ↓
shared.js (always loaded first)
    ├── PWA setup
    ├── Service Worker registration
    └── Utility functions
        ↓
Page-specific modules
    ├── dashboard.js
    ├── pos.js
    ├── products.js
    └── reports.js
        ↓
db.js (imported by page modules)
    └── IndexedDB operations

​
Next Steps

Local Setup

Set up your development environment

Customization

Learn how to customize the system

Build docs developers (and LLMs) love

Get started for freeTalk to us