NeonTap - Cyberpunk Pub Kiosk System

A modern, cyberpunk-themed pub kiosk system built with React, TypeScript, and a monorepo architecture.

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm
• Git

Installation

# Clone the repository
git clone <repository-url>
cd point

# Install all dependencies
npm install

# Start development servers for all apps
npm run dev

# Or run a specific app
npx turbo dev --filter=kiosk
npx turbo dev --filter=bartender  
npx turbo dev --filter=admin

📁 Project Structure

point/
├── apps/                      # Frontend applications
│   ├── kiosk/                # Customer-facing kiosk app
│   ├── bartender/            # Staff bartender interface
│   └── admin/                # Admin management panel
├── packages/                  # Shared packages
│   └── ui/                   # Shared UI components
├── services/                  # Backend microservices
│   └── printing/             # Thermal printer service
├── turbo.json               # Turborepo configuration
├── tailwind.config.js       # Shared Tailwind config
└── package.json             # Root package configuration

🎨 Cyberpunk Theme

The project uses a custom cyberpunk neon theme with:

• Colors: Neon blue (#00FFFF), pink (#FF00FF), green (#00FF00)
• Fonts: Bauhaus 93 for headings, Rajdhani for body text
• Effects: Glowing borders, pulsing animations, neon text shadows

Theme Usage

// Use predefined classes
<div className="neon-text cyber-border">
  Cyberpunk Element
</div>

// Custom neon colors
<button className="bg-neon-blue text-cyber-dark">
  Neon Button
</button>

🧩 Available Scripts

Root Level

• npm run dev - Start all apps in development mode
• npm run build - Build all apps for production
• npm run lint - Lint all code
• npm run format - Format code with Prettier

Individual Apps

• npx turbo dev --filter=<app-name> - Run specific app
• npx turbo build --filter=<app-name> - Build specific app

📦 Architecture

Monorepo Benefits

• Shared configuration (Tailwind, ESLint, TypeScript)
• Code sharing between apps via packages/
• Unified dependency management
• Coordinated builds with Turborepo

Applications

🖥️ Kiosk App (apps/kiosk)

• Customer-facing interface
• Touch-optimized UI
• Order placement and payment
• URL: http://localhost:5173

👨‍🍳 Bartender App (apps/bartender)

• Staff order management
• Real-time order updates
• Retro terminal aesthetic
• URL: http://localhost:5174

⚙️ Admin App (apps/admin)

• Product management
• System configuration
• Analytics and reporting
• URL: http://localhost:5175

🖨️ Printing Service (services/printing)

• Thermal printer integration
• Order receipt generation
• Port: 3001

🛠️ Development Roadmap

✅ Phase 0: Foundation (COMPLETE)

• Monorepo setup with Turborepo
• React apps with Vite + TypeScript
• Tailwind CSS with cyberpunk theme
• Shared UI component library
• ESLint + Prettier configuration

📋 Next Steps

1. Phase 1: Core Kiosk Frontend Development
2. Phase 2: Backend Development with Supabase
3. Phase 3: Frontend & Backend Integration
4. Phase 4: Payment & Printing Integration
5. Phase 5: Bartender & Admin Interfaces

🔧 Technical Stack

• Frontend: React 19, TypeScript, Vite
• Styling: Tailwind CSS, Framer Motion
• State Management: Zustand
• Data Fetching: TanStack Query
• Backend: Supabase, Node.js (printing)
• Payments: MercadoPago
• Build Tool: Turborepo
• Deployment: Vercel/Netlify (frontend), Docker (services)

🎯 Features

Kiosk Features

• Cyberpunk neon UI theme
• Touch-optimized interface
• Product browsing and ordering
• QR code payments
• Idle timeout and reset
• Responsive design

Technical Features

• Monorepo architecture
• Shared component library
• Real-time order updates
• Thermal receipt printing
• Mobile-first responsive design
• Accessibility compliance (WCAG 2.1 AA)

🚀 Deployment

Frontend Apps

# Build for production
npm run build

# Deploy to Vercel/Netlify
# Each app in apps/ can be deployed independently

Printing Service

# Build and containerize
cd services/printing
npm run build
docker build -t neontap-printing .

🤝 Contributing

1. Follow the established code style (ESLint + Prettier)
2. Use conventional commits
3. Test changes across all affected apps
4. Update documentation as needed

📄 License

ISC License - See LICENSE file for details.

---

🌟 Built with passion for the cyberpunk aesthetic and modern web technologies! 🌟