🚀 Team Cohort - Intelligent Team Builder

Empowerment Through Learning - Build balanced, high-performing teams with smart random allocation. ✨

🌟 Features

⚡ Smart Allocation

Random team distribution based on roles, skills, and custom templates. Fair, balanced, and intelligent.

🎯 Instant Generation

Create perfectly balanced teams in seconds with a single click. No manual sorting required.

🛠️ Fully Customizable

• Define unlimited custom roles with neon color coding
• Create multiple team templates with specific role requirements
• Bulk import members via CSV format
• Export results as CSV for easy sharing

🎨 Modern UI/UX

• Neon Cyberpunk Aesthetic - Stunning glassmorphism effects with vibrant gradients
• Fully Responsive - Perfect experience on mobile, tablet, and desktop
• Smooth Animations - Fluid transitions and interactive hover effects
• Dark Mode Native - Eye-friendly design with cosmic color palette

🖼️ Screenshots

Landing Page

Beautiful hero section with feature highlights and smooth animations.

Dashboard Views

• Roles Tab - Define and manage team roles with color-coded tags
• Personnel Tab - Add members individually or in bulk
• Templates Tab - Create custom team structures
• Generate Tab - Random team allocation engine
• Results Tab - View generated teams with detailed breakdown

🚀 Quick Start

Prerequisites

• Node.js 16+ and npm/yarn

Installation

# Clone the repository
git clone https://github.com/mutahir-muhammad/Cohort.git
cd Cohort

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

The app will be available at http://localhost:5173

💻 Tech Stack

• Frontend Framework: React 18.3.1 with Hooks
• Build Tool: Vite 5.3.1 (Lightning-fast HMR)
• Styling: Tailwind CSS 3.4.1
• Icons: Lucide React 0.309.0
• State Management: React useState & useEffect hooks
• Memoization: useMemo & useCallback for performance

🎮 Usage

1. Launch the App - Click "Launch Team Builder" on the landing page
2. Define Roles - Set up your team role structure (Lead, Developer, Designer, etc.)
3. Add Members - Import personnel individually or via bulk CSV
4. Create Templates - Design team composition patterns
5. Generate Teams - Create balanced groups instantly
6. Export Results - Download team assignments as CSV

🎨 Design System

Color Palette

Starfield Black: #05050A    // Background
Nebula Blue:     #00E5FF    // Primary accent
Hyper Violet:    #B04CFF    // Secondary accent
Cosmic Pink:     #FF47C8    // Tertiary accent
Plasma Green:    #A8FF4F    // Success states
Laser Red:       #FF3860    // Danger states

Key Features

• Glassmorphism cards with backdrop blur
• 3D hover effects with perspective transforms
• Custom neon slider with gradient fills
• Responsive grid layouts (mobile-first)
• Smooth fade-in animations

📱 Responsive Design

• Mobile (< 640px): Single column layout, touch-optimized
• Tablet (640px - 1024px): Two-column grids, adaptive nav
• Desktop (> 1024px): Three-column layouts, full features

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Mutahir Muhammad

• GitHub: @mutahir-muhammad

🙏 Acknowledgments

• React Team for the amazing framework
• Tailwind CSS for the utility-first approach
• Lucide for beautiful open-source icons
• Vite for blazing-fast development experience

---

Built with ❤️ by Muhammad Mutahir
© 2025 Cohort. Empowerment Through Learning.