Empowering individuals through community and mentorship
A focused mentoring and community platform, centered around the BGr8 initiative and powered by a unique MentorAlgorithm with advanced availability management and intelligent search capabilities.
🚀 Quick Start • 🌟 Ambassador Program • 📖 Documentation • 🤝 Contributing • 📄 License
📖 Quick Navigation
| 🏢 Platform Unit | 📝 Description | 🚀 Status |
|---|---|---|
| 🌟 BGr8 | Community, events, and mentoring | ✅ Live |
bgr8 Platform is dedicated to empowering individuals through the BGr8 community and a robust mentoring program. Our platform focuses exclusively on creating meaningful connections and fostering growth through:
- 🤝 Community Building - Connect with like-minded individuals
- 🎓 Mentorship Programs - Advanced algorithm-based matching with real-time availability
- 🌟 Ambassador Program - Join our network of passionate advocates making a difference
- 📈 Personal Growth - Structured learning and development
- 🌍 Diverse Network - Inclusive and supportive environment
- 🔍 Smart Discovery - Intelligent search and filtering system
- 📅 Flexible Scheduling - Integrated availability management for mentors
🌟 Click to explore our amazing features!
| Feature | Description | Status |
|---|---|---|
| 🌟 BGr8 Community Hub | Centralized community platform | ✅ Live |
| 🤝 Mentor Matching | Advanced MentorAlgorithm system with real-time availability | ✅ Live |
| 🌟 Ambassador Program | Join our network of passionate advocates | ✅ Live |
| 📝 Ambassador Applications | Streamlined application process with admin management | ✅ Live |
| 🔍 Smart Search System | Intelligent search with dropdown suggestions and filtering | ✅ Live |
| 📅 Cal.com Booking System | Third-party calendar integration | ✅ Live |
| 📅 Availability Management | Direct mentor availability creation and management | ✅ Live |
| 🔒 Secure Authentication | Firebase-powered security | ✅ Live |
| 📱 Responsive Design | Mobile-first approach | ✅ Live |
| 📊 Admin Dashboard | User and data management panel | ✅ Live |
| Technology | Purpose | Status |
|---|---|---|
| 🔑 Firebase Auth | User authentication | ✅ Live |
| 🔥 Firestore DB | Real-time database | ✅ Live |
| 📅 Cal.com Integration | Advanced booking system | ✅ Live |
| ⚡ Real-time Updates | Live data synchronization | ✅ Live |
| 🧑💻 React + TypeScript | Modern frontend stack | ✅ Live |
| 🎨 CSS Variables | Consistent design system | ✅ Live |
| Feature | Description | Status |
|---|---|---|
| 🔍 Enhanced Search | Dropdown suggestions, smart filtering, and improved UI | ✅ Live |
| 📊 Filter Tabs | Relevant mentorship categories with count bubbles | ✅ Live |
| 👤 Profile Modals | Clickable mentor cards with full profile display | ✅ Live |
| 📅 Availability Integration | Real-time availability pulling from Cal.com and bookings | ✅ Live |
| 🛠️ Data Generation | Comprehensive testing tools for profiles and availability | ✅ Live |
| 🗑️ Smart Cleanup | Cascading deletes and bulk data management | ✅ Live |
| 🎨 Enhanced UI | Improved styling and user experience | ✅ Live |
| 🐛 Advanced Feedback System | Comprehensive testing feedback with file attachments | ✅ Live |
| 🔐 Role-Based Access Control | Admin/Developer role management and permissions | ✅ Live |
| 📎 File Attachment System | Firebase Storage integration for feedback tickets | ✅ Live |
| 🖼️ Image Overlay Viewer | Full-screen image viewing with download capabilities | ✅ Live |
| 📊 Enhanced Analytics | Detailed feedback analytics with CSV export | ✅ Live |
| Feature | Description | Status |
|---|---|---|
| 🎫 Ticket Management | Create, edit, view, and delete feedback tickets | ✅ Live |
| 📎 File Attachments | Upload images, videos, documents (max 10MB each) | ✅ Live |
| 🏷️ Smart Categorization | Bug reports, feature requests, UI issues, performance | ✅ Live |
| ⭐ Priority System | Low, Medium, High, Critical priority levels | ✅ Live |
| 📊 Status Tracking | Draft, Open, In Progress, Resolved, Closed, Duplicate | ✅ Live |
| 💬 Comments System | Internal and public comments with attachments | ✅ Live |
| 👍 Voting System | Upvote/downvote tickets for prioritization | ✅ Live |
| 🔍 Advanced Search | Search by title, description, tags, and metadata | ✅ Live |
| 📈 Analytics Dashboard | Comprehensive feedback analytics with CSV export | ✅ Live |
| 🖼️ Image Viewer | Full-screen image overlay with download functionality | ✅ Live |
| 🎯 Testing Fields | Browser info, OS, device type, screen resolution | ✅ Live |
| 🔄 Auto-Detection | Automatic screen resolution and browser detection | ✅ Live |
| Feature | Description | Status |
|---|---|---|
| 🛡️ Input Validation | Comprehensive data sanitization | ✅ Live |
| 🔒 Rate Limiting | API and authentication rate limiting | ✅ Live |
| 🚫 XSS Protection | Cross-site scripting prevention | ✅ Live |
| 🛡️ CSRF Protection | Cross-site request forgery prevention | ✅ Live |
| 🔐 Password Security | Strong password requirements (12+ chars) | ✅ Live |
| 🗑️ Cascading Deletes | Maintains database integrity | ✅ Live |
| 👥 Role-Based Access | Admin/Developer role management and permissions | ✅ Live |
Join our network of passionate advocates making a real difference in communities worldwide! 🌍
The BGr8 Ambassador Program is our community-driven initiative that empowers passionate individuals to spread our mission of creating positive change through mentorship and community development.
| Feature | Description | Benefits |
|---|---|---|
| 🌟 Community Advocacy | Represent BGr8 in your local community | Build meaningful connections and make an impact |
| 🤝 Network Building | Connect potential mentors and mentees | Expand your professional and personal network |
| 📈 Personal Growth | Develop leadership and communication skills | Enhance your professional profile |
| 🎯 Event Organization | Organize and participate in community events | Strengthen community bonds and visibility |
| 💬 Feedback & Insights | Provide valuable feedback to improve our programs | Shape the future of mentorship |
- 📝 Apply Online: Visit our Ambassador Page to submit your application
- 📋 Complete Application: Fill out our comprehensive application form with:
- Personal information and experience
- Motivation and availability
- Social media presence (Instagram, LinkedIn, Twitter, Facebook, TikTok, YouTube)
- Location and community involvement
- 👥 Admin Review: Our team reviews your application thoroughly
- ✅ Approval & Onboarding: Get approved and receive your ambassador role
- 🌟 Start Making Impact: Begin representing BGr8 in your community
- 500+ Active Ambassadors across the globe
- 50+ Countries represented
- 10,000+ Lives Impacted through ambassador efforts
- Real-time Tracking of ambassador activities and impact
- Share BGr8's Mission: Spread awareness about our platform and values
- Connect People: Introduce potential mentors and mentees to our platform
- Organize Events: Plan and participate in community events and activities
- Provide Feedback: Share insights to help improve our programs
- Professional Representation: Represent BGr8 professionally in your community
- 🌟 Make an Impact: Create meaningful change in your community
- 🤝 Build Connections: Connect with mentors, mentees, and fellow ambassadors
- 📈 Personal Growth: Develop leadership and communication skills
- 🌍 Global Network: Join a worldwide network of passionate advocates
- 📚 Learning Opportunities: Access to exclusive resources and training
Our comprehensive admin system allows administrators to:
- Review Applications: Thoroughly evaluate ambassador applications
- Track Statistics: Monitor active ambassadors vs. applications
- Manage Approvals: Approve/reject applications with automatic role assignment
- Monitor Impact: Track ambassador activities and community engagement
Learn more about admin management in our Admin Portal Overview
graph TD
A[🎨 Frontend] --> B[⚛️ React + TypeScript]
A --> C[⚡ Vite 6.1]
A --> D[🎨 CSS Variables]
E[🔧 Backend Services] --> F[🔥 Firebase 11.3]
F --> G[🔐 Authentication]
F --> H[🗄️ Firestore]
F --> I[📦 Storage]
L[📅 Booking System] --> M[🌐 Cal.com API]
L --> N[📅 Availability Management]
L --> O[📋 Event Types]
L --> P[📊 Bookings Management]
R[🛠️ Admin Tools] --> S[👥 Profile Generation]
R --> T[📅 Availability Generation]
R --> U[🗑️ Data Cleanup]
R --> Z[🐛 Feedback System]
V[🛡️ Security] --> W[🔒 Rate Limiting]
V --> X[🛡️ Input Validation]
V --> Y[🔐 Password Security]
V --> AA[👥 Role-Based Access]
BB[📎 File Management] --> CC[🖼️ Image Overlay]
BB --> DD[📥 File Downloads]
BB --> EE[📦 Firebase Storage]
style A fill:#61DAFB
style E fill:#FFCA28
style F fill:#FF6B35
style L fill:#00E676
style R fill:#FF9800
style V fill:#E91E63
style BB fill:#9C27B0
Our platform leverages cutting-edge technologies for optimal performance and user experience.
- 🏢 Admin Portal Overview - Complete admin portal guide and features
- 🐛 Testing Feedback System - Detailed feedback management guide
- ⚡ Admin Quick Reference - Quick reference for common admin tasks
- 📋 Changelog - Detailed version history and updates
- 🤝 Contributing Guide - How to contribute to the project
- 🔒 Security Policy - Security guidelines and reporting
- 📄 License - MIT License details
- 🏗️ Architecture Overview - System architecture and design decisions
- 🔧 Development Setup - Detailed development environment setup
- 🚀 Deployment Guide - Production deployment instructions
- 📊 API Documentation - API endpoints and usage
Get up and running in under 5 minutes! 🚀
git clone https://github.com/Hum2a/bgr8.git
cd bgr8npm installGet .env file from Hum2a (see Environment Variables section for details)
For local development with Firebase emulators, see detailed setup instructions in firebase_emulator/README.md
npm run devBefore you begin, ensure you have the following installed:
| Requirement | Version | Download |
|---|---|---|
| 🟢 Node.js | v16.x or higher |
Download |
| 📦 npm | v8.x or higher |
Included with Node.js |
| 🔥 Firebase Account | Any | Sign Up |
📋 Detailed Installation Guide
# Clone the repository
git clone https://github.com/Hum2a/bgr8.git
# Navigate to project directory
cd bgr8# Install all dependencies
npm install
⚠️ Important: You will need your own Firebase account. Get the correct.envfile from Hum2a to place in the root directory.
# Start the main application
npm run dev🎉 Congratulations! Your development environment is now ready.
🚀 Deployment Instructions
# Create optimized production build
npm run build
# Preview production build locally
npm run preview| Platform | Instructions | Status |
|---|---|---|
| 🚀 Vercel | Connect GitHub repo | ✅ Supported |
| ☁️ Netlify | Drag & drop build folder | ✅ Supported |
| 🔥 Firebase Hosting | firebase deploy |
✅ Supported |
Required environment variables for full functionality
🔐 View all environment variables
| Variable | Description | Required | Example |
|---|---|---|---|
VITE_FIREBASE_API_KEY |
Firebase API Key | ✅ | AIzaSyC... |
VITE_FIREBASE_AUTH_DOMAIN |
Firebase Auth Domain | ✅ | project.firebaseapp.com |
VITE_FIREBASE_PROJECT_ID |
Firebase Project ID | ✅ | your-project-id |
VITE_FIREBASE_STORAGE_BUCKET |
Firebase Storage Bucket | ✅ | project.appspot.com |
VITE_FIREBASE_MESSAGING_SENDER_ID |
Firebase Messaging Sender ID | ✅ | 123456789 |
VITE_FIREBASE_APP_ID |
Firebase App ID | ✅ | 1:123456789:web:abc123 |
VITE_FIREBASE_MEASUREMENT_ID |
Firebase Measurement ID | ✅ | G-XXXXXXXXXX |
VITE_USE_EMULATORS |
Enable Firebase emulators for development | true or false |
release.sh - A cross-platform bash script for managing semantic versioned release tags
- ✅ Git installed and configured
- ✅ Remote repository set up (
origin) - ✅ Bash shell (works on Linux/macOS/Git Bash for Windows)
Set-Alias -Name bash -Value "<absolute_path_to_git_installation>\bin\bash.exe"
# Example: C:\Program Files\Git\bin\bash.exe# Linux/MacOS
./release.sh [OPTIONS]
# Windows
bash release.sh [OPTIONS]| Flag | Description | Example |
|---|---|---|
--major |
Increment major version | v2.0.0 |
--minor |
Increment minor version | v1.1.0 |
--patch |
Increment patch version | v1.0.1 (default) |
--name NAME |
Append custom name | --name beta → v1.0.0-beta |
--set-tag TAG |
Set specific tag | --set-tag v1.2.3 |
--current |
Show current release tag | Displays current version |
--force |
Force tag creation | Override existing tags |
--help |
Show help message | Display usage information |
- 🔄 Always syncs with remote tags first
- ✅ Validates tag format (vX.Y.Z or vX.Y.Z-NAME)
- 🚫 Prevents duplicate tags
📂 View complete project structure
bgr8/
├── 📁 src/
│ ├── 🧩 components/ # React components
│ │ ├── 👨💼 admin/ # Admin-specific components
│ │ │ ├── 📊 Analytics components (FeedbackAnalytics, BookingAnalytics)
│ │ │ ├── 🎲 GenerateRandomProfile.tsx
│ │ │ ├── 👥 MentorManagement.tsx
│ │ │ ├── 📋 Bookings management (BookingsTable, BookingsGrouped)
│ │ │ ├── 📅 SessionsManagement.tsx
│ │ │ ├── 🔧 Admin utilities (AdminMentorModal, BookingDetailsModal)
│ │ │ └── 🐛 Feedback system (RoleManagement, RoleManagementModal)
│ │ ├── 🎬 animations/ # Animation components (LoadingSpinner)
│ │ ├── 🎨 ui/ # UI components
│ │ ├── 📝 feedback/ # Feedback components (StatsTiles)
│ │ ├── 📅 sessions/ # Session-related components
│ │ ├── 🧩 modals/ # Modal components
│ │ │ ├── 🐛 Feedback modals (CreateTicketModal, ViewTicketModal, EditTicketModal)
│ │ │ ├── 🖼️ ImageOverlay.tsx
│ │ │ ├── 💬 CommentsSidebar.tsx
│ │ │ └── 🗑️ DeleteTicketModal.tsx
│ │ └── 🧠 widgets/ # Widget components
│ │ └── 🎓 MentorAlgorithm/ # Mentor matching logic
│ │ ├── 📅 availability/ # Availability management
│ │ ├── 📅 booking/ # Booking system
│ │ ├── 🔗 CalCom/ # Cal.com integration
│ │ └── 🧮 algorithm/ # Matching algorithm (matchUsers.ts)
│ ├── 📄 pages/ # Page components
│ │ ├── 👨💼 adminPages/ # Admin pages (AdminPortal, AdminEnquiries, AdminSettings)
│ │ ├── 🔐 authPages/ # Authentication pages (SignIn, Register, ForgotPassword)
│ │ ├── 💼 businessPages/ # Business pages (BGr8)
│ │ ├── 🎓 mentorPages/ # Mentor-related pages
│ │ └── 🛠️ utilPages/ # Utility pages (Profile, Settings, Feedback)
│ ├── 🎨 styles/ # CSS stylesheets
│ │ ├── 👨💼 adminStyles/ # Admin-specific styles
│ │ ├── 💼 businessStyles/ # Business-specific styles
│ │ ├── 🧩 components/ # Component-specific styles
│ │ └── 💳 payment/ # Payment-related styles (Success, Cancel)
│ ├── 🪝 hooks/ # Custom React hooks (useAuth, useIsMobile)
│ ├── 🔄 contexts/ # React context providers (AuthContext)
│ ├── 🛠️ utils/ # Utility functions
│ │ ├── 🔐 security.ts # Security utilities
│ │ ├── 🛡️ securityMonitor.ts # Security monitoring
│ │ ├── 👤 userProfile.ts # User profile utilities
│ │ ├── 🎨 iconMapping.tsx # Icon mapping utilities
│ │ ├── 📱 screenResolution.ts # Screen resolution detection
│ │ ├── 📥 fileDownload.ts # File download utilities
│ │ └── 🔄 updatePermissions.ts # Permission management
│ ├── 📝 types/ # TypeScript type definitions
│ │ ├── 👤 user.ts # User profile types
│ │ ├── 📅 sessions.ts # Session types
│ │ ├── 📋 bookings.ts # Booking types
│ │ ├── 🏢 b8fc.ts # Business types
│ │ ├── 👨💼 admin.ts # Admin types
│ │ ├── 🐛 feedback.ts # Feedback system types
│ │ └── 🔐 verification.ts # Verification types
│ ├── 🔥 firebase/ # Firebase configuration
│ │ ├── 🔧 firebase.tsx # Main Firebase config
│ │ └── 🛠️ emulatorUtils.ts # Emulator utilities
│ ├── 🛡️ middleware/ # Security middleware
│ ├── 🧭 navigation/ # Navigation logic (navigation.tsx)
│ ├── 📊 constants/ # Application constants
│ │ ├── 🎓 skillsByCategory.ts
│ │ ├── 🏛️ ukEducationLevels.ts
│ │ ├── 🏢 industries.ts
│ │ ├── 🎨 hobbiesByCategory.ts
│ │ ├── 🏛️ religionOptions.ts
│ │ ├── 🌍 ethnicityOptions.ts
│ │ └── 🗺️ ukCounties.ts
│ ├── 📊 data/ # Sample data and autofill
│ │ └── 🎲 autofillData.ts # Test data for development
│ ├── 🔧 config/ # Configuration files (security.ts)
│ ├── 🎨 assets/ # Static assets (images, etc.)
│ └── 🔧 services/ # Service layer
│ ├── 📅 sessionsService.ts
│ ├── 🐛 feedbackService.ts
│ ├── 👨💻 developerFeedbackService.ts
│ ├── 👥 mentorFeedbackService.ts
│ ├── 🔐 verificationService.ts
│ └── 📊 pagePermissionsService.ts
├── 🌐 public/ # Public static assets
├── 🔥 firebase_emulator/ # Firebase emulator configuration
│ ├── 📄 README.md # Emulator setup instructions
│ ├── 📜 download_cloud_data.sh # Data export script
│ ├── ⚙️ firebase.json # Firebase configuration
│ ├── 🔧 .firebaserc # Firebase project configuration
│ ├── 🛡️ firestore.rules # Firestore security rules
│ ├── 📁 storage.rules # Storage security rules
│ └── 📊 data/ # Exported data storage
├── 📄 docs/ # Documentation files
├── 🔒 .env # Environment variables
├── 📦 package.json # Dependencies and scripts
├── ⚙️ vite.config.ts # Vite configuration
├── 📝 tsconfig.json # TypeScript configuration
├── 🎨 eslint.config.js # ESLint configuration
├── 🏷️ release.sh # Release tag manager script
└── 📄 README.md # This file
We welcome contributions from the community! 🌟
📋 Contributing Guidelines
- 🍴 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 TypeScript best practices
- 🎨 Maintain consistent code style using CSS variables
- 📝 Write meaningful commit messages
- 📚 Update documentation as needed
- 🔍 Ensure proper contrast for UI elements
- 📱 Test responsive design across devices
We are committed to providing a welcoming and inspiring community for all. Please read our Code of Conduct for details.
This project is licensed under the MIT License - see the LICENSE file for details.
Security is our top priority
🛡️ Security Information
If you discover a security vulnerability, please:
- 🔒 Do NOT create a public GitHub issue
- 📧 Email us directly at security@bgr8.com
- ⏰ Wait for our response (we aim to respond within 24 hours)
- 🔐 Firebase Authentication - Secure user management
- 🛡️ Input Validation - Comprehensive data sanitization
- 🔒 HTTPS Only - Encrypted data transmission
- 🚫 XSS Protection - Cross-site scripting prevention
- 🛡️ CSRF Protection - Cross-site request forgery prevention
- 🗑️ Cascading Deletes - Maintains database integrity
- 🔒 Rate Limiting - API and authentication rate limiting
- 🔐 Password Security - Strong password requirements (12+ characters)
- 🛡️ Security Headers - Comprehensive security headers
- 🔒 Session Management - Secure session handling
- 🛡️ ESLint Security - Security-focused linting
- 🔍 Snyk - Vulnerability scanning
- 📊 Security Monitoring - Real-time security monitoring
- 🔐 Middleware Security - Request validation and sanitization
Get in touch with our team
| Contact Method | Details |
|---|---|
| 👨💻 Developer | Humza (Hum2a) |
| 🐛 Issues | GitHub Issues |
| Contact Us |
Special thanks to all contributors and the amazing BGr8 community! 🌟
|
Hum2a Humza Butt |
YakMan101 Shayak Hussain |
aoladuti1 Antonio Oladuti |
- ⚛️ React 18.2 - UI framework
- 🔥 Firebase 11.3 - Backend services
- 📅 Cal.com - Calendar & booking system
- ⚡ Vite 6.1 - Build tool
- 🎨 CSS3 - Styling with CSS variables
- 🔍 Search Algorithms - Intelligent filtering and discovery
- 📊 Data Management - Comprehensive testing and cleanup tools
- 🛡️ Security Tools - ESLint security, Snyk, custom security middleware
Made with ❤️ by the BGr8 Team