A comprehensive, full-stack event registration system built with React, Node.js, and modern web technologies. Features real-time analytics, professional UI/UX, and enterprise-grade functionality.
- User Management: Registration, authentication, and profile management with JWT
- Event Management: Create, edit, delete, and manage events with full CRUD operations
- Registration System: Event registration with capacity management and status tracking
- Admin Dashboard: Comprehensive admin panel with real-time analytics and monitoring
- Email Notifications: Automated email confirmations and notifications
- Real-time Analytics: Live dashboard updates with WebSocket connections
- Professional Charts: Interactive data visualizations with smooth animations
- Advanced Navigation: Forward/back navigation with breadcrumb trails
- Dynamic Footer: Context-aware footer with admin-specific navigation
- Export Functionality: CSV export and comprehensive data backup capabilities
- System Health Monitoring: Real-time system status and performance metrics
- Live Activity Feed: Real-time activity tracking with filtering and categorization
- Modern Design: Clean, professional interface with smooth animations and micro-interactions
- Responsive Layout: Mobile-first design that works seamlessly on all devices
- Interactive Components: Hover effects, transitions, and professional animations
- Real-time Indicators: Live data updates with visual feedback and connection status
- Professional Color Scheme: Carefully crafted color palette and typography system
- React 18 with Vite for lightning-fast development
- Tailwind CSS for utility-first styling with custom design system
- React Router v6 for client-side routing
- Socket.io Client for real-time WebSocket connections
- React Hook Form + Zod for form handling and validation
- Lucide React for consistent, professional iconography
- Node.js with Express.js framework
- Socket.io for real-time WebSocket connections and live updates
- Prisma ORM with PostgreSQL database
- JWT Authentication with bcrypt password hashing
- Comprehensive API with rate limiting, CORS, and security middleware
- ESLint & Prettier for code quality and consistency
- Hot Module Replacement for fast development experience
- Environment Configuration for different deployment stages
- Professional Build Process with optimization and compression
- Live Data Updates: WebSocket-powered real-time statistics with connection indicators
- Interactive Charts: Animated line, bar, and pie charts with hover effects and tooltips
- System Health Monitoring: Memory usage, uptime, and active connection tracking
- Revenue Analytics: Monthly revenue tracking with projections and growth metrics
- Performance Metrics: Conversion rates, user growth, and engagement analytics
- Tab-based Interface: Organized sections for different admin functions
- Forward/Back Navigation: Browser-like navigation with history management
- Breadcrumb Navigation: Clear path indication with home links and truncation
- Quick Actions Panel: One-click access to common admin tasks with keyboard shortcuts
- Animated Stats Cards: Real-time updating statistics with visual indicators and trends
- Advanced Activity Feed: Live activity stream with filtering, categorization, and pagination
- Professional Data Tables: Sortable, searchable tables with bulk operations and status indicators
- Export Tools: CSV export, JSON backup, and comprehensive data management
- Event Management: Full CRUD operations with status tracking and capacity monitoring
- User Management: User administration with role controls and bulk operations
- Registration Management: Registration tracking with status updates and analytics
- System Settings: Email configuration, security settings, and notification management
- Primary: Blue gradient (#3b82f6 to #0284c7) for primary actions and branding
- Secondary: Purple gradient (#d946ef to #a21caf) for secondary elements
- Success: Green (#22c55e) for positive actions and confirmations
- Warning: Orange (#f59e0b) for warnings and important notices
- Danger: Red (#ef4444) for errors and destructive actions
- Display Font: Poppins for headings, branding, and important text
- Body Font: Inter for readable body text and interface elements
- Monospace: For code, technical elements, and data display
- Fade In: Smooth entrance animations for content loading
- Slide Up: Content reveal animations for dynamic sections
- Bounce In: Interactive element animations for user feedback
- Hover Effects: Subtle interaction feedback with scale and shadow effects
- Loading States: Professional loading indicators and skeleton screens
- Node.js 18+ and npm
- PostgreSQL database (local or cloud)
- Git for version control
-
Clone the repository
git clone <repository-url> cd eventhub
-
Install all dependencies
npm run install:all
-
Setup Backend Environment
cd backend cp .env.example .env -
Configure Environment Variables (see below for details)
-
Setup Database
npm run db:generate npm run db:push npm run db:seed
-
Start Development Servers
npm run dev
# Database
DATABASE_URL="postgresql://username:password@localhost:5432/eventhub"
# Authentication
JWT_SECRET="your-super-secret-jwt-key-minimum-32-characters"
JWT_EXPIRES_IN="7d"
# Email Service (for notifications)
EMAIL_HOST="smtp.gmail.com"
EMAIL_PORT=587
EMAIL_USER="your-email@gmail.com"
EMAIL_PASS="your-app-password"
# CORS and Security
FRONTEND_URL="http://localhost:5173"
NODE_ENV="development"
PORT=5000VITE_API_URL="http://localhost:5000"- Account Management: Register or sign in with secure authentication
- Event Discovery: Browse events with advanced search and filtering
- Registration: Sign up for events with instant confirmation and email notifications
- Profile Management: Manage registrations and update profile information
- Dashboard Access: Login with admin credentials to access the comprehensive dashboard
- Real-time Monitoring: Monitor system health, user activity, and performance metrics
- Event Management: Create, edit, and manage events with full administrative control
- User Administration: Manage user accounts, roles, and permissions
- Analytics & Reports: View detailed analytics and export comprehensive reports
- System Configuration: Configure email settings, security options, and system preferences
- JWT Authentication with secure token handling and refresh mechanisms
- Password Security using bcrypt with salt rounds
- Rate Limiting to prevent abuse and DDoS attacks
- Input Validation with comprehensive Zod schemas
- CORS Configuration for secure cross-origin requests
- Security Headers with Helmet.js middleware
- Environment Isolation with secure environment variable management
- Code Splitting for optimized bundle loading
- Lazy Loading for images and components
- Caching Strategies for API responses and static assets
- Database Indexing for fast query performance
- Compression for reduced payload sizes
- WebSocket Optimization for efficient real-time updates
The frontend is automatically deployed to GitHub Pages using GitHub Actions.
Live Demo: https://muler8905.github.io/Event_Registration_System/
- Every push to
mainbranch triggers automatic deployment - GitHub Actions workflow builds and deploys the frontend
- No manual intervention required
# Build the frontend
cd frontend
npm run build
# Files are generated in frontend/dist/# Create Heroku app
heroku create your-app-name
# Set environment variables
heroku config:set NODE_ENV=production
heroku config:set DATABASE_URL=your-database-url
heroku config:set JWT_SECRET=your-jwt-secret
heroku config:set FRONTEND_URL=https://muler8905.github.io/Event_Registration_System
# Deploy backend
git subtree push --prefix backend heroku main- Connect your GitHub repository
- Select
backendfolder as root directory - Set environment variables
- Deploy automatically
VITE_API_URL=https://your-backend-url.herokuapp.com/api
VITE_APP_NAME=EventHub
VITE_APP_VERSION=2.1.0
VITE_ENVIRONMENT=productionNODE_ENV=production
PORT=5000
DATABASE_URL=your-postgresql-database-url
JWT_SECRET=your-super-secret-jwt-key
FRONTEND_URL=https://muler8905.github.io/Event_Registration_System
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=mulukenugamo8@gmail.com
EMAIL_PASS=your-app-password# Frontend production build
cd frontend
npm run build
# Backend production setup
cd backend
npm run build- Configure production database with connection pooling
- Set secure JWT secrets with sufficient entropy
- Configure production email service (SendGrid, AWS SES, etc.)
- Set up SSL certificates for HTTPS
- Configure reverse proxy (nginx) for load balancing
- Set up monitoring and logging (PM2, Winston)
📋 Detailed Deployment Guide: See DEPLOYMENT.md for comprehensive deployment instructions.
- WebSocket Integration: Live updates for admin dashboard
- Connection Management: Automatic reconnection and fallback mechanisms
- Real-time Notifications: Instant updates for new registrations and events
- Live Activity Tracking: Real-time user activity and system events
- Comprehensive Metrics: User engagement, event performance, and system health
- Interactive Visualizations: Professional charts with animations and interactions
- Export Capabilities: CSV, JSON, and PDF report generation
- Historical Data: Trend analysis and historical performance tracking
- Animated Statistics: Real-time updating stats with smooth animations
- Interactive Charts: Hover effects, tooltips, and drill-down capabilities
- Advanced Tables: Sorting, filtering, pagination, and bulk operations
- Professional Forms: Multi-step forms with validation and error handling
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow the existing code style and conventions
- Add tests for new features
- Update documentation as needed
- Ensure all tests pass before submitting
This project is licensed under the MIT License - see the LICENSE file for details.
- React Team for the incredible framework and ecosystem
- Tailwind CSS for the utility-first CSS framework
- Prisma for the excellent ORM and database toolkit
- Socket.io for real-time communication capabilities
- Lucide for the beautiful and consistent icon library
- Email Support: mulukenugamo8@gmail.com
- Documentation: Comprehensive inline documentation and comments
- Issue Tracking: GitHub Issues for bug reports and feature requests
- Community: Join our community for discussions and support
EventHub - Connecting people through professional events. Built with ❤️ for the community.
Version 2.1.0 - Professional Edition with Real-time Analytics