kiosk/readme.md

Kiosk

A modern office/building information display system built with React and PocketBase. Provides an interactive interface for building navigation, company directory, and bulletin notices.

Features

• Interactive Floor Plans - Navigate multi-story buildings with annex filtering, room highlighting, and company logo positioning
• Company Directory - Browse tenant companies with contact information and visual cards
• Bulletin Board - Display important notices and announcements
• Static Hosting Ready - Hash-based routing for deployment anywhere

Screenshots

Bulletin Board

Company Directory

Floor Plan Navigation

About Page

Setup

Prerequisites

• pnpm 8+ (package manager)
• PocketBase (backend database)

PocketBase Setup

1. Download PocketBase from pocketbase.io
2. Initialize the database:

   ./pocketbase serve
   

3. Import the schema from schema/pb_schema.json via the PocketBase admin UI (Settings > Import collections)

Web Frontend

Install dependencies:

cd web
pnpm install

Development Mode

Run the development server:

make web-dev
# or
cd web && pnpm dev

The app will be available at http://localhost:5173

Production Build

Build for production:

make web-build
# or
cd web && pnpm build

Built files will be in web/dist/ - ready for static hosting.

Additional Commands

make web-lint      # Run ESLint
make web-format    # Format code with Prettier
make web-preview   # Preview production build

Tech Stack

• Frontend: React 19, TypeScript, Vite, Tailwind CSS
• UI Components: shadcn/ui
• Routing: Wouter (hash-based)
• Backend: PocketBase
• Build: Vite with Rolldown (beta)

License

MIT License - Copyright © 2025 "NABLA" d.o.o. Zenica