Skip to content

Latest commit

 

History

History
107 lines (83 loc) · 4.21 KB

File metadata and controls

107 lines (83 loc) · 4.21 KB

Event Management Platform

Overview

This is a modern event management platform built with React and TypeScript on the frontend and Express.js with Node.js on the backend. The application allows users to create, manage, and RSVP to events with a clean, responsive design using shadcn/ui components.

System Architecture

Frontend Architecture

  • Framework: React 18 with TypeScript
  • Routing: Wouter for client-side routing
  • State Management: TanStack Query (React Query) for server state management
  • UI Components: shadcn/ui component library built on Radix UI
  • Styling: Tailwind CSS with custom design tokens
  • Build Tool: Vite for development and build processes

Backend Architecture

  • Runtime: Node.js with Express.js framework
  • Database: PostgreSQL with Drizzle ORM
  • Database Provider: Neon Database (serverless PostgreSQL)
  • API Design: RESTful API with JSON responses
  • Session Management: PostgreSQL session store

Development Setup

  • Monorepo Structure: Shared schema between client and server
  • Type Safety: Full TypeScript coverage across frontend and backend
  • Development Server: Vite dev server with HMR in development
  • Production Build: Static frontend served by Express in production

Key Components

Database Schema

  • Users: Authentication and user management
  • Events: Event creation and management with categories, locations, and attendance limits
  • RSVPs: User event responses with status tracking (attending, maybe, not_attending)

Frontend Features

  • Event Discovery: Search and filter events by category
  • Event Creation: Form-based event creation with image selection
  • RSVP Management: User can RSVP to events and manage their responses
  • Responsive Design: Mobile-first design with adaptive layouts
  • Toast Notifications: User feedback for actions

Backend Features

  • Authentication: Basic username/password authentication
  • Event Management: CRUD operations for events
  • RSVP System: Track user responses to events
  • Data Validation: Zod schema validation for API requests
  • Error Handling: Centralized error handling with proper HTTP status codes

Data Flow

  1. User Authentication: Users register/login through REST API endpoints
  2. Event Discovery: Frontend fetches events with optional filtering parameters
  3. Event Creation: Users create events through a form that posts to the API
  4. RSVP Management: Users can RSVP to events, with real-time count updates
  5. State Management: TanStack Query manages caching and synchronization of server state

External Dependencies

Frontend Dependencies

  • UI Components: Radix UI primitives for accessible components
  • Form Management: React Hook Form with Zod validation
  • Date Handling: date-fns for date manipulation
  • Icons: Lucide React for consistent iconography
  • Carousel: Embla Carousel for interactive image displays

Backend Dependencies

  • Database: Drizzle ORM with PostgreSQL dialect
  • Session Store: connect-pg-simple for PostgreSQL session storage
  • Development: tsx for TypeScript execution in development

Build and Development

  • Replit Integration: Vite plugins for Replit-specific features
  • ESBuild: Fast bundling for production builds
  • PostCSS: CSS processing with Tailwind CSS

Deployment Strategy

Development Environment

  • Single Command: npm run dev starts both frontend and backend
  • Hot Reload: Vite provides instant feedback during development
  • Type Checking: Continuous TypeScript checking across the project

Production Build

  • Frontend: Vite builds optimized static assets
  • Backend: ESBuild bundles Node.js application
  • Serving: Express serves both API and static frontend files
  • Database: Drizzle migrations handle schema changes

Environment Configuration

  • Database URL: Required environment variable for PostgreSQL connection
  • Session Management: PostgreSQL-backed sessions for scalability
  • Static Assets: Organized under dist/public for production serving

Changelog

Changelog:
- July 05, 2025. Initial setup

User Preferences

Preferred communication style: Simple, everyday language.