Product Requirements: Events
1. General Information
Product name: Static Events Page
Type: Static frontend, no backend or JS-based logic
Library: Bootstrap 5, FontAwesome 7, optional animation libraries (e.g. AOS,
Animate.css)
Created date: 03/08/2025
Version: 1.0
2. Objectives
Showcase product collections and categories
Encourage users to browse and simulate shopping behavior
Display ongoing, upcoming, and closed events in a hub format
Allow users (students) to explore events and understand their context
Encourage exploration of gamified tasks (Individual/ Clan / Server events)
Provide a clean and visually engaging event board simulation
Present an eCommerce-style layout without actual backend or interactivity
3. Scope
✅ Events Page
✅ Event Detail Page
❌ No login, backend, or actual cart logic
❌ No JavaScript-heavy components
Notice: These pages perform basic CRUD operations on rows in a Google Sheets-
based database.
4. Target Users
Students (verified)
5. Functional Requirements
No. Feature Description
1 Events Page It shows all events with filtering
tabs/buttons (by status or category).
Shows a grid or card list of events. Use
Bootstrap grid/flex layout for clean
layout. Equal height containers. Each
event card includes:
Title
Image for category
Status badge (ongoging,
upcoming, closed)
Short Description
Type (Individual / Clan / Server)
Week (e.g. “Week 5”)
CTA buttons (e.g. “View Detail”,
“Claim this Event”)
Each event links to a separate static
detail page, this page also has CTA
buttons. Includes:
Title
Full description
Objective
Status badge
Image for category
2 Event Detail Page Week
Category
Reward (EXP)
“Required” label if the event is
mandatory
Type (Individual / Clan / Server)
CTA buttons (e.g. “Claim this
Event”)
Color-coded badges/icons for status.
On going
3 Status Badge Display
Upcoming
Closed
Each event shows category image or
4 Category Display icon on event card (e.g., “Pet Project”,
“Quiz Game”)
On-scroll or hover animation using
5 Animations
Animate.css or AOS
Fully responsive using Bootstrap’s grid
6 Responsive Layout
or flexbox and utilities
Simulated tabs or filters (e.g., for
7 Filtering Tabs Category, Type, Status, ...), no JS
behind
6. Non-Functional Requirements
Performance: Fast loading, static HTML only
Security: Not applicable (no user data)
Scalability: Easy to replicate product cards in HTML
Responsiveness: Must display properly across all screen sizes
Animations: Lightweight visual effects (on scroll, hover, etc.)
7. Constraints and Assumptions
No backend, no JS-based logic
All content is hardcoded in HTML
Use Bootstrap utilities for layout and spacing
FontAwesome icons are used for interactivity and decoration
Animation is required and must not rely on JS-heavy frameworks
Images and badges simulate category and type
One landing page for all events + static detail subpages
Google Sheets is used as the database, and this page interacts with it by
performing basic CRUD operations on the sheet's rows.
Sample Data for Events:
https://docs.google.com/spreadsheets/d/1048DgDpskhCzAyXSvm1Jgte5Dyo46S
0ShRCpwPOAhQg/edit?usp=sharing
8. Timeline
Start End
Phase Task Notes
Date Date
Structur Build HTML Navigation +
structure based on page
e database skeletons
Apply Bootstrap & Fully
Styling FontAwesome styles responsive
Add events data Static sample
Content (10–15 items) content
Scroll & hover, AOS or
Animation
fcocus animations Animate.css
Cross-device
testing
Mobile & desktop Long & Short
Testing responsiveness content
testing
