Event Management Platform - React TypeScript

A modern, full-stack event management platform built with React, TypeScript, and Supabase. Create, discover, and manage events with an intuitive interface and powerful features including user authentication, event registration, Google Maps integration, and social networking capabilities.

What You Get

This is a complete, production-ready event management platform that you can deploy immediately. The codebase is clean, well-organized, and fully documented. All features are implemented and tested, ready for your customization or immediate use.

Key Highlights:

• ✅ Fully functional event creation and management system
• ✅ Complete user authentication and profile system
• ✅ Google Maps integration for location features
• ✅ Admin dashboard for content management
• ✅ Social features including user following
• ✅ SEO optimized for search engines
• ✅ Mobile-responsive design
• ✅ Modern tech stack with TypeScript

Technology Stack

Built with industry-standard technologies:

• Frontend: React 18.3.1 with TypeScript
• Build Tool: Vite 5.4 for fast development
• Backend: Supabase (PostgreSQL, Auth, Storage)
• Styling: Tailwind CSS with shadcn/ui components
• Routing: React Router DOM
• Maps: Google Maps Places API

Perfect For

• Event organizers managing multiple events
• Community platforms building event calendars
• Businesses hosting corporate events
• Event discovery platforms
• Social networks adding event features
• Marketplaces selling event services

Whether you're building a new event platform from scratch or adding event management to an existing application, this codebase provides a solid foundation that you can customize to fit your specific needs.

✨ Complete Feature List

🎯 Event Management

• Create Events - Rich event creation form with image upload, date/time selection, and location integration
• Edit Events - Full editing capabilities for event creators and admins
• Delete Events - Secure deletion with confirmation dialogs
• Event Discovery - Beautiful card-based layout for browsing events
• Event Details - Rich event pages with countdown timers, maps, and registration
• Private Events - Create private events with host invitations
• Multi-Host Support - Invite multiple co-hosts to events
• Event Registration - One-click event registration system
• Event Carousel - Beautiful carousel display for featured events
• Event Filtering - Filter events by date and other criteria

👤 User Authentication & Profiles

• Secure Authentication - Email and password authentication via Supabase
• User Profiles - Customizable profiles with display names, usernames, and bios
• Profile Pages - Public profile pages with clean URLs (/u/username)
• Follow System - Follow/unfollow other users with follower counts
• Gravatar Integration - Automatic avatar generation from Gravatar
• Custom Avatars - Upload and manage custom profile pictures
• Protected Routes - Secure admin and user-specific pages
• Session Management - Persistent authentication across sessions
• Profile Customization - Edit profile information, bio, and avatar

🗺️ Location Integration

• Google Maps Autocomplete - Search and select locations with autocomplete suggestions
• Interactive Maps - Embedded Google Maps on event detail pages
• Get Directions - Direct links to Google Maps for navigation
• Address Validation - Real-time address validation and suggestions
• Location Display - Clear location information on event pages

🖼️ Media Management

• Image Upload - Drag-and-drop or click to upload event images
• File Validation - Automatic validation for file type (JPG, PNG, GIF, WebP)
• Size Validation - File size validation (max 5MB)
• Secure Storage - Images stored securely in Supabase cloud storage
• Image Preview - Real-time preview before upload
• Avatar Management - Upload and manage user avatars

👨‍💼 Admin Features

• Admin Dashboard - Centralized dashboard for managing all events
• Event Moderation - View, edit, or delete any event
• User Management - Access to user profiles and event data
• Role-Based Access - Secure admin role system with permissions
• Event Statistics - View event counts and user activity
• User Role Management - Grant or revoke admin roles

🔍 SEO & Performance

• SEO Optimized - Proper meta tags, titles, and descriptions
• Open Graph Tags - Social media preview optimization
• Semantic HTML - Structured markup for search engines
• Fast Loading - Optimized with Vite for lightning-fast performance
• Mobile Responsive - Mobile-first design that works on all devices
• Search Engine Ready - Optimized for Google and other search engines

🎨 UI/UX Features

• Modern Design - Clean, modern interface built with shadcn/ui
• 40+ UI Components - Complete component library included
• Toast Notifications - User-friendly toast notifications
• Loading States - Smooth loading indicators throughout
• Error Handling - Comprehensive error handling with user-friendly messages
• Form Validation - Real-time form validation with helpful error messages
• Smooth Animations - Polished animations and transitions
• Accessible - Built with accessibility in mind

🔒 Security Features

• Row Level Security - RLS policies on all database tables
• Secure Authentication - Supabase Auth with email verification
• Protected Routes - Secure admin and user pages
• API Key Restrictions - Support for API key restrictions
• File Upload Security - Validated file uploads
• SQL Injection Protection - Parameterized queries
• XSS Protection - Built-in React XSS protection

📱 Pages Included

• Event Discovery Page (Home)
• Event Detail Page
• Create Event Page
• Edit Event Page
• My Events Page
• User Profile Page
• User Settings Page
• Authentication Page
• Admin Dashboard
• 404 Not Found Page

📋 System Requirements

Server Requirements

• Node.js - Version 18.x or higher (tested with Node.js 18+ and 22+)
• Package Manager - npm 9.x or higher (or yarn, pnpm, bun)
• Web Browser - Modern browser (Chrome, Firefox, Safari, Edge)
• Operating System - Windows, macOS, or Linux

External Services Required

These services offer free tiers, so you can get started at no cost:

1. Supabase Account (Required)

• Free tier available at supabase.com
• Provides PostgreSQL database
• User authentication system
• Cloud storage for images
• Row Level Security (RLS) policies

2. Google Cloud Account (Required for Location Features)

• Free tier available at Google Cloud Console
• Google Maps Places API (New)
• Free tier includes $200 credit per month
• Places API autocomplete functionality

Development Environment

• Code editor (VS Code recommended)
• Git (for version control, optional)
• Terminal/Command line access

Deployment Requirements

For production deployment, you'll need:

• Static hosting service (Vercel, Netlify, or similar)
• Or any web server that supports static files and client-side routing
• HTTPS enabled (required for Supabase and Google Maps)

Browser Compatibility

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

Optional Requirements

• Domain name (for custom domain setup)
• SSL certificate (usually provided by hosting service)

Knowledge Requirements

Basic knowledge helpful but not required:

• Basic understanding of React/JavaScript
• Familiarity with command line
• Basic understanding of environment variables

Note: The included documentation provides step-by-step instructions, so even beginners can set up and deploy this platform successfully.

🚀 Installation & Setup Instructions

Step 1: Extract Files

1. Download and extract the ZIP file to your desired directory
2. Open a terminal/command prompt in the extracted folder

Step 2: Install Dependencies

Run one of the following commands in your terminal:

npm install

Or if you prefer:

yarn install
# or
pnpm install
# or
bun install

Step 3: Set Up Supabase

3.1 Create Supabase Account

1. Go to supabase.com and create a free account
2. Create a new project
3. Wait for the project to be fully provisioned

3.2 Get Supabase Credentials

1. Go to Settings → API in your Supabase dashboard
2. Copy your Project URL
3. Copy your anon public key (publishable key)

3.3 Run Database Migrations

1. Go to SQL Editor in your Supabase dashboard
2. Run all SQL files from the supabase/migrations/ folder in order:
   • 20251204173307_remix_migration_from_pg_dump.sql
   • 20251204214612_backfill_existing_users.sql
   • 20251204214809_grant_admin_function.sql
   • 20251204215044_fix_admin_access.sql
   • 20251204215313_fix_user_roles_rls.sql
   • 20251204215525_create_storage_bucket.sql
   • 20251204220657_allow_admins_view_all_roles.sql
   • 20251204221214_create_event_hosts.sql
   • 20251204221437_add_host_invitations.sql
   • 20251204222519_add_username_to_profiles.sql
   • 20251204222911_add_bio_to_profiles.sql
   • 20251204231934_add_private_events.sql
   • 20251205000000_add_avatar_to_profiles.sql
   • 20251205000001_add_avatar_to_profiles.sql
   • 20251205000002_create_follows.sql
   • 20251205000003_ensure_username_from_email.sql
   • 20251205000004_fix_user_creation_trigger.sql

3.4 Set Up Storage Buckets

1. Go to Storage in your Supabase dashboard
2. Create a bucket named event-images and set it to Public
3. Create another bucket named avatars and set it to Public

Step 4: Set Up Google Maps API

1. Go to Google Cloud Console
2. Create a new project or select an existing one
3. Enable the Places API (New) in the API Library
4. Go to Credentials → Create Credentials → API Key
5. Copy the API key
6. Recommended: Restrict the API key to only work with Places API and your domain

Step 5: Configure Environment Variables

1. Create a .env file in the root directory
2. Add the following variables:

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_PUBLISHABLE_KEY=your_supabase_anon_key
VITE_GOOGLE_MAPS_API_KEY=your_google_maps_api_key

Replace the placeholders with your actual values from Steps 3 and 4.

Step 6: Run Development Server

npm run dev

The application will be available at http://localhost:8080

Step 7: Set Up Admin User (Optional)

1. Sign up for an account in your application
2. Go to Supabase SQL Editor
3. Run this SQL (replace with your email):

<code>INSERT INTO public.user_roles (user_id, role)
SELECT id, 'admin'::app_role
FROM auth.users
WHERE email = '[email protected]'
ON CONFLICT DO NOTHING;</code>

📦 Building for Production

<code>npm run build</code>

The production-ready files will be in the dist/ directory.

🌐 Deployment

Deploy to Vercel

1. Push your code to GitHub
2. Import your repository in Vercel
3. Add your environment variables in Vercel dashboard
4. Deploy!

Deploy to Netlify

1. Push your code to GitHub
2. Import your repository in Netlify
3. Build command: npm run build
4. Publish directory: dist
5. Add your environment variables
6. Deploy!

🐛 Troubleshooting

Common Issues

Issue: "Supabase client not initialized"
Solution: Make sure your .env file exists and contains valid Supabase credentials

Issue: Google Maps autocomplete not working
Solution: Verify your Google Maps API key is correct and Places API is enabled

Issue: Images not uploading
Solution: Check that storage buckets exist in Supabase and are set to public

Issue: Admin dashboard not accessible
Solution: Make sure you've granted admin role to your user (see Step 7)

Issue: Build errors
Solution: Make sure all dependencies are installed with npm install

📚 Additional Resources

• Full documentation included in README.md
• Supabase documentation: supabase.com/docs
• Google Maps API docs: developers.google.com/maps

Need Help? Contact support through Codester messaging system with your purchase code and issue description.