fiery-portal System Requirements Document

Introduction

The "fiery-portal" project is a full-stack College Event Registration Portal designed to facilitate the management and registration of college events. This document outlines the system requirements for the project, ensuring a robust, secure, and user-friendly application.

System Overview

The fiery-portal is a web-based application that allows college administrators to create and manage events, while students can view and register for these events. The system is built using a modern tech stack, including React for the frontend, Node.js with Express for the backend, and MongoDB for data storage. Authentication is handled using JWT, and the application emphasizes custom CSS for a unique look and feel.

Functional Requirements

• As an Admin, I should be able to log in using the credentials (admin / inspirante2026).
• As an Admin, I should be able to create new events with fields: name, date, venue, and capacity.
• As an Admin, I should be able to view all created events.
• As an Admin, I should be able to view the registration count for each event.
• As an Admin, I should be able to view all registrations for a specific event.
• As a Student, I should be able to log in using hardcoded user accounts.
• As a Student, I should be able to view a list of upcoming events sorted by date in ascending order.
• As a Student, I should be able to register for events.
• As a Student, I should be able to view my own registrations.
• As a System, I should prevent duplicate registrations for the same event by a student.
• As a System, I should disable registration for an event when its capacity is full.
• As a System, I should display a "Full" badge when an event's capacity is reached.
• As a System, I should display the capacity fill percentage with color coding: Green for <50%, Amber for 50–79%, and Red for 80%+.

User Personas

• Admin: Responsible for managing events and viewing registration data.
• Student: Can view and register for events, and manage their own registrations.

Core User Flows

• Admin Flow: Admin logs in -> Creates an event -> Views all events -> Checks registration count -> Views specific event registrations.
• Student Flow: Student logs in -> Views upcoming events -> Registers for an event -> Views own registrations.

Visuals Colors and Theme

• primary: #1A73E8 (Deep Blue)
• primary_light: #E8F0FE (Light Blue)
• secondary: #FF6F61 (Coral)
• accent: #FFD700 (Gold)
• highlight: #FFA500 (Orange)
• bg: #FFFFFF (White)
• surface: rgba(240, 240, 240, 0.8)
• text: #333333 (Dark Gray)
• text_muted: #777777 (Gray)
• border: rgba(200, 200, 200, 0.5)

Signature Design Concept

The fiery-portal will feature an interactive "Event Galaxy" homepage. This concept involves a 3D galaxy map where each star represents an event. Users can click on a star to open an event card, drag to rotate the galaxy, and hover to highlight connections between related events. This immersive experience will be built using @react-three/fiber and @react-three/drei for 3D rendering, providing a captivating and engaging interface for users.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, creating a layered depth effect as users scroll. Decorative elements will move at different speeds, enhancing the storytelling aspect of the portal. Internal pages will maintain a "static" interaction model for clarity and ease of use.

Non-Functional Requirements

• The system must ensure secure access control using JWT authentication.
• The application should handle errors gracefully with proper error messages.
• The system should be scalable to accommodate an increasing number of events and users.

Tech Stack

• Frontend: React (Vite)
• Backend: Node.js + Express
• Database: MongoDB
• Authentication: JWT
• Styling: Custom CSS only

Assumptions and Constraints

• The system assumes a stable internet connection for all users.
• The application will be hosted on a server capable of handling the expected load.
• The use of hardcoded student accounts is for initial testing purposes only.

Glossary

• JWT: JSON Web Token, a compact, URL-safe means of representing claims to be transferred between two parties.
• REST API: Representational State Transfer Application Programming Interface, a set of rules for building web services.
• Vite: A build tool that aims to provide a faster and leaner development experience for modern web projects.