MIT x Clubs System Requirements Document

1. Introduction

The MIT x Clubs project, branded as "MIT ClubHub," is a modern, premium mobile application designed to facilitate college club management for university students. The application aims to provide a seamless and professional user experience with a focus on modern UI principles inspired by Apple, ensuring a clean, minimal, and responsive design.

2. System Overview

MIT ClubHub is designed to be a comprehensive platform for managing college clubs, events, and student interactions. It will be fully responsive and available on both Android and iPhone platforms. The application will feature a modern UI with rounded corners, soft shadows, and a light mode theme. The primary colors will include Midnight Blue, Sky Blue, and White, with typography set in Inter or SF Pro font. Consistent spacing will be maintained using an 8pt grid system.

3. Functional Requirements as Story Points

• As a Student, I should be able to view a splash screen with the MIT ClubHub logo and an animated illustration.
• As a Student, I should be able to log in using my college email and password or continue with Google.
• As a Student, I should be able to register by providing my name, PRN, department, year, mobile number, college email, and password.
• As a Student, I should see a personalized home dashboard with a greeting, search bar, upcoming events, featured clubs, categories, quick actions, today's events, and notifications.
• As a Student, I should be able to search for clubs and filter them by category.
• As a Student, I should be able to view club details, including the club logo, description, faculty coordinator, core team, upcoming events, and gallery.
• As a Student, I should be able to search for events, apply filters, and view event details.
• As a Student, I should be able to register for events and add them to my calendar.
• As a Student, I should receive a registration success screen with a QR code and event pass.
• As a Student, I should be able to scan QR codes for attendance and view my attendance history.
• As a Student, I should be able to view and download certificates and share them.
• As a Student, I should receive notifications for club updates, event reminders, and approval messages.
• As a Student, I should be able to participate in club group chats, faculty chats, and individual chats.
• As a Student, I should be able to view and edit my profile, including my photo, department, PRN, skills, clubs joined, events attended, and certificates earned.
• As a Student, I should be able to access settings to toggle dark mode, manage notifications, view privacy settings, learn about the app, and log out.

4. User Personas

• Student: The primary user of the application, responsible for interacting with clubs, events, and other students.

5. Core User Flows

• Student opens the app -> views splash screen -> logs in or registers -> accesses home dashboard -> searches for clubs/events -> views details -> registers for events -> receives notifications -> participates in chats -> manages profile and settings.

6. Visuals Colors and Theme

• primary: Midnight Blue (#1E3A8A)
• primary_light: Sky Blue (#38BDF8)
• secondary: White (#FFFFFF)
• accent: Sky Blue (#38BDF8)
• highlight: Midnight Blue (#1E3A8A)
• bg: White (#FFFFFF)
• surface: Light Gray (#F3F4F6)
• text: Dark Gray (#1F2937)
• text_muted: Gray (#6B7280)
• border: Light Gray (#E5E7EB)

7. Signature Design Concept

Interactive Club Universe

The home page of MIT ClubHub will feature an interactive "Club Universe" concept. Students will see a dynamic, animated universe where each club is represented as a planet. Users can navigate through this universe by swiping or tapping on planets to explore different clubs. Each planet will have a unique animation and color scheme, reflecting the club's identity. The universe will be rendered using motion/react for smooth transitions and interactions.

LANDING HERO MOTION BRIEF

The landing hero will depict a student journeying through the "Club Universe," with planets (clubs) orbiting around. As the student selects a planet, it zooms in to reveal club details, showcasing the transformation from exploration to engagement. The animation will loop every 10 seconds, with interactive elements allowing users to pause and explore at their own pace. The reduced-motion state will simplify animations for accessibility.

8. Interaction Model & Motion Direction

• Interaction Model: Animated
• The landing page will feature moderate scroll-triggered reveals and hover transitions, with spring physics on interactive elements to enhance user engagement.

9. Non-Functional Requirements

• The application must be fully responsive and perform consistently across Android and iPhone devices.
• The UI should maintain a high level of accessibility, ensuring all users can interact with the app effectively.

10. Tech Stack

• Frontend: React Native for mobile app development.
• Backend: FastAPI with Python.
• Database: MySQL or MariaDB, with Alembic for migrations.
• AI Models: Not applicable.
• AI Tools: Not applicable.
• Local Orchestration: Docker, docker-compose.
• Server-side Orchestration: Kubernetes.

11. Assumptions and Constraints

• The app will be used primarily by university students in India.
• The design will adhere to modern UI principles, focusing on minimalism and professionalism.
• The app will support English as the primary language.

12. Glossary

• PRN: Permanent Registration Number, a unique identifier for students.
• Club Universe: A conceptual representation of clubs as planets within the app.
• Responsive Design: The app's ability to adapt to different screen sizes and orientations.