Skip to main content

​
Get started quickly

This guide will help you get the Mini POS System up and running on your local machine in just a few minutes.
1

Clone the repository

Clone the Mini POS System repository to your local machine:
git clone https://github.com/CodecraftBySyed/Mini-POS-System.git
cd Mini-POS-System
2

Install Tailwind CSS

The application uses Tailwind CSS for styling. Install the dependencies:
npm install
The project uses locally compiled Tailwind CSS to avoid CDN issues with the service worker.
3

Build the CSS

Compile the Tailwind CSS styles:
npx tailwindcss -i ./src/input.css -o ./css/style.css --minify
Or use the built-in dev command for watch mode:
npm run dev
Watch mode automatically rebuilds CSS when you make changes to HTML or JavaScript files.
4

Start a local server

Open the application with any local development server. Common options:
# Install the Live Server extension in VS Code
# Right-click on index.html and select "Open with Live Server"
5

Access the application

Open your browser and navigate to your local server (typically http://127.0.0.1:5500 or http://localhost:8000).You’ll see the dashboard with these main sections:
  • Dashboard - View sales statistics and recent transactions
  • Products - Manage your product inventory
  • POS - Process sales transactions
  • Reports - View detailed sales reports
6

Add your first product

  1. Click Products in the navigation
  2. Click Add Product
  3. Enter a product name (e.g., “Coffee”)
  4. Enter a price (e.g., “50”)
  5. Click Add Product
The product is now stored in IndexedDB and available in the POS interface.
7

Make your first sale

  1. Click POS in the navigation
  2. Click on the product you just added
  3. Adjust quantity if needed
  4. Click Complete Sale
The sale is recorded and you can view it in the Dashboard and Reports sections.

​
Project structure

Here’s what the main files look like: 
Mini-POS-System/
├── index.html           # Dashboard page
├── products.html        # Product management
├── pos.html            # Point of Sale interface
├── reports.html        # Sales reports
├── css/
│   └── style.css       # Compiled Tailwind CSS
├── js/
│   ├── db.js          # IndexedDB operations
│   ├── dashboard.js   # Dashboard logic
│   ├── products.js    # Product management
│   ├── pos.js         # POS functionality
│   ├── reports.js     # Report generation
│   └── shared.js      # Shared utilities
├── images/            # Logo and screenshots
├── icons/             # PWA icons
├── manifest.json      # PWA manifest
└── sw.js             # Service worker for offline support

​
What’s next?

Now that you have the Mini POS System running, explore these features:

Customize Branding

Replace the logo and update the app name to match your business.

Product Management

Learn how to efficiently manage your product inventory.

Currency Settings

Configure currency symbols and formatting for your region.

Offline Support

Understand how the PWA works without an internet connection.
The application uses IndexedDB for local storage. Data is stored in your browser and won’t sync across devices unless you implement a custom backend.

Build docs developers (and LLMs) love

Get started for freeTalk to us