Tzo' Barkery POS

A modern point-of-sale web app built with React and Vite for small food & beverage teams. Manage inventory, take orders, and print receipts from a responsive, theme-aware workspace.

Highlights

• Inventory-first layout with category filtering and instant search.
• Drawer-based forms to create categories and products on the fly.
• Cart management with toast feedback, quantity controls, and live tax/net totals.
• Printable vouchers using react-to-print, complete with timestamped order details.
• Smooth micro-interactions, skeleton loading states, and light/dark themes persisted to local storage.

Tech Stack

• React 19 + Vite 7
• Tailwind CSS 4 (@tailwindcss/vite)
• Zustand for global state
• SWR for data fetching and cache revalidation
• React Hook Form, Sonner, Framer Motion, Day.js, React To Print

Getting Started

Prerequisites

• Node.js 18+
• npm (bundled with Node)
• json-server for the local API (invoked via npx below)

Installation

1. Install dependencies:

   npm install

2. Start the mock API (serves data.json on port 8000):

   npx json-server --watch data.json --port 8000

3. In a new terminal, start the Vite dev server:

   npm run dev

4. Visit the printed URL (typically http://localhost:5173) to use the POS.

Additional scripts

• npm run build - create a production build
• npm run preview - preview the production build locally
• npm run lint - run ESLint checks

Feature Walkthrough

• Inventory management - Browse stock by category, view counts, and switch between light/dark modes via the global header.
• Search & skeleton states - Type-ahead search filters products instantly while skeleton placeholders keep loading polished.
• Add to cart - Tap to add items, adjust quantities inline, and see live totals with a 5% tax automatically calculated.
• Create on the fly - Slide-out drawers powered by React Hook Form let you add categories or products without leaving the screen.
• Checkout & receipt - Choose dine-in or take-away, then print a voucher receipt with order metadata using react-to-print.
• Delightful feedback - Toast notifications and subtle animations (Framer Motion + Sonner) surface important actions.

Data is persisted via JSON Server endpoints at http://localhost:8000/products and http://localhost:8000/categories. Update data.json to seed your own catalog.

Screenshots

• Dark mode inventory
  

• Light mode inventory
  

• Skeleton loading state
  

• Product search
  

• Add items to cart
  

• Create new product
  

• Create new category
  

• Voucher print preview
  

---