Skip to main content
This guide will help you set up the Mini POS System on your local machine for development.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js (v14 or higher)
  • npm (comes with Node.js)
  • A code editor (VS Code recommended)
  • A local development server (Live Server extension or similar)

​
Getting Started

1

Clone the Repository

Clone the repository to your local machine:
git clone <repository-url>
cd mini-pos-system
2

Install Dependencies

Install the required npm packages (primarily Tailwind CSS):
npm install
This will install:
  • tailwindcss - For styling
  • Any other development dependencies
3

Build Tailwind CSS

Compile Tailwind CSS for the first time:
npx tailwindcss -i ./src/input.css -o ./css/style.css --minify
This command:
  • Takes src/input.css as input (which imports Tailwind)
  • Outputs to css/style.css
  • Minifies the output for production
4

Start Development Server

Open the project in your preferred development server:
  • Using VS Code Live Server: Right-click index.html and select “Open with Live Server”
  • Using Python: python -m http.server 8000
  • Using Node.js http-server: npx http-server
Navigate to http://localhost:5500 (or your server’s URL) to see the application.

​
Development Workflow

​
Watch Mode for Tailwind CSS

For active development, use watch mode to automatically recompile CSS when you make changes: 
npm run dev
This runs the following command: 
npx tailwindcss -i ./src/input.css -o ./css/style.css --watch
Keep this command running in a terminal while you develop. It will automatically rebuild your CSS whenever you modify HTML or JavaScript files that use Tailwind classes.

​
Development Process

  1. Start Tailwind watch mode in one terminal: 
    npm run dev
  2. Start your local server in another terminal or via your editor
  3. Make changes to HTML, CSS, or JavaScript files
  4. Refresh your browser to see changes (or use live reload)

​
Building for Production

When you’re ready to deploy, build the minified CSS: 
npx tailwindcss -i ./src/input.css -o ./css/style.css --minify
The --minify flag optimizes the CSS file size for production deployment.

​
Testing PWA Features

To test the Progressive Web App (PWA) features:
  1. Build and serve the application over HTTPS or localhost
  2. Open DevTools (F12) → Application tab
  3. Check “Service Workers” to see registration status
  4. Enable “Offline” mode in the Network tab
  5. Reload the page - it should still work offline
Service Worker Location: sw.js in the root directoryRegistration: Handled in js/shared.js:21-26
To test the “Install App” functionality:
  1. Serve the app over HTTPS (required for PWA installation)
  2. Open in Chrome/Edge (desktop or mobile)
  3. Look for the “Install” button in the header
  4. Click to install as a standalone app
  5. Launch from your OS to test standalone mode
Manifest Location: manifest.json in the root directory

​
Troubleshooting

Solution:
  1. Make sure watch mode is running (npm run dev)
  2. Check that tailwind.config.js includes your files in the content array
  3. Verify src/output.css is linked in your HTML files
  4. Clear browser cache and hard reload (Ctrl+Shift+R)
Solution:
  1. Open DevTools → Application → Service Workers
  2. Click “Unregister” for the service worker
  3. Clear site data in Application → Storage
  4. Hard reload the page (Ctrl+Shift+R)
Solution:
  1. Check browser console for errors
  2. Verify you’re not in private/incognito mode
  3. Check browser storage settings allow local data
  4. Clear IndexedDB and start fresh: DevTools → Application → Storage → IndexedDB

​
Next Steps

Project Structure

Learn about the codebase organization

Customization Guide

Customize the POS system for your needs

Build docs developers (and LLMs) love

Get started for freeTalk to us