Börsenfieber - Interactive Pub Stock Market App

Börsenfieber is a dynamic web application that brings the excitement of a stock market to your local pub or event, with drink prices fluctuating based on demand. It features a real-time price display for customers and a comprehensive admin panel for bartenders to manage drinks, sales, and special "Börsensturz" (market crash) events.

Core Features

• Live Price Display: A public-facing monitor shows current drink prices in an easy-to-read, minimalistic format, designed to resemble stock charts.
• Admin Interface: A secure admin panel for staff to:
  • Record drink sales with a single click (simplified mode).
  • Manage drink items (add, delete, edit default price, toggle visibility).
  • Manage drink categories (add, delete, toggle visibility).
  • Adjust the price sensitivity multiplier.
  • Configure and trigger "Börsensturz" events.
  • Switch between a simplified "cash register" mode and a full "configuration" mode.
• Dynamic Price Calculation: Drink prices adjust in real-time based on sales. Selling a drink increases its price and slightly decreases others. The intensity of this effect is configurable.
• "Börsensturz" Mode: A special event that can be triggered by admins, causing all drink prices to temporarily plummet for a configurable duration (e.g., 30 seconds), accompanied by a visual warning on the customer display.
• Category Management: Organize drinks into categories, each with its own visibility setting.

Style & UI

• Theme: Dark, high-contrast theme with primary red (#FF4136), background dark gray (#222222), and yellow accents (#FFDC00).
• Font: "Space Grotesk" for a modern, tech-inspired feel.
• UI Components: Built with ShadCN UI for a consistent and professional look.
• Layout:
  • Customer display: Minimalist, focusing on drink name, current price, and a mini price history chart.
  • Admin panel: Intuitive and feature-rich, with clear separation of operational and configuration tasks.

Tech Stack

• Framework: Next.js (App Router)
• Language: TypeScript
• UI Library: React
• Component Library: ShadCN UI
• Styling: Tailwind CSS
• State Management: Zustand
• AI (Optional, if Genkit is used): Genkit (for potential future AI-driven features)
• Icons: Lucide React

Getting Started

Prerequisites

• Node.js (version 18.x or later recommended)
• npm or yarn

Installation

1. Clone the repository (if applicable) or ensure you have the project files.
2. Navigate to the project directory:

   cd your-project-directory

3. Install dependencies:

   npm install
   # or
   # yarn install

Running the Development Server

To start the development server:

npm run dev
# or
# yarn dev

This will typically start the app on http://localhost:3000 (or the port specified if changed, like 9002 in IDX). The admin panel is accessible at /admin.

Building for Production

To build the application for production:

npm run build
# or
# yarn build

And to start the production server:

npm run start
# or
# yarn start

Project Structure

• src/app/: Contains the main pages and layouts for the Next.js App Router.
  • src/app/page.tsx: Customer-facing drink display.
  • src/app/admin/page.tsx: Admin dashboard.
  • src/app/globals.css: Global styles and Tailwind CSS theme configuration.
  • src/app/layout.tsx: Root layout for the application.
• src/components/: Reusable React components.
  • src/components/admin/: Components specific to the admin panel.
  • src/components/customer/: Components specific to the customer display.
  • src/components/ui/: ShadCN UI components.
  • src/components/icons.tsx: Manages drink category icons.
• src/lib/: Utility functions and libraries.
  • src/lib/store.ts: Zustand store for managing global application state (drinks, prices, settings).
  • src/lib/utils.ts: General utility functions (e.g., cn for classnames).
• src/config/: Application configuration files.
  • src/config/drinks.config.ts: Initial drink data, categories, and pricing parameters.
• src/types/: TypeScript type definitions.
  • src/types/index.ts: Core type definitions for Drink, Category, etc.
• src/hooks/: Custom React hooks.
  • src/hooks/use-toast.ts: Custom toast notification system.
• public/: Static assets (images, fonts if self-hosted).

Configuration

Most of the initial drink data, categories, and core pricing logic parameters can be configured in:

• src/config/drinks.config.ts:
  • INITIAL_CATEGORIES: Define default categories, their icons, and initial visibility.
  • INITIAL_DRINKS: Define the starting list of drinks, their default prices, and categories.
  • DEFAULT_MULTIPLIER: Sets the initial price sensitivity.
  • MIN_PRICE_FACTOR, MAX_PRICE_FACTOR: Define price boundaries relative to the default price.
  • INITIAL_BOERSENSTURZ_DURATION_MS: Default duration for the "Börsensturz".
  • BOERSENSTURZ_PRICE_FACTOR: How much prices drop during a "Börsensturz".

The color theme and fonts are primarily configured in src/app/globals.css and tailwind.config.ts.

Contributing

Contributions are welcome! If you have suggestions or improvements, please feel free to open an issue or submit a pull request.

(This section can be expanded with guidelines for development, testing, and code style if needed.)

License

(Specify your license here, e.g., MIT License. If none, you can state "All rights reserved.")

---

This README provides a good overview for anyone looking to understand, run, or contribute to the Börsenfieber project.