Skip to main content

​
System requirements

Before installing the Mini POS System, ensure your system meets these requirements:

​
Browser requirements

Modern Browsers

  • Chrome 80+
  • Firefox 75+
  • Safari 13.1+
  • Edge 80+

Browser Features

  • IndexedDB support
  • Service Worker API
  • ES6 modules
  • LocalStorage

​
Development requirements

  • Node.js: Version 14 or higher (for Tailwind CSS compilation)
  • npm/yarn/pnpm: Latest stable version
  • Local server: Any HTTP server (Live Server, Python, Node.js, etc.)
  • Git: For cloning the repository
The application itself is pure vanilla JavaScript and doesn’t require Node.js to run in production. Node.js is only needed for compiling Tailwind CSS during development.

​
Installation steps

​
1. Clone the repository

Get the source code from GitHub: 
git clone https://github.com/CodecraftBySyed/Mini-POS-System.git
cd Mini-POS-System

​
2. Install dependencies

Install Tailwind CSS and its dependencies: 
npm install
If you don’t have a package.json file, create one with Tailwind CSS:
npm init -y
npm install -D tailwindcss

​
3. Build Tailwind CSS

The application uses Tailwind CSS with a custom configuration defined in tailwind.config.js:
tailwind.config.js
module.exports = {
  content: [
    "./*.html",
    "./js/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

​
One-time build

For a production build: 
npx tailwindcss -i ./src/input.css -o ./css/style.css --minify

​
Development mode (watch)

For continuous development with auto-rebuild: 
npm run dev
This command watches for changes in your HTML and JavaScript files and automatically recompiles the CSS.
The application requires css/style.css to be compiled before running. The service worker caches this file for offline use, so make sure it exists.

​
4. Set up local server

Choose your preferred local server method:
  1. Install the Live Server extension from VS Code marketplace
  2. Right-click on index.html
  3. Select Open with Live Server
  4. Access at http://127.0.0.1:5500
Live Server automatically refreshes when you save files.
# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000
Access at http://localhost:8000
npx serve .
Or install globally:
npm install -g serve
serve .
Access at the URL shown in terminal (typically http://localhost:3000)
php -S localhost:8000
Access at http://localhost:8000

​
5. Verify installation

Open your browser and navigate to your local server URL. You should see:
  1. Dashboard page with four stat cards:
    • Today’s Sales (₹0.00)
    • Total Sales (₹0.00)
    • Transactions (0)
    • Products (0)
  2. Navigation menu with four sections:
    • Dashboard
    • Products
    • POS
    • Reports
  3. Quick Actions section with buttons to:
    • Start a New Sale
    • Add Product
    • View Reports
The application uses Indian Rupee (₹) as the default currency symbol. You can customize this in the configuration.

​
Database initialization

The Mini POS System uses IndexedDB for client-side storage. The database is automatically initialized when you first open the application.

​
Database schema

From js/db.js:1: 
const DB_NAME = 'pos-db';
const DB_VER = 1;

function openDB() {
  return new Promise((resolve, reject) => {
    const req = indexedDB.open(DB_NAME, DB_VER);
    req.onupgradeneeded = () => {
      const db = req.result;
      if (!db.objectStoreNames.contains('products')) {
        db.createObjectStore('products', { keyPath: 'id', autoIncrement: true });
      }
      if (!db.objectStoreNames.contains('sales')) {
        const store = db.createObjectStore('sales', { keyPath: 'id', autoIncrement: true });
        store.createIndex('date', 'date');
      }
    };
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
  });
}
The database creates two object stores:
  • products: Stores product inventory with auto-incrementing IDs
  • sales: Stores transaction records with a date index

​
Service worker setup

The application includes a service worker (sw.js:1) for offline functionality: 
const CACHE = 'mini-pos-v2';
const ASSETS = [
  './',
  './index.html',
  './products.html',
  './pos.html',
  './reports.html',
  './manifest.json',
  './css/style.css',
  './js/db.js',
  './js/shared.js',
  './js/dashboard.js',
  './js/products.js',
  './js/pos.js',
  './js/reports.js',
  './icons/icon-192.png',
  './icons/icon-512.png'
];
The service worker is automatically registered when you access the application and caches all necessary files for offline use.
Service workers only work over HTTPS or localhost. Make sure you’re using one of these protocols during development.

​
PWA manifest

The Progressive Web App manifest (manifest.json:1) enables installation on mobile devices: 
{
  "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": [
    {
      "src": "icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

​
Troubleshooting

​
CSS not loading

Symptom: The page loads but has no styling.Solution:
  1. Check if css/style.css exists
  2. Run the Tailwind build command: 
    npx tailwindcss -i ./src/input.css -o ./css/style.css --minify
  3. Hard refresh your browser (Ctrl+Shift+R or Cmd+Shift+R)
Symptom: Changes to HTML aren’t reflected in styling.Solution:
  1. Make sure watch mode is running: npm run dev
  2. Check that your HTML files are included in tailwind.config.js
  3. Clear browser cache and service worker

​
Service worker issues

Symptom: Changes don’t appear even after refreshing.Solution:
  1. Open DevTools (F12)
  2. Go to Application → Service Workers
  3. Click Unregister
  4. Clear storage: Application → Storage → Clear site data
  5. Hard refresh the page
Symptom: Console shows service worker errors.Solution:
  1. Ensure you’re on localhost or HTTPS
  2. Check that all cached files exist
  3. Update the cache version in sw.js (e.g., mini-pos-v3)

​
Database issues

Symptom: Products or sales disappear after refresh.Solution:
  1. Check browser IndexedDB support
  2. Ensure you’re not in incognito/private mode
  3. Clear browser data and restart:
    • Open DevTools → Application → Storage
    • Check IndexedDB → pos-db
Symptom: Console shows “Cannot use import statement outside a module”.Solution:
  1. Verify scripts use type="module" in HTML: 
    <script type="module" src="js/shared.js"></script>
  2. Use a proper HTTP server (not file:// protocol)

​
Port conflicts

Symptom: Server fails to start on the default port.Solution: Use a different port number:
# Python
python -m http.server 8001

# serve
serve . -p 8001

​
Next steps

Now that you have the Mini POS System installed:

Quick Start

Follow the quickstart guide to make your first sale.

Local Setup

Learn about the development environment and customization options.

Project Structure

Understand the codebase organization and file structure.

Branding

Customize the logo, colors, and app name.

Build docs developers (and LLMs) love

Get started for freeTalk to us