A modern, accessible, mobile-first web interface for the Revel event management platform.

Revel is an open-source, community-focused event management and ticketing platform. This repository contains the frontend web application, built with modern web technologies to provide a fast, accessible, and delightful user experience.

This repository contains the frontend web application for Revel. The complete platform consists of:

• revel-backend - Django REST API, business logic, database models
• revel-frontend (this repository) - SvelteKit web application, user interface
• infra - Docker Compose setup, reverse proxy, observability stack, deployment configurations

Unlike the Backend, this was shamelessly vibe coded using Claude Code. This code is an absolute spaghetti mess and it's a miracle it sort of works. If you are familiar with the tech stack and want to contribute, any help is more than welcome!

This frontend embodies Revel's core values:

• Accessibility First: WCAG 2.1 AA compliance as a minimum standard, not an afterthought
• Mobile-First Design: Optimized for mobile devices and progressive enhancement for larger screens
• Performance Matters: Fast load times, especially on slower networks and devices
• Privacy-Conscious: Minimal tracking, user data stays secure
• Inclusive by Design: Built for diverse communities including LGBTQ+ and sex-positive groups
• Clean, Maintainable Code: TypeScript strict mode, comprehensive testing, excellent DX

• SvelteKit - Meta-framework with hybrid SSR/CSR rendering
• Svelte 5 - Modern reactive framework with Runes for fine-grained reactivity
• TypeScript - Strict mode for type safety throughout the application
• Vite - Lightning-fast build tool and dev server

• Hybrid SSR/CSR Approach:
  • Server-Side Rendering (SSR) for public pages (SEO, fast initial load)
  • Client-Side Rendering (CSR) for authenticated dashboards
  • Static Site Generation (SSG) for landing pages
  • Per-page rendering control for optimal performance

• Tailwind CSS - Utility-first CSS framework
• shadcn-svelte - Accessible, customizable component library
• Lucide Icons - Beautiful, consistent icon set

• Auto-Generated API Client - TypeScript types and client generated from backend OpenAPI spec
• TanStack Query (Svelte) - Powerful server state management
• Zod - Runtime type validation and schema definition

• Superforms - Type-safe form handling for SvelteKit
• Zod - Schema-based form validation

• JWT-based - Access tokens (in-memory) + refresh tokens (httpOnly cookies)
• Google SSO - OAuth2 integration
• TOTP Support - Two-factor authentication

• Vitest - Fast unit testing framework
• Playwright - End-to-end testing
• @testing-library/svelte - Component testing
• ESLint - Code linting with strict rules
• Prettier - Code formatting
• Husky - Pre-commit hooks for quality gates

• Node.js 20+ (LTS recommended)
• pnpm 9+ (preferred) or npm
• The Revel backend running locally (see backend repo)

1. Clone the repository:

   git clone https://github.com/letsrevel/revel-frontend.git
   cd revel-frontend

2. Install dependencies:

   pnpm install

3. Generate API client from backend OpenAPI spec:

   pnpm generate:api

   Note: Ensure the backend is running and accessible at http://localhost:8000

4. Start the development server:

   pnpm dev

5. Open your browser: Navigate to http://localhost:5173

revel-frontend/
├── src/
│   ├── lib/
│   │   ├── api/              # Auto-generated API client and custom endpoints
│   │   ├── components/       # Reusable Svelte components
│   │   │   ├── ui/          # shadcn-svelte components
│   │   │   ├── events/      # Event-specific components
│   │   │   ├── organizations/
│   │   │   ├── landing/     # SEO landing page components
│   │   │   └── common/      # Shared components
│   │   ├── data/            # Static data (landing pages content)
│   │   ├── stores/          # Svelte stores for global state
│   │   ├── utils/           # Utility functions and helpers
│   │   ├── schemas/         # Zod validation schemas
│   │   └── types/           # TypeScript type definitions
│   ├── routes/              # SvelteKit file-based routing
│   │   ├── (public)/        # Public routes (SSR)
│   │   ├── (auth)/          # Authenticated routes
│   │   └── api/             # API endpoints (server-side)
│   ├── hooks.server.ts      # Server-side hooks (auth, etc.)
│   ├── hooks.client.ts      # Client-side hooks
│   └── app.html             # HTML template
├── static/                  # Static assets (images, fonts, etc.)
├── tests/
│   ├── unit/               # Unit tests
│   ├── integration/        # Integration tests
│   └── e2e/                # End-to-end tests
├── backend_context/         # Symlinked backend documentation
├── .env.example            # Environment variable template
└── package.json

• Event Discovery: Browse and search public events with filters
• Event Details: Rich event pages with maps, schedules, and ticketing info
• Organization Profiles: Public organization pages
• User Registration & Login: Email verification, password reset, Google SSO
• SEO Optimized: Meta tags, Open Graph, structured data
• SEO Landing Pages: Targeted pages for specific audiences (see below)

• User Dashboard: View RSVPs, tickets, and upcoming events
• Event RSVP/Ticketing: Secure checkout flow with Stripe integration
• Questionnaire Submission: Dynamic form rendering and validation
• Profile Management: Edit profile, manage 2FA, GDPR data export/deletion

• Organization Management: Create/edit organizations, manage members and staff
• Event Creation: Rich event builder with ticket tiers and settings
• Questionnaire Builder: Visual builder for admission screening
• Attendee Management: View submissions, approve/reject, manage invitations
• Check-In System: QR code scanning for event entry
• Analytics Dashboard: Event metrics and attendance insights

• Real-Time Check-In: Live QR code scanning with instant feedback
• Potluck Coordinator: Real-time item claiming and updates
• Live Chat: (Future) Event-specific messaging

Multi-language landing pages targeting specific audiences and use cases:

Features:

• Keyword-optimized meta titles and descriptions
• JSON-LD structured data (WebPage, FAQPage, BreadcrumbList)
• hreflang tags for multi-language SEO
• Internal linking between related pages
• CTAs linking to demo, GitHub, and contact

Content location: src/lib/data/landing-pages.ts

1. Login: User submits credentials
2. Server validates: SvelteKit server-side endpoint calls backend API
3. Token handling:
   • Access token stored in memory (client-side)
   • Refresh token stored in httpOnly cookie (secure)
4. Automatic refresh: Interceptor refreshes expired access tokens
5. 2FA support: TOTP flow for enhanced security

We are committed to making Revel accessible to everyone:

• Keyboard Navigation: All interactive elements fully navigable via keyboard
• Screen Reader Support: Semantic HTML, ARIA labels, and live regions
• Color Contrast: WCAG AA minimum (4.5:1 for text)
• Focus Indicators: Clear, visible focus states
• Responsive Design: Works on all device sizes
• Progressive Enhancement: Core functionality works without JavaScript

Testing: We use automated tools (axe, Lighthouse) and manual testing with screen readers.

We welcome contributions from developers of all skill levels! Please read our CONTRIBUTING.md for guidelines on how to get started.

Before contributing:

• Check open issues for tasks
• Read our Code of Conduct
• Review the CLAUDE.md file for development guidelines

This project is licensed under the MIT License. See LICENSE for details.

• Built with SvelteKit
• UI components from shadcn-svelte
• Icons from Lucide
• Backend API by Revel Backend

• Backend Repository: letsrevel/revel-backend
• Documentation: Coming soon
• Community Discord: discord.gg/zy8nTDqQ
• Live Demo: Coming soon