A comprehensive sports facility booking and management system for MLR Institute of Technology (MLRIT) students and staff.
The MLRIT College Sports Hub is a modern React-based web application designed to streamline multi-sport facility bookings, team formation, and tournament management at MLRIT college. The system provides an intuitive interface for students to book facilities for badminton, tennis, basketball, volleyball, cricket, and football, find teammates, participate in tournaments, and manage their sports activities.
- User Registration: Students can sign up with their college credentials
- Secure Login: Email-based authentication with password protection
- User Types: Support for BTech, MBA, and Medical students with different access levels
- Session Management: Persistent login sessions with localStorage
- 6 Sports Supported: Badminton, Tennis, Basketball, Volleyball, Cricket, and Football
- 20+ Facilities: Various courts and grounds across different sports
- Real-time Availability: Live facility availability checking for all sports
- Smart Restrictions: Sport-specific time-based and student-type-based access rules
- Booking Management: Create, view, and cancel bookings across all sports
- Conflict Prevention: Prevents double bookings and enforces sport-specific booking limits
- Booking History: Complete history of past and upcoming bookings across all sports
- Player Registration: Register as a player looking for teammates
- Skill-based Matching: Match players based on skill levels (Beginner, Intermediate, Advanced)
- Availability Coordination: Schedule-based team formation
- Team Management: Create and manage badminton teams
- Tournament Listings: View upcoming tournaments and events
- Tournament Suggestions: Students can suggest new tournaments
- Registration System: Easy tournament registration process
- Event Details: Comprehensive tournament information including dates, locations, and descriptions
- Profile Management: Complete user profile with statistics
- Booking Analytics: Personal booking statistics and favorite courts
- Activity History: Track all sports-related activities
- Settings: Update personal information and preferences
- React 18 with TypeScript for type safety
- React Router v6 for navigation
- Context API + Hooks for state management
- CSS Modules for styling
- Responsive Design for mobile compatibility
- TypeScript: Enhanced development experience with type safety
- React Hooks: Modern React patterns for state and lifecycle management
- Local Storage: Client-side data persistence for demo purposes
- Date-fns: Date manipulation and formatting
- CSS Grid & Flexbox: Modern layout techniques
- Modular Sports Configuration: Easily configurable sports rules and facilities
- Node.js (v16 or higher)
- npm or yarn package manager
- Clone the repository
git clone <repository-url>
cd mlrit-sports-hub- Install dependencies
npm install- Start the development server
npm start- Access the application
- Open your browser and navigate to
http://localhost:3000 - The app will automatically reload when you make changes
For testing purposes, you can use these demo credentials:
- Email:
student@mlrit.ac.in - Password:
password123
Or register a new account using any @mlrit.ac.in email address.
mlrit-sports-hub/
├── public/ # Static assets
│ ├── index.html # Main HTML template
│ └── manifest.json # PWA manifest
├── src/ # Source code
│ ├── components/ # Reusable components
│ │ ├── Navbar/ # Navigation component
│ │ ├── ProtectedRoute/ # Route protection
│ │ └── BookingItem/ # Booking display component
│ ├── contexts/ # React contexts
│ │ ├── AuthContext.tsx # Authentication state
│ │ └── BookingContext.tsx # Multi-sport booking state
│ ├── data/ # Configuration and data
│ │ └── sportsConfig.ts # Sports facilities configuration
│ ├── pages/ # Page components
│ │ ├── Home/ # Landing page
│ │ ├── Auth/ # Login/Register
│ │ ├── Booking/ # Legacy badminton booking
│ │ ├── MultiSportBooking/ # Multi-sport facility booking
│ │ ├── Profile/ # User profile
│ │ ├── Team/ # Team formation
│ │ ├── Tournaments/ # Tournament management
│ │ ├── About/ # About page
│ │ ├── Contact/ # Contact information
│ │ └── Rules/ # Rules and regulations
│ ├── types/ # TypeScript type definitions
│ ├── utils/ # Utility functions
│ │ └── demoData.ts # Demo data initialization
│ ├── App.tsx # Main app component
│ ├── App.css # Global styles
│ ├── index.tsx # App entry point
│ └── index.css # Base styles
├── package.json # Dependencies and scripts
└── README.md # This file
-
Registration
- Visit the login page and click "Sign Up"
- Fill in your college details (Roll Number, Email, Phone, etc.)
- Select your student type (BTech/MBA/Medical)
- Create a secure password
-
Booking a Court
- Navigate to "Book Court"
- Select your preferred date and time
- Choose an available court (restrictions apply based on student type)
- Confirm your booking details
- Receive booking confirmation
-
Finding Teammates
- Go to "Find Team"
- Register your availability and skill level
- Browse other players looking for teammates
- Connect with compatible players
-
Tournament Participation
- Check "Tournaments" for upcoming events
- Submit tournament suggestions
- Register for tournaments when available
- 🏸 Badminton - 10 indoor courts with professional setup
- 🎾 Tennis - 4 outdoor courts with synthetic surface
- 🏀 Basketball - 3 courts (1 indoor, 2 outdoor)
- 🏐 Volleyball - 1 indoor court with professional setup
- 🏏 Cricket - 1 main ground + practice nets area
- ⚽ Football - 1 main ground with natural grass
Each sport has its own booking rules and restrictions:
- Badminton: Max 1 booking/day, 3 hours max, operates 7 AM - 10 PM
- Tennis: Max 1 booking/day, 2 hours max, operates 6 AM - 8 PM
- Basketball: Max 1 booking/day, 2 hours max, operates 6 AM - 9 PM
- Volleyball: Max 1 booking/day, 2 hours max, operates 7 AM - 9 PM
- Cricket: Max 1 booking/day, 4 hours max, operates 6 AM - 6 PM
- Football: Max 1 booking/day, 3 hours max, operates 6 AM - 7 PM
- One booking per day: Each student can book maximum one court per day
- Advance booking: Bookings must be made at least 10 minutes before slot time
- Cancellation policy: Cancel at least 30 minutes before your slot
- Maximum duration: 3 hours per booking
- 1:00 PM - 3:00 PM: Restricted for BTech/MBA students
- 3:00 PM - 6:00 PM: Courts 1-2 restricted for BTech/MBA students
- 3:00 PM - 6:00 PM: Courts 3-10 restricted for Medical students
- BTech Students: Limited access during peak hours
- MBA Students: Limited access during peak hours
- Medical Students: Priority access to courts 1-2 during afternoon hours
# Run all tests
npm test
# Run unit tests
npm run test:unit
# Run component tests
npm run test:components
# Run property-based tests
npm run test:properties- Unit Tests: Individual component and function testing
- Integration Tests: Component interaction testing
- Property-Based Tests: Using fast-check for robust testing
- User Interaction Tests: React Testing Library for user behavior
The application is fully responsive and optimized for:
- Desktop: Full-featured interface with all functionality
- Tablet: Adapted layout with touch-friendly controls
- Mobile: Streamlined interface with essential features
- Progressive Web App: Can be installed on mobile devices
- Input Validation: Comprehensive validation on both client and server
- XSS Protection: Content Security Policy and input encoding
- Authentication: Secure session handling with automatic expiry
- Data Privacy: Minimal data collection and secure storage
This is a frontend-only demo application with the following limitations:
- Data Persistence: Uses localStorage instead of a real database
- Authentication: Simulated authentication without real security
- Real-time Updates: No WebSocket integration for live updates
- File Uploads: No image upload functionality
- Email Notifications: No actual email sending capability
- Node.js/Express backend development
- MongoDB database integration
- JWT-based authentication
- RESTful API development
- Real-time notifications
- Advanced analytics dashboard
- Mobile app development
- Integration with college ERP system
- AI-powered scheduling suggestions
- Performance tracking and insights
- Advanced tournament management
- Multi-sport facility support
- 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
- TypeScript: Strict type checking enabled
- ESLint: Code linting and formatting
- React: Functional components with hooks
- CSS: BEM methodology for class naming
- Testing: Comprehensive test coverage required
- Email: support@mlrit.ac.in
- Response Time: Within 24 hours
- Email: sportsdesk@mlrit.ac.in
- Location: MLRIT Indoor Stadium, Main Campus
- Address: Dundigal, Hyderabad, Telangana 500043
This project is licensed under the MIT License - see the LICENSE file for details.
- MLRIT Administration: For supporting the digital transformation initiative
- Sports Department: For providing requirements and feedback
- Student Community: For testing and feature suggestions
- Development Team: For their dedication to creating this platform
Made with ❤️ for MLRIT College Community
For more information or to report issues, please contact the development team or create an issue in the repository.