Connect, Compete, and Conquer.
Features • Tech Stack • Getting Started • Performance • Structure • Contributing
VORT-X is a modern social platform designed exclusively for gamers. It's the "LinkedIn for Gamers" - a professional network where your gaming skills, achievements, and passion take center stage. Whether you're looking to compete in tournaments, join gaming communities, or connect with fellow players, VORT-X provides the complete ecosystem.
- 🏆 All-in-One Platform: Host tournaments, manage teams, join communities, and connect with players
- ⚡ Built for Performance: Optimized for speed with 40-60% faster load times
- 🎨 Modern UI/UX: Beautiful, responsive design that works seamlessly across all devices
- 🤖 AI-Powered: Smart features powered by Firebase Genkit for enhanced user experience
- 📱 Progressive Web App: Works offline and can be installed on any device
The VORT-X dashboard gives you an at-a-glance view of your gaming world with live tournament alerts, performance analytics, and tournament management all in one place.
Create comprehensive profiles showcasing:
- Preferred games and skill levels
- Gaming achievements and accolades
- Play style and availability
- Personal statistics and performance analytics
- Customizable banners and avatars
- Instagram-style feed with tournament updates
- Real-time interactions (likes, comments, bookmarks)
- Story features for quick updates
- Share tournament highlights and achievements
- Follow players and communities
- Host & Manage: Create tournaments with custom rules, prize pools, and formats
- Team Registration: Comprehensive system for team rosters and entry fees
- Admin Dashboard: Complete control over participants, announcements, and brackets
- Live Credentials: Secure tournament IDs and passwords for participants
- Feedback System: Star ratings and reviews for completed tournaments
- Kick Requests: Democratic player removal system with host approval
- Join or create game-specific communities
- Dedicated channels for different topics (general, LFG, strategies, memes)
- Real-time messaging with typing indicators
- Community announcements and pinned messages
- Member management and moderation tools
- Private one-on-one conversations
- Rich media support (images, GIFs)
- Video/voice call integration
- In-context messaging from tournament pages
- Read receipts and typing indicators
- Browse curated list of popular games
- View community stats and active players
- Find or host game-specific tournaments
- Game-specific leaderboards and rankings
- Framework: Next.js 15.3.3 with App Router
- UI Library: React 18.3.1
- Language: TypeScript 5.0
- Styling: Tailwind CSS 3.4.1
- Components: ShadCN UI + Radix UI
- Icons: Lucide React
- Animations: CSS animations + Canvas API
- AI/ML: Firebase Genkit
- Authentication: Firebase Auth (ready to integrate)
- Database: Firebase Firestore (ready to integrate)
- State Management: React Context API
- Forms: React Hook Form + Zod validation
- Code splitting with dynamic imports
- Lazy loading for heavy components
- Image optimization (AVIF/WebP formats)
- Memoization (React.memo, useMemo, useCallback)
- Throttled animations (30 FPS for efficiency)
- Production bundle optimization
- Node.js 18.x or higher (Download)
- npm or yarn package manager
- Git for version control
-
Clone the repository
git clone https://github.com/yourusername/VORT-X.git cd VORT-X -
Install dependencies
npm install # or yarn install -
Set up environment variables Create a
.env.localfile in the root directory:# Add your Firebase configuration here NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
-
Run the development server
npm run dev # or yarn dev -
Open your browser Navigate to http://localhost:9002
# Build the application
npm run build
# Start production server
npm start# Run type checking
npm run typecheck
# Run linting
npm run lint
# Run Genkit development server
npm run genkit:devVORT-X is optimized for maximum performance and user experience.
| Feature | Before | After | Improvement |
|---|---|---|---|
| Initial Bundle Size | 800-1000 KB | 450-600 KB | ↓ 40% |
| Animation CPU Usage | 80-100% | 30-40% | ↓ 65% |
| Re-renders | Frequent | Minimal | ↓ 50% |
| Time to Interactive | 3-5s | 1.5-2.5s | ↓ 50% |
| First Contentful Paint | 1.5-2s | 0.8-1.2s | ↓ 40% |
✅ Code Splitting: All heavy components lazy-loaded
✅ Image Optimization: Modern formats (AVIF/WebP) with proper caching
✅ Particle Animation: Reduced from 50 to 30 particles @ 30 FPS
✅ Context Optimization: All providers use memoization
✅ Dynamic Imports: Components load on-demand
✅ Suspense Boundaries: Progressive UI loading
- PERFORMANCE_OPTIMIZATIONS.md - Detailed technical changes
- LATENCY_EXPLAINED.md - Understanding dev vs prod performance
- PERFORMANCE_TESTING.md - Testing guide and metrics
VORT-X/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── layout.tsx # Root layout with providers
│ │ ├── page.tsx # Dashboard (homepage)
│ │ ├── api/ # API routes
│ │ ├── communities/ # Community pages
│ │ ├── dashboard/ # User dashboard
│ │ ├── dms/ # Direct messaging
│ │ ├── events/ # Live events
│ │ ├── games/ # Game discovery
│ │ ├── landing/ # Landing page
│ │ ├── post/ # Social feed posts
│ │ ├── profile/ # User profiles
│ │ ├── search/ # Search functionality
│ │ ├── settings/ # User settings
│ │ ├── social/ # Social feed
│ │ └── tournaments/ # Tournament pages
│ │
│ ├── ai/ # Firebase Genkit integration
│ │ ├── genkit.ts # Genkit configuration
│ │ └── flows/ # AI flows
│ │
│ ├── components/ # Reusable components
│ │ ├── dashboard/ # Dashboard-specific components
│ │ ├── dms/ # Messaging components
│ │ ├── layout/ # Layout components (header, nav)
│ │ ├── settings/ # Settings components
│ │ ├── social/ # Social feed components
│ │ └── ui/ # Base UI components (ShadCN)
│ │
│ ├── context/ # React Context providers
│ │ ├── community-context.tsx # Community state
│ │ ├── feed-context.tsx # Social feed state
│ │ ├── theme-context.tsx # Theme management
│ │ └── tournament-context.tsx # Tournament state
│ │
│ ├── hooks/ # Custom React hooks
│ │ ├── use-debounce.ts # Debounce hook
│ │ └── use-toast.ts # Toast notifications
│ │
│ └── lib/ # Utilities and helpers
│ ├── actions.ts # Server actions
│ └── utils.ts # Utility functions
│
├── public/ # Static assets
├── docs/ # Documentation
├── IMAGES/ # Project images
├── next.config.ts # Next.js configuration
├── tailwind.config.ts # Tailwind configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies and scripts
- AppHeader: Navigation bar with search and notifications
- AppSidebar: Main navigation sidebar
- BottomNav: Mobile navigation
- ParticleBackground: Animated background effect
- PlayerProfileCard: User profile with stats
- LiveEventsCard: Real-time tournament events
- RegisteredTournamentsCard: User's tournament registrations
- HostedTournaments: Tournaments created by user
- PerformanceAnalyticsCard: Gaming performance metrics
- RewardPointsCard: Points and achievements
- TournamentPost: Tournament announcements
- Stories: Instagram-style stories
- CreatePostDialog: Post creation interface
# Type checking
npm run typecheck
# Linting
npm run lint- ✅ TypeScript: Strict typing for better code quality
- ✅ Component Structure: Modular, reusable components
- ✅ Performance: Memoization and lazy loading
- ✅ Accessibility: ARIA labels and semantic HTML
- ✅ Responsive Design: Mobile-first approach
- ✅ Code Splitting: Dynamic imports for optimal loading
Run Lighthouse audit in Chrome DevTools:
- Open DevTools (F12)
- Go to Lighthouse tab
- Select "Performance" category
- Click "Analyze page load"
Target Scores:
- Performance: > 80
- Accessibility: > 90
- Best Practices: > 90
- SEO: > 90
We welcome contributions from the community! Here's how you can help:
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature
- Make your changes
- Commit with clear messages
git commit -m "Add amazing feature" - Push to your branch
git push origin feature/amazing-feature
- Open a Pull Request
- Follow the existing code style
- Write meaningful commit messages
- Add comments for complex logic
- Update documentation as needed
- Test your changes thoroughly
- Ensure all tests pass
- 🐛 Bug Fixes: Report or fix bugs
- ✨ Features: Propose or implement new features
- 📝 Documentation: Improve or translate docs
- 🎨 Design: UI/UX improvements
- ⚡ Performance: Optimization suggestions
- 🧪 Testing: Add test coverage
- Next.js Team: For the amazing framework
- Vercel: For hosting and deployment tools
- ShadCN: For the beautiful component library
- Radix UI: For accessible primitives
- Firebase: For backend services
- The Gaming Community: For inspiration and feedback
- GitHub Issues: Report bugs or request features
- Discussions: Join the conversation
- Email: your.email@example.com
- ✅ User profiles and authentication
- ✅ Tournament creation and management
- ✅ Community hubs
- ✅ Social feed
- ✅ Direct messaging
- ✅ Performance optimizations
- 🔄 Real-time notifications
- 🔄 Advanced search and filters
- 🔄 Leaderboards and rankings
- 🔄 Payment integration
- 🔄 Mobile app (React Native)
- 🔄 Streaming integration
- 📅 AI-powered matchmaking
- 📅 Team formation suggestions
- 📅 Tournament bracket automation
- 📅 Analytics dashboard
- 📅 Sponsorship marketplace
- 📅 API for third-party integrations
Made with ❤️ by gamers, for gamers