Frontend Applications Overview

The unified eventyay system includes several frontend applications built with modern web technologies.

This page provides an overview of all frontend applications. For component-specific details:

Video Web Application

The main video/virtual event interface is a comprehensive Vue 3 application.

Location: app/eventyay/webapp/

For complete documentation, see Video Component Frontend - Web Application.

Architecture

Framework: Vue 3 with Vuex for state management

Build System: Vite

Routing: Vue Router

Styling: Stylus with custom theming

i18n: vue-i18n for internationalization

Core Application Structure

Main Entry Point

File: src/main.js

Initializes the Vue application, sets up: - Store (Vuex) - Router - i18n - Global components - WebSocket connections

Root Component

File: src/App.vue

The root component that contains: - AppBar (top navigation) - Router view (dynamic content) - Global error boundaries - Theme provider

Key Components

Chat System

  • components/Chat.vue - Main chat container

  • components/ChatContent.vue - Message display area

  • components/ChatInput.vue - Message input with emoji support

  • components/ChatMessage.vue - Individual message component

  • components/ChatUserCard.vue - User profile card in chat

  • components/CreateChatPrompt.vue - New channel creation

  • components/CreateDmPrompt.vue - Direct message creation

Video & Streaming

  • components/Livestream.vue - HLS/RTMP stream viewer

  • components/MediaSource.vue - Media source selector

  • components/JanusCall.vue - Janus WebRTC video call

  • components/JanusChannelCall.vue - Channel-based video calls

  • components/janus/ - Janus-specific components

Interactive Features

  • components/Poll.vue - Single poll display and voting

  • components/Polls.vue - Polls listing

  • components/Question.vue - Single Q&A question

  • components/Questions.vue - Q&A question list

  • components/Roulette.vue - Speed networking roulette

Exhibition

  • components/Exhibition.vue - Exhibition hall view

  • components/ContactExhibitorPrompt.vue - Exhibitor contact form

  • components/PosterHall.vue - Poster session hall

User Interface

  • components/Avatar.vue - User avatar display

  • components/Identicon.vue - Generated user identicons

  • components/EmojiPicker.vue - Emoji selection

  • components/ColorPicker.vue - Color selection

  • components/ReactionsBar.vue - Reaction emoji bar

  • components/ReactionsOverlay.vue - Floating reaction overlays

  • components/Scrollbars.vue - Custom scrollbar styling

Content Display

  • components/MarkdownContent.js - Markdown renderer

  • components/MarkdownPage.vue - Full markdown page

  • components/RichTextContent.vue - Rich text display

  • components/RichTextEditor.vue - Quill-based rich text editor

  • components/StaticPage.vue - Static content pages

  • components/IframePage.vue - Embedded iframe pages

Forms & Prompts

  • components/Prompt.vue - Base modal prompt

  • components/UserActionPrompt.vue - User action confirmation

  • components/FeedbackPrompt.vue - Feedback submission

  • components/RecordingsPrompt.vue - Recording access

  • components/QRCodePrompt.vue - QR code display

  • components/AVDevicePrompt.vue - Audio/video device selection

Utility Components

  • components/UploadButton.vue - File upload button

  • components/UploadUrlInput.vue - URL or file upload

  • components/UserSearch.vue - User search

  • components/UserSelect.vue - User selection dropdown

  • components/InfiniteScroll.vue - Infinite scroll loader

  • components/CopyableText.vue - Click-to-copy text

  • components/ErrorBoundary.vue - Error boundary component

Views

The application includes 70+ views in src/views/ organized by feature:

Room Views

  • Room layout and configuration

  • Room settings

  • Room permissions

  • Stage management

Event Views

  • Event home page

  • Schedule display

  • Session details

  • Speaker profiles

User Views

  • User profile

  • Settings

  • Notifications

  • Direct messages

Admin Views

  • Event configuration

  • Room management

  • User moderation

  • Analytics dashboard

State Management

Vuex Store Modules (src/store/)

announcement.js

  • Global announcements

  • Notification banners

chat.js

  • Chat messages and channels

  • Unread counts

  • Message history

exhibition.js

  • Exhibitor data

  • Contact requests

  • Booth interactions

poll.js

  • Poll data and votes

  • Real-time results

question.js

  • Q&A questions

  • Voting and moderation

roulette.js

  • Networking queue

  • Match history

schedule.js

  • Event schedule

  • Session bookmarks

notifications.js

  • In-app notifications

  • Browser notifications

  • Push subscriptions

Utility Libraries

API Client (src/lib/api.js)

Provides methods for: - Authentication - Room operations - Chat operations - User management - Event data fetching

WebSocket Client (src/lib/WebSocketClient.js)

Handles: - Real-time bidirectional communication - Automatic reconnection - Message queuing - Channel subscriptions

Other Utilities

  • src/lib/emoji.js - Emoji utilities and rendering

  • src/lib/gravatar.js - Gravatar image URLs

  • src/lib/identicon.js - Generated identicon images

  • src/lib/validators.js - Form validation

  • src/lib/profile.js - User profile helpers

  • src/lib/janus.js - Janus WebRTC integration

  • src/lib/search.js - Search utilities

  • src/lib/filetypes.js - File type detection

  • src/lib/ApiError.js - API error handling

Internationalization

Supported Languages (src/locales/): - English (en) - German (de) - Spanish (es) - French (fr) - Portuguese (pt_BR) - Russian (ru) - Ukrainian (uk) - Arabic (ar)

Implementation: vue-i18n with JSON translation files

Usage:

1// In components
2this.$t('key.path')
3
4// In templates
5{{ $t('key.path') }}

Styling & Theming

Base System: Stylus preprocessor

Files (src/styles/): - global.styl - Global styles - variables.styl - CSS variables and colors - typography.styl - Font definitions - common-ui.styl - Common UI components - themed-buntpapier.styl - Themed component library - media-queries.styl - Responsive breakpoints

Theme System (src/theme.js): - Dynamic color themes - Custom branding support - Dark mode support

Building & Development

Development Server:

cd app/eventyay/webapp
npm install
npm run dev

Production Build:

npm run build

Output: dist/ directory with optimized assets

Configuration

vite.config.js - Vite build configuration

vue.config.js - Vue-specific configuration

babel.config.js - Babel transpilation

eslint.config.js - ESLint code quality

Talk Component Frontend Applications

The talk component includes two specialized frontend applications:

Schedule Editor

A TypeScript/Vue 3 application for visual schedule editing.

Location: app/eventyay/frontend/schedule-editor/

For complete documentation, see Talk Component Frontend.

Global Navigation Menu

A web component for unified navigation across all eventyay interfaces.

Location: app/eventyay/frontend/global-nav-menu/

For complete documentation, see Talk Component Frontend.

Development Setup

Prerequisites

  • Node.js 18+ and npm

  • Python 3.11+ (for backend API)

  • Modern web browser

Full Stack Development

  1. Start Backend:

cd app
make run

  1. Start Webapp Frontend:

cd app/eventyay/webapp
npm install
npm run dev

  1. Access: - Frontend: http://localhost:8880 - Backend API: http://localhost:8000

Frontend-Only Development

For frontend-only changes, you can use the production backend:

cd app/eventyay/webapp
# Edit config.js to point to production API
npm run dev

Testing

1# Run linting
2npm run lint
3
4# Run unit tests (when available)
5npm run test

Best Practices

Component Development

  1. Single Responsibility: Each component should do one thing well

  2. Props vs Events: Use props down, events up pattern

  3. Composition: Prefer composition over inheritance

  4. Async/Await: Use async/await for API calls

  5. Error Handling: Always handle errors gracefully

State Management

  1. Local vs Global: Use component state for local UI, Vuex for shared state

  2. Immutability: Never mutate Vuex state directly

  3. Actions: Use actions for async operations

  4. Getters: Use getters for computed state

Performance

  1. Lazy Loading: Use dynamic imports for route-based code splitting

  2. Virtual Scrolling: Use for long lists (implemented in InfiniteScroll)

  3. Memoization: Cache expensive computations

  4. Debouncing: Debounce user input handlers

Accessibility

  1. Semantic HTML: Use proper HTML elements

  2. ARIA Labels: Add labels for screen readers

  3. Keyboard Navigation: Ensure keyboard accessibility

  4. Color Contrast: Maintain WCAG AA standards

Troubleshooting

Common Issues

WebSocket Connection Fails

  • Check CORS configuration

  • Verify WebSocket URL in config

  • Check browser console for errors

Build Errors

  • Clear node_modules and reinstall

  • Check Node.js version (18+)

  • Verify all dependencies installed

Hot Reload Not Working

  • Restart dev server

  • Clear browser cache

  • Check file watcher limits

API Calls Failing

  • Verify backend is running

  • Check API URL configuration

  • Inspect network tab for errors

Further Reading