Pleasure

As a frontend developer, implement the FeaturesSection for the Landing page. The section uses `useRef(gridRef)` and `useEffect` to set up an `IntersectionObserver` that adds the class `ld-features__card--visible` to each `.ld-features__card` as it scrolls into view (threshold 0.1, rootMargin '0px 0px -40px 0px'). The `features` array defines 6 cards — Campus Feed (blue), Events & Fests (coral), Societies & Clubs (purple), Opportunities (teal), Marketplace (amber), Messages & Groups (pink) — each with an emoji icon, title, and description. Cards are rendered in `ld-features__grid` with dynamic color modifier classes (`ld-features__card--blue`, etc.). Section header includes a label, h2 with `ld-features__title-accent` span, and a description paragraph. Apply FeaturesSection.css with scroll-triggered card reveal animations.

As a frontend developer, implement the Footer for the Landing page. The footer is structured as `<footer className='ld-footer'>` with an `ld-footer__container` holding two rows: `ld-footer__top` and `ld-footer__bottom`. The top row contains the brand block (`ld-footer__brand`) with a logo link to `/Landing` using a `◆` icon and a tagline, plus a links block (`ld-footer__links`) with three columns — Platform (Feed, Events, Societies, Opportunities), Community (Marketplace, Messages, Dashboard, Notifications), and Account (Login, Signup, Home, Members). The bottom row displays copyright text and social icons (X, IG, in) as `ld-footer__social-link` spans with aria-labels. Apply Footer.css. Note: this component may already exist from other pages — reuse if available.

As a frontend developer, implement the HeroSection for the Landing page. Uses `useRef(sectionRef)` and `useEffect` to register a passive scroll listener that reads `getBoundingClientRect()` to compute `scrollProgress` and applies `translateY` and `rotate` transforms to 6 background shape divs (`.ld-hero__shape--1` through `--6`) for a parallax effect — each shape has a speed multiplier of `(i+1) * 0.06`. The content block includes: a badge div with `.ld-hero__badge-dot` and DU-exclusive label; an h1 with `.ld-hero__title-accent` span ('Connected.'); a subtitle paragraph; two CTAs — a primary link to `/Signup` with an SVG arrow icon and an outline link to `#features`; and a social-proof block with 5 avatar divs (colored blue/coral/purple/teal/amber with letter initials) and follower count text. Apply HeroSection.css with all parallax and hero layout styles.

As a frontend developer, implement the HowItWorksSection for the Landing page. The section uses `useRef(gridRef)` and `useEffect` to set up an `IntersectionObserver` (threshold 0.2) that adds `ld-steps__item--visible` to each `.ld-steps__item` on scroll entry. The `steps` array defines 3 onboarding steps: '01 — Sign Up with DU Email' (✉️), '02 — Build Your Profile' (🎨), '03 — Explore & Connect' (🚀). Each step item renders the step number, emoji icon, h3 title, and description paragraph inside `ld-steps__grid`. The section header includes a label span ('How It Works'), h2 title ('Get Started in 3 Simple Steps'), and a description paragraph. Apply HowItWorksSection.css with scroll-triggered step reveal animations.

As a frontend developer, implement the StatsSection for the Landing page. Uses `useState` for `isVisible` (boolean) and `counts` (array of 4 animated number values initialized to 0), plus `useRef(sectionRef)`. The first `useEffect` sets up an `IntersectionObserver` (threshold 0.3) that sets `isVisible = true` on first intersection and disconnects. The second `useEffect` triggers when `isVisible` becomes true and runs a `requestAnimationFrame` animation loop over 2000ms using a cubic ease-out (`1 - Math.pow(1 - progress, 3)`) to update `counts` for 4 stats: 100K+ DU Students, 200+ Societies Listed, 500+ Events Monthly, 50K+ Connections Made. Each stat item applies `ld-stats__item--visible` when visible. The rendered number combines `counts[index]` with `stat.suffix`. Apply StatsSection.css with animated counter and visibility reveal styles.

As a frontend developer, implement the NotificationsList section for the Notifications page. Build the `NotificationsList` component using `useState`, `useEffect`, `useRef`, and `useCallback` hooks from React, plus `gsap` for animations. Initialize with `INITIAL_NOTIFICATIONS` — 8 notification objects with fields: id, type (event/message/society/opportunity/system/mention/marketplace), title, description, time, read (boolean), source, and initials. Use `AVATAR_TYPE_CLASS` map to assign type-specific CSS classes (e.g., `nl-avatar--event`, `nl-avatar--message`, `nl-avatar--society`, `nl-avatar--opportunity`, `nl-avatar--system`, `nl-avatar--mention`, `nl-avatar--marketplace`). Implement GSAP-powered entrance animations via `useRef` on the list container and individual notification items triggered in `useEffect`. Support marking notifications as read and any swipe/dismiss interactions. Render each notification card with avatar (initials + type color class), unread indicator dot, title, description, time, and source label. Apply NotificationsList.css (6816 chars) for card layout, avatar styles, unread states, and animations.

As a frontend developer, implement the SocietyTabs section for the Society page. This sticky navigation component manages activeTab state (default 'about') and indicatorStyle state for a sliding underline indicator that dynamically repositions using getBoundingClientRect() on each tab button via tabRefs (a ref map). isStuck state is driven by a scroll listener that checks containerRef.current.getBoundingClientRect().top <= 65 and sets data-stuck attribute. handleTabClick performs smooth scroll to the corresponding section by id (e.g., 'society-about') with a 140px header offset using window.scrollTo({ behavior: 'smooth' }). Tabs rendered: About, Members, Events, Announcements. A resize listener keeps the indicator in sync. The animated .st-indicator uses transform: translateX for smooth sliding.

As a frontend developer, implement the SocietyAbout section for the Society page. This section features a Three.js Canvas background (AmbientScene) with 5 floating semi-transparent 3D geometries: icosahedron, torusKnot, dodecahedron, octahedron, and torus using @react-three/drei Float with varying speeds and rotation intensities. The StatsCard sub-component implements cursor-reactive 3D tilt via onMouseMove calculating x/y offsets from getBoundingClientRect() and applying perspective(800px) rotateX/rotateY transform; onMouseLeave resets with cubic-bezier transition. GSAP ScrollTrigger is registered and used to animate content cards on scroll entry. Lucide icons used: Globe, Mail, Calendar, Users, Award, ExternalLink for info rows.

As a frontend developer, implement the SocietyMembers section for the Society page. This section renders a filterable member grid with 12 hardcoded MEMBERS (name, year, role, avatar null). A ROLE_OPTIONS dropdown filter (10 options) is powered by useState. getBadgeVariant() classifies roles into 'leadership', 'coordinator', or 'member' badge variants. getInitials() generates two-letter avatar initials. A decorative Three.js ParticleField Canvas uses a custom useRef groupRef and geomRef; a GSAP timeline (repeat:-1, yoyo:true) animates particle Y positions via sine wave using geom.attributes.position.needsUpdate. useCallback and useMemo are used for performance optimization of filtered member list rendering. GSAP timeline is cleaned up with tl.kill() on unmount.

As a frontend developer, implement the SocietyEvents section for the Society page. This section manages filter state ('upcoming' | 'past') and rsvpStatus state (object keyed by event id). upcomingEvents (4 items) and pastEvents (2 items) are hardcoded arrays with title, date, time, location, attendees, coverGradient (CSS linear-gradient strings), and emoji icon. toggleRSVP() toggles rsvpStatus for a given eventId between 'going' and null. getButtonClass() and getButtonLabel() derive button appearance from rsvpStatus and filter. Lucide icons used: Calendar, MapPin, Users, CheckCircle2. Event cards display cover gradient headers, attendee counts, and conditional RSVP/Attended/Going button states.

As a frontend developer, implement the SocietyAnnouncements section for the Society page. This complex social feed section uses useState for announcements array (3 items with id, author, role, roleColor, roleBg, avatar initials, time, text, likes, liked boolean, comments array with author/avatar/text/time, expanded boolean, replyText). Each announcement card supports like toggling, comment expansion toggle, and inline reply text input via useCallback handlers. A Three.js background Canvas uses raw THREE.js (not drei) for a custom particle/geometry effect animated via GSAP timeline. GSAP ScrollTrigger is registered and used to animate announcement cards into view on scroll. useRef is used for Canvas container and individual card refs. Reply composer uses controlled input state per announcement.

As a frontend developer, implement the SocietyJoinCTA section for the Society page. This call-to-action section features a Three.js Canvas background (CTABackground) with 4 floating semi-transparent sphere meshes at varying positions/sizes using @react-three/fiber and @react-three/drei Float, with colors #1A73E8, #FFD600, #FF7043, #FFAB40. The main content uses sectionRef and contentRef; a GSAP ScrollTrigger animation fires on 'top 82%' triggering gsap.fromTo() on all direct children of contentRef (y: 48→0, opacity: 0→1, stagger 0.1, power3.out). The CTA displays a Sparkles icon (lucide-react) wrapped in .sjc-icon-wrapper, a headline with 'Ready to Join', and a UserPlus icon button. GSAP context is cleaned up via ctx.revert().

As a Backend Developer, design and implement Firestore collections and Cloud Functions for user profiles. Include fields: name, college, course, year, interests, societies, skills, badges, availability toggles (internships, collaborations, studygroups, freelance), and profile photo (Firebase Storage). Expose CRUD endpoints for profile setup and updates consumed by Signup, Home, and Dashboard pages.

As a Frontend Developer, implement global state management for the Pleasure app. Set up React Context or Zustand stores for: authenticated user state (profile, auth token), notifications count, cart/marketplace state, and active filters. Create custom hooks (useAuth, useNotifications, useCurrentUser) that wrap Firebase real-time listeners. This state layer is consumed by Navbar components across all pages and by page-level components that need shared data.

As a frontend developer, implement the EventsFilters section for the Events page. Build the filter bar using React state hooks: `activeCategory` (string), `startDate`/`endDate` (strings), `sortBy` (string), and `hasActiveFilters` (boolean). Render CATEGORIES array (all, fests, workshops, competitions, talks with counts) as `.ef-chip` elements inside a `.ef-chips-scroll` scrollable row, with a `motion.div` sliding active marker that uses `chipPositions` state calculated via `recalcChipPositions` which measures each chip's `getBoundingClientRect()` relative to `chipsRef`. Animate the marker with framer-motion `animate={{ left, width, opacity }}`. Add date range inputs for startDate/endDate and a SORT_OPTIONS dropdown (trending, upcoming, popular). Show a 'Clear Filters' button when `hasActiveFilters` is true via `AnimatePresence`. Wire `handleCategoryClick` with a 50ms debounced recalc, and `handleClearFilters` to reset all state. Add `resize` event listener for responsive chip position recalculation. This section is the first section of the Events page and should establish the page-level chain from the Home page.

As a frontend developer, implement the EventsGrid section for the Events page. Render a grid of 6 hardcoded event cards from `eventCards` array (DU Lit Fest, HackDU 6.0, International MUN, Photography Walk, Battle of Bands, Startup Pitch Night) using `cardRefs` for per-card GSAP scroll animations. Each card shows title, organizer, category badge, date (Calendar icon), location (MapPin icon), attendees count (Users icon), a colored emoji image placeholder, and an RSVP toggle button driven by `rsvped` state map (`toggleRsvp` handler). Integrate a Three.js particle field background on `canvasRef` using `THREE.WebGLRenderer` with alpha, a `PerspectiveCamera` at z=30, 90 particles (`particleCount`), with responsive resize logic via `canvas.parentElement.getBoundingClientRect()` and `Math.min(dpr, 2)` pixel ratio clamping. Register `ScrollTrigger` from gsap/ScrollTrigger for card entrance animations. Use `animationRef` to track the RAF loop. Import Calendar, MapPin, Users from lucide-react.

As a frontend developer, implement the EventsFeatured section for the Events page. Render 3 featured event cards from the `featuredEvents` array (DU Annual Cultural Fest, TechStorm Hackathon, Entrepreneurship Summit) with Unsplash cover images, title, description, society name with `BadgeCheck` icon, category badge, date (Calendar icon), venue (MapPin icon), attendees formatted via `formatAttendees` (Users icon), time, and a CTA button (ArrowRight icon) linking to `/Events`. Add a `Star` icon for featured labeling. Implement `useParticleField` custom hook using `THREE.WebGLRenderer` with alpha/antialias:false, `THREE.PerspectiveCamera` at position (0,0,18), `sceneRef`, `pointsRef`, `animationIdRef`, `sizesRef` for responsive canvas management with `Math.min(devicePixelRatio, 2)`. Register GSAP `ScrollTrigger` for section entrance animations. Use `useState`/`useEffect`/`useRef`/`useCallback` from React. Import Star, MapPin, Calendar, ArrowRight, BadgeCheck, Users from lucide-react.

As a frontend developer, implement the OpportunitiesHero section for the Opportunities page. This section renders a full-width hero (`oh-root`) with animated background blobs (`oh-shape--1` through `oh-shape--4`), a dot grid, and two GSAP-animated rings (`.oh-geo--ring-1`, `.oh-geo--ring-2`) that scale in with `back.out` easing on mount via `gsap.context`. Includes `useState` for `query` and `category`, a `CATEGORIES` dropdown with 5 options (all, internship, freelance, collaboration, research), a search form with `handleSearch`, category badges rendered from the `BADGES` array with color-coded className variants (`oh-badge--internship`, `oh-badge--freelance`, `oh-badge--collab`, `oh-badge--research`), an `oh-headline` with an accented span, trending tag pills from `TRENDING_TAGS` array linking to `/Opportunities`, and a `STATS` row showing '240+ Active Listings', '80+ Companies', '1.2k Applications Sent'. Import `gsap` and `OpportunitiesHero.css`.

As a Backend Developer, implement Firestore collections and Cloud Functions for campus polls and anonymous opinion posts. Support poll creation (question, options, expiry), vote submission with one-vote-per-user enforcement (via Firebase Auth UID), anonymous post submission with server-side identity stripping, moderation flags for anonymous content, and real-time vote count updates via Firestore listeners. Expose endpoints consumed by the Feed page poll post type and any standalone Polls feature sections.

As a DevOps Engineer, set up the iOS and Android build and release pipeline for the Pleasure React Native app. Configure EAS Build (Expo Application Services) or Fastlane for automated builds, code signing profiles for iOS (certificates, provisioning profiles) and Android (keystore), OTA update support via Expo Updates or CodePush, and CI/CD integration (GitHub Actions or equivalent) to trigger builds on main branch merges. Configure environment-specific build variants (dev/staging/prod) with separate Firebase project configs (google-services.json, GoogleService-Info.plist).

As a Backend Developer, write and deploy comprehensive Firestore security rules and Firebase Storage rules for all collections: users, posts, events, societies, opportunities, marketplace, messages, notifications, polls, studyGroups, moderationQueue, actionLog. Enforce: authenticated access only, DU email domain validation on user documents, role-based write access (admin-only for moderation actions, society-head-only for event creation), and field-level validation (e.g., vote counts can only be incremented server-side via Cloud Functions, not written directly by clients). Include Firestore indexes for composite queries used by feed filtering, member search, and opportunity filters.

As a frontend developer, implement the LoginSignupPrompt section for the Login page. The JSX reveals this is a shared Footer component (imported from '../styles/Footer.css') rendered as a <footer className='ld-footer'> with a two-part layout: ld-footer__top (brand block with logo anchor '/Landing', diamond icon ◆, tagline text, and three nav link columns — Platform: Feed/Events/Societies/Opportunities; Community: Marketplace/Messages/Dashboard/Notifications; Account: Login/Signup/Home/Members) and ld-footer__bottom (copyright '© 2025 Pleasure' and social links X/IG/in as spans). This component likely already exists from the Landing page (task b82d0c91-d856-41e1-8c54-e8453f9fdea1); confirm reuse or adapt for Login page context. Imports Footer.css.

As a frontend developer, implement the SignupEmailStep section for the Signup page. This section renders a multi-state email input card with a @react-three/fiber Canvas background featuring DecorativeShapes — a torusKnotGeometry and torusGeometry with useFrame rotation and @react-three/drei Float wrappers. State managed via useState hooks: email, validationState ('idle'|'typing'|'valid-du'|'valid-gmail'|'invalid'), hasInteracted, shakeCard. The validateEmail useCallback checks for @du.ac.in and @gmail.com domain-specific valid states. GSAP animates card entrance (y: 40 fade-in), validation message appearance (fromTo opacity/y), and shake/scale animations on continue attempt with invalid email. The continue handler triggers a GSAP scale-out on valid states. Implement CSS: ses-card, validation state modifier classes, input field with dynamic border states.

As a frontend developer, implement the Navbar section for the Home page. This component (Navbar.jsx + Navbar.css) renders a responsive navigation bar with: (1) a logo linking to '/Home' with a styled 'P' icon and 'Pleasure' brand text; (2) desktop nav links mapped from a navLinks array covering Home, Feed, Events, Societies, Members, Opportunities, Marketplace, and Dashboard routes; (3) a search bar with a lucide-react Search icon and placeholder 'Search listings, members...'; (4) right-side action buttons including a ShoppingCart icon with a badge count of 2 linking to '/Marketplace', a Bell icon with notification badge of 3 linking to '/Notifications'; (5) a user dropdown menu toggled via isUserMenuOpen state using useState, featuring a user avatar button with ChevronDown icon (aria-expanded), and dropdown items for My Profile and Dashboard; (6) a mobile hamburger menu toggled via isMobileMenuOpen state using useState, with Menu/X icons from lucide-react and a closeMobileMenu handler. Note: a Navbar component was previously implemented for the Landing page (task 2097df12) — reuse or extend that component if it shares structure, adapting nav links and authenticated-user actions specific to the Home page context.

As a frontend developer, implement the AdminNavbar section for the Admin Panel page. This component reuses the shared Navbar component from Navbar.css and features: isMobileMenuOpen and isUserMenuOpen useState hooks, toggleMobileMenu/toggleUserMenu/closeMobileMenu handlers, a navLinks array mapping 8 routes (Home, Feed, Events, Societies, Members, Opportunities, Marketplace, Dashboard), a Search bar with lucide-react Search icon and 'Search listings, members...' placeholder, a ShoppingCart icon with badge count '2' linking to /Marketplace, a Bell notification icon with badge '3' linking to /Notifications, and a user dropdown menu with ChevronDown toggle and aria-expanded accessibility. The component is styled with nb-navbar, nb-container, nb-logo, nb-links-desktop, nb-search-bar, nb-actions, nb-user-menu, nb-dropdown CSS classes. NOTE: This Navbar component likely already exists from the Landing page — reuse or adapt it for the Admin Panel context.

As a Backend Developer, implement Firestore collections and Cloud Functions for the campus feed. Support post types: text, image, video, polls, event cards, opportunity listings, announcements, study-group, marketplace. Implement real-time listeners, reactions (like/save), comments, shares, and feed filtering by college/interest/category. Expose feed read/write endpoints consumed by the Feed page.

As a Backend Developer, implement Firestore collections and Cloud Functions for events. Support event creation (society heads), RSVP management, attendee counts, event details (date, venue, organizer, tags), event recaps, and notifications for upcoming events. Expose endpoints consumed by the Events page and Feed page event cards.

As a Backend Developer, implement Firestore collections and Cloud Functions for societies and clubs. Support society profiles (about, members, events, posts, achievements), follow/unfollow, join applications, announcements, verification badges, and admin management of members. Expose endpoints consumed by the Societies page and Society page.

As a Backend Developer, implement Firestore collections and Cloud Functions for the opportunities board. Support listing types: internships, freelance gigs, research roles, part-time jobs. Include fields: type, domain, stipend, remote/on-campus, poster (student/alumni/org), and apply/contact actions. Expose CRUD and filter endpoints consumed by the Opportunities page.

As a Backend Developer, implement Firestore collections and Cloud Functions for the campus marketplace. Support product listings (title, price, condition, seller info, category, images via Firebase Storage), save/unsave, mark-as-sold, and view counts. Expose CRUD and filter endpoints consumed by the Marketplace page.

As a Backend Developer, implement Firestore collections and Cloud Functions for real-time direct messaging and group chats. Support one-on-one DMs, group chats (societies, study groups, event teams), media sharing (Firebase Storage), unread counts, and message notifications. Expose real-time listener endpoints consumed by the Messages page.

As a Backend Developer, implement Firestore collections and Cloud Functions for smart notifications. Support notification types: event reminders, post reactions, new followers, DMs, opportunity matches, society updates, mentions, marketplace activity. Implement read/unread state, bulk mark-as-read, and filter by type. Expose endpoints consumed by the Notifications page.

As a frontend developer, implement the OpportunitiesFilters section for the Opportunities page. This section renders a sticky filter bar (`of-sticky-bar`) that gains an `of-scrolled` class via a `scroll` event listener (`window.scrollY > 80`) tracked with `isScrolled` state. Includes `useState` for `activeType` (default 'all'), `activeLevel` (default 'all'), and `sortBy` (default 'recent'). Renders TYPE_CHIPS (5 items: all/internships/freelance/collaborations/competitions with emoji icons and counts) as toggle buttons with active state styling, a LEVEL_OPTIONS select/group with 4 levels (All/Beginner/Intermediate/Advanced), and a SORT_OPTIONS dropdown (Most Recent/Most Popular/Best Match). Displays dynamic result count from `COUNTS_BY_TYPE` lookup, active filter tags with individual remove handlers (`handleRemoveType`, `handleRemoveLevel`), and a `handleClearAll` button that only appears via `of-visible` class when `hasActiveFilters` is true. Import `OpportunitiesFilters.css`.

As a frontend developer, implement the OpportunitiesFeatured section for the Opportunities page. This section features a primary featured card (Google DSC — Software Engineering Intern) with a live countdown timer via a custom `useCountdown(targetDate)` hook that uses `setInterval` every 1000ms and calculates `days/hours/minutes/seconds` from `Date.now()`, displayed with a `pad()` zero-padding utility. The primary card shows dual badges ('Hot', 'Featured'), org avatar with `orgColor` (#1A73E8), title, description, 4 meta pills (location via `IconLocation` SVG, compensation via `IconMoney` SVG, duration, type), a qualifications checklist, applicant count, and an 'Apply Now' CTA. Also renders a secondary featured card (DU Entrepreneurship Cell — Product Design Collaboration) with its own badge, description, deadline string, qualifications list, and apply link. Uses `useState` and `useEffect`. Import `IconLocation`, `IconMoney`, and other inline SVG icon components. Import `OpportunitiesFeatured.css`.

As a frontend developer, implement the OpportunitiesByType section for the Opportunities page. This section renders 4 type cards from `OPPORTUNITY_TYPES` array: Internships (`obt-card--internship`), Freelance Gigs (`obt-card--freelance`), Collaborations (`obt-card--collaboration`), and Study Partnerships (`obt-card--study`). Each card contains an inline SVG icon, a tag label, a description, 2 stats (e.g., '240+ Active Listings', '80+ Companies'), and a row of category tag pills (e.g., Tech/Finance/Media/Healthcare/Consulting). Uses `useState` for hover or active card state. Cards link to filtered views via `slug`. Import `OpportunitiesByType.css`.

As a frontend developer, implement the OpportunitiesCTA section for the Opportunities page. This is a static call-to-action section (`octa-root`) with decorative background layers (`octa-bg`, `octa-circle-a/b/c`). Renders an icon badge with an inline SVG group/people icon, an `octa-headline` with an accented `<span>` around 'Collaborate', a description paragraph, and a `STATS` row with 3 items ('1,200+ Opportunities', '340+ Companies', '8,500+ Students Placed'). Includes a decorative `octa-divider`, two CTA buttons: primary 'Post an Opportunity' (links to `/Opportunities`) with a plus SVG icon, and secondary 'Browse Student Profiles' (links to `/Members`) with a search SVG icon. Below buttons renders `CHIPS` trust-signal pills ('Free to Post', 'DU Students Only', 'Verified Listings', 'Instant Alerts') from the `CHIPS` array as `octa-chip` divs. No state or effects. Import `OpportunitiesCTA.css`.

As a Frontend Developer, implement all UI sections for the Messages page. This includes: a conversation list sidebar (recent DMs and group chats with last-message preview, unread count badges, and avatar initials), a message thread view (bubble-style chat with sender avatars, timestamps, media previews), a message composer input with emoji and media attach buttons, and a group info panel. Use Firebase real-time listeners (onSnapshot) via the useMessages custom hook from global state. GSAP animates message list entrance. Lucide-react icons: Send, Paperclip, Smile, Users, Search, MoreVertical. State: activeConversationId (useState), messageText (useState), conversations (useState). Import Messages.css. Note: depends on Direct Messages Firestore API (efd146b7) and Messages Firestore API (tmp_messages_api).

As a Backend Developer, implement Firestore collections and Cloud Functions for the Study & Collaboration Hub. Support study group creation and joining (by subject, semester, exam), shared notes/resource links storage (Firebase Storage for files), project partner matching based on availability/interests, and group session scheduling. Expose CRUD endpoints for study groups consumed by any study group UI sections across Feed, Home, and Dashboard pages.

As a frontend developer, implement the SignupProfileStep section for the Signup page. This section is the most complex form step with formData state (fullName, collegeName, course, year, photo) plus photoPreview, dragActive, errors, and shakeField states. It uses sectionRef, fileInputRef, cardRef, formGroupRefs array, and inputRefs object. GSAP staggered entrance animates sp__step-badge, sp__progress-dots, sp__title, sp__subtitle, sp__form-group (stagger: 0.08), sp__photo-section, and sp__actions in sequence. A triggerShake useCallback uses gsap.fromTo with elastic.out easing on invalid field refs. The form includes fullName and collegeName text inputs, course and year select dropdowns (populated from COURSES array of 21 options and YEARS array of 5 options), a drag-and-drop photo upload zone with dragActive state toggle, and inline field error display. Implement sp__ prefixed CSS classes with form layout, photo upload drag state, and error field styles.

As a frontend developer, implement the AdminSidebar section for the Admin Panel page. The sidebar is adapted from the shared Navbar component (Navbar.css) and provides admin-specific navigation. It includes isMobileMenuOpen and isUserMenuOpen useState hooks, toggleMobileMenu/toggleUserMenu/closeMobileMenu handlers, and a navLinks array covering all major admin routes (Home, Feed, Events, Societies, Members, Opportunities, Marketplace, Dashboard). It renders a vertical sidebar with the logo (nb-logo, nb-logo-icon 'P', nb-logo-text 'Pleasure'), a collapsible mobile menu toggled via Menu/X lucide icons, and a user avatar dropdown with ChevronDown. Styled with nb-navbar, nb-container, nb-user-menu CSS classes. NOTE: This component may already exist from the Landing page — verify and adapt for sidebar layout in the Admin Panel context.

As a frontend developer, implement the AdminDashboardHeader section for the Admin Panel page. This header component is built on the shared Navbar.css base and includes isMobileMenuOpen and isUserMenuOpen useState hooks with their respective toggle handlers (toggleMobileMenu, toggleUserMenu, closeMobileMenu). It renders a top-level dashboard header bar with the Pleasure logo (nb-logo-icon 'P', nb-logo-text), a horizontal navLinks list (8 items: Home, Feed, Events, Societies, Members, Opportunities, Marketplace, Dashboard), a Search bar with lucide Search icon, ShoppingCart with badge '2', Bell notifications with badge '3', and a user menu dropdown with ChevronDown and aria-expanded state. Styled using nb-navbar, nb-container, nb-actions, nb-user-menu, nb-dropdown CSS classes. NOTE: This component largely reuses Navbar — adapt it with admin-specific heading/title text and admin context branding.

As a frontend developer, implement the AdminStatsOverview section for the Admin Panel page. This is a complex 3D/canvas section using Three.js and GSAP. It imports from AdminStatsOverview.css and uses useEffect and useRef hooks. It renders a STATS array of 5 stat cards: Total Users (12,847, +12%, Users icon), Active Societies (143, +5.2%, Building2 icon), Pending Approvals (38, +18%, Clock icon, alert color), Reported Content (24, -8%, Flag icon, critical color), and System Health (99.8%, +0.3%, Activity icon). The Three.js dot-particle background renders 60 particles using THREE.BufferGeometry with position and size BufferAttributes, PointsMaterial (color 0x1A73E8, opacity 0.55, NormalBlending), animated via requestAnimationFrame and resized responsively. GSAP is used to animate card entrance. TrendingUp/TrendingDown lucide icons are used for trend indicators. canvasRef and cardsRef control the Three.js canvas and card DOM respectively.

As a frontend developer, implement the AdminModerationQueue section for the Admin Panel page. Imports from AdminModerationQueue.css and uses useState and useMemo hooks. Renders a full moderation queue from a MODERATION_ITEMS array of 5+ items with fields: id, type (Post/Comment/Profile), contentType, flaggedBy, flaggedById, reason, dateFlagged, dateTime, status (pending/in-review), severity (critical/moderate), content, author, authorId, college, reportCount, previousFlags. Features include: a Search bar with lucide Search icon, sortable columns using ChevronUp/ChevronDown, pagination with ChevronLeft/ChevronRight controls, severity badges, status indicators, and action buttons: Check (approve), X (reject), Eye (view), HelpCircle (escalate), ShieldCheck (verify). Content type icons: Flag for posts, MessageSquare for comments, User for profiles, FileText for documents. Inbox empty state and ShieldCheck resolved state are handled. useMemo filters/sorts the queue based on search input and sort column state.

As a frontend developer, implement the AdminSocietyManagement section for the Admin Panel page. Imports from AdminSocietyManagement.css and uses useState, useRef, useEffect, useMemo, and useCallback hooks. Integrates @react-three/fiber Canvas and useFrame for 3D rendering alongside GSAP and THREE.js. Manages a SOCIETIES array of 6+ Delhi University societies with fields: id, name, headName, headInitials, membersCount, status (verified/unverified), joinRequests, dateCreated, college, category, members (array with name/initials/role/college), recentPosts (text/date/reactions), violations (desc/date/severity). Features include: Search bar with lucide Search icon, filter controls (Users, Calendar, AlertTriangle), society cards with member avatars, status badge (ShieldCheck verified, ShieldOff unverified), pagination (ChevronLeft/ChevronRight), detail modal/panel with Eye trigger showing members list, recent posts, and violations, action buttons for MessageSquare and X dismiss. useCallback memoizes event handlers, useMemo filters/sorts the society list.

As a frontend developer, implement the AdminUserManagement section for the Admin Panel page. Imports from AdminUserManagement.css and uses multiple useState hooks: searchTerm, statusFilter ('all'/active/suspended/flagged), joinDateFilter, selectedUsers (Set), expandedCards (Set), activeDropdown, and currentPage. Renders a mockUsers array of 6 DU students with fields: id, username, email, college, joinDate, status, reports. Filtering logic combines searchTerm (username/email match) and statusFilter. Implements pagination: itemsPerPage=5, totalPages computed from filtered results, paginatedUsers slice. Features: search bar with lucide Search icon, status filter dropdown, select-all checkbox (toggleSelectAll sets all paginatedUser IDs), individual row toggleUserSelection, expandedCards toggle for detail view, activeDropdown for MoreVertical context menus with actions (Eye view profile, MessageCircle contact, Ban suspend, UserCheck reactivate). Users icon shown in header. Styled with AdminUserManagement.css classes.

As a frontend developer, implement the AdminEventOversight section for the Admin Panel page. Imports from AdminEventOversight.css and uses useState, useRef, and useEffect hooks alongside THREE.js and GSAP. Includes the Ae3DAccent sub-component that creates a Three.js scene with: a TorusKnotGeometry (0.7 radius, 0.22 tube, 80 tubularSegments, 16 radialSegments) mesh with MeshStandardMaterial (color 0x1A73E8), an orbiting ring using TorusGeometry (1.15, 0.03), AmbientLight (0xffffff, 0.6) and DirectionalLight (position 2,3,4), requestAnimationFrame animation rotating mesh on x/y axes and ring on z-axis, GSAP elastic entrance animation on mesh.scale (duration 1.2, elastic.out), and responsive resize handler. The section renders event cards with lucide icons: Search, Calendar, Users, ChevronRight, AlertTriangle, CheckCircle, XCircle, Flag, Clock, Eye, CalendarPlus, Globe. Event status states include approved, pending, and flagged. The 3D accent canvas is mounted via mountRef and cleaned up on unmount (cancelAnimationFrame, renderer.dispose).

As a frontend developer, implement the FeedFilterBar section for the Feed page. This component renders a horizontally scrollable filter chip bar using the FILTERS array (7 items: All Posts, Events, Announcements, Polls, Opportunities, Study Groups, Marketplace) each with a Lucide icon (LayoutGrid, Calendar, Megaphone, BarChart3, Briefcase, BookOpen, ShoppingBag) and a badge count. Uses useState for activeFilter and useRef arrays (chipsRef, barRef) for GSAP targeting. On mount, a GSAP staggered entrance animates all chips from y:20/opacity:0 to y:0/opacity:1 with 0.06s stagger and power3.out easing inside a gsap.context for cleanup. On filter click, an elastic spring bounce (scale 1→1.14, elastic.out(1, 0.35), 0.55s) fires on the selected chip. Active chip hides the count badge and receives aria-pressed=true for accessibility. Rendered inside .ffb-bar > .ffb-bar__inner > .ffb-bar__scroll with role='group' aria-label='Feed filters'.

As a frontend developer, implement the FeedContent section for the Feed page. This is the primary feed rendering component with significant complexity. It uses useState for per-post liked/bookmarked state, comment expansion, comment input text, and visible-post pagination. Uses useRef and useCallback for GSAP-driven card entrance animations. Renders INITIAL_POSTS array (typed posts: event, announcement, poll, opportunity, study-group, marketplace) each with author avatar (initials + color), timestamp, content text, optional hasImage placeholder, and an optional poll voting UI. Inline SVG icons are defined for IconHeart (filled toggle), IconComment, IconShare, IconBookmark (filled toggle), IconSend, IconChevronDown, and IconImage. Post action bar includes like (with heart fill toggle and count increment), comment (expands inline comment input with IconSend submit), share, and bookmark actions. Comment section expands via GSAP height/opacity animation on toggle. Supports load-more pagination pattern to reveal additional posts. Post type badges (typeLabel) are color-coded per type. Card entrance uses GSAP fromTo with opacity/y stagger on scroll or mount. CSS module: FeedContent.css (12186 chars).

As a frontend developer, implement the EventsHero section for the Events page. This section features a full-viewport 3D animated background built with @react-three/fiber, rendering 14 FloatingShape instances using varied Three.js geometries (boxGeometry, sphereGeometry, torusKnotGeometry, icosahedronGeometry, octahedronGeometry, dodecahedronGeometry, torusGeometry). Each shape uses useFrame for continuous sinusoidal position drift and rotation animation. The ShapesScene sets up ambient and directional lighting. The foreground hero content is animated via GSAP using refs (contentRef, headlineRef, subheadRef) with staggered entrance animations. A Search (lucide-react) powered search bar is included for filtering/searching events. useState manages search input state. Canvas from @react-three/fiber wraps the 3D scene. Styles from EventsHero.css apply layout, typography, and overlay styling.

As a frontend developer, implement the EventsCTA section for the Events page. This section features a Three.js particle field rendered via @react-three/fiber Canvas: a ParticleField component creates 180 particles using BufferGeometry and BufferAttribute, animating upward drift with velocity per-particle using useFrame, with pointsMaterial using AdditiveBlending for a glowing effect. GSAP ScrollTrigger is registered and drives a staggered entrance timeline on scroll for headlineRef, descRef, benefitsRef, and ctaRef elements. A benefits grid displays four benefit cards (Calendar, Megaphone, Users, Camera icons from lucide-react) with title and description text sourced from a static benefits array. A CTA button prompts society organizers to post events. Styles from EventsCTA.css handle layout, card grid, and dark-gradient background styling.

As a frontend developer, implement the SocietiesHero section for the Societies page. This section renders a full-width hero (`sh-root`) with decorative background shapes (`sh-shape-circle-1`, `sh-shape-circle-2`, `sh-shape-rect-1`, `sh-shape-rect-2`) inside `sh-decoration-bg`. The content area (`sh-content`) includes an `h1.sh-headline` ('Discover Your Community'), a `p.sh-subheading` describing societies at Delhi University, and a controlled search form (`sh-search-container`) with a `Search` icon from lucide-react, a text input bound to `useState('') searchQuery`, and a hint paragraph. The `handleSearch` handler prevents default and logs the query on submit. Import `SocietiesHero.css` for styles. Note: Navbar component may already exist from the Home page task [c77677f8-2ad2-46e6-8263-0dba2d744761].

As a frontend developer, implement the MarketplaceHero section for the Marketplace page. This section renders a full 3D canvas background using @react-three/fiber's Canvas component with a FloatingShapes scene containing six animated geometries: a semi-transparent blue Torus (position [-2.8,1.8,0]), a coral Box (position [2.2,-0.8,-0.5]), a yellow Icosahedron (position [3.5,1.2,0.8]), an orange Octahedron (position [-1.8,-1.4,-0.8]), a light-blue Sphere (position [0.8,2.2,0.3]), and a blue TorusKnot (position [-3.5,-0.3,-0.3]). All shapes use @react-three/drei's Float component for animated floating with varying speed, rotationIntensity, and floatIntensity values. Lighting includes ambientLight, directionalLight, and two pointLights with coral and blue tints. GSAP with useLayoutEffect and useRef is used for entrance animations on the hero text and CTA elements. Apply MarketplaceHero.css for layout and positioning. Note: the Navbar component may already exist from the Home page (task c77677f8-2ad2-46e6-8263-0dba2d744761).

As a frontend developer, implement the ReportsList section for the Moderation page. This section renders a filterable, animated list of content reports using INITIAL_REPORTS static data (9+ report objects with fields: id, excerpt, reporter {name, initials}, violation type, severity 1-5, status, timestamp, hasThumb). Implement filter tabs for status (pending/reviewed/resolved) and violation type (hate/spam/misinfo/inappropriate/harassment/other). Each report card displays: reporter avatar with initials, violation badge with color-coded severity indicator, excerpt text, timestamp, and action buttons. Use GSAP for card entrance animations (staggered fade-in from translateY). Severity is rendered as a visual scale (dots or bar). Cards with hasThumb:true show a thumbnail placeholder. Manage active filter state via useState hooks. The component imports from '../styles/ReportsList.css' and uses useRef/useCallback for GSAP animation targets.

As a frontend developer, implement the ActionLog section for the Moderation page. This section renders a paginated, searchable audit log of admin moderation actions using actionData (6+ entries with fields: id, admin {name, initials}, actionType, actionLabel, description, affectedContent, affectedLink, timestamp as Date objects, reason). Implement a Search input (lucide-react Search icon) with real-time filtering via useMemo over actionData. Each log entry shows: admin avatar with initials, color-coded action badge (removed/suspended/dismissed/banned/warning), description, affected content link, relative timestamp (computed from Date.now()), and an expandable reason panel (toggled via ChevronDown icon, animated with GSAP height reveal). Include a Download button (lucide-react Download icon) for exporting the log and an Edit3 icon for inline note editing. Use useState for search query and expanded row state, useRef for GSAP animation targets, useEffect for entrance animations on mount. Component imports from '../styles/ActionLog.css'.

As a frontend developer, implement the MembersHeader section for the Members page. This section uses gsap for a letter-by-letter title animation (splitting 'Members' into individual `.mh-letter` spans animated with `fromTo` using opacity, y, and rotateX transforms with `back.out(1.5)` easing and 0.06 stagger). It also animates three stat counters (total: 1247, active: 342, suspended: 18) using `gsap.to` with `power2.out` easing over 1.5s, updating `counts` state via `setCounts` in `onUpdate`. Renders three `.mh-stat-card` elements using icons from lucide-react (Users, Activity, AlertCircle) with distinct `iconClass` variants (mh-stat-icon--total, mh-stat-icon--active, mh-stat-icon--suspended). Includes action buttons with UserPlus and Download icons. Uses `hasAnimated` ref to prevent re-triggering. Note: AdminNavbar component from Admin Panel page may already exist and can be reused.

As a Backend Developer, implement Firestore collections and Cloud Functions for admin and moderation. Support content reports (post/comment/profile), moderation queue with severity/status, user suspension/reactivation, action audit log, society verification badge management, and event approval workflows. Expose admin-only endpoints consumed by the Admin Panel, Moderation, and Members pages.

As a Backend Developer, implement Firestore-based search and discovery using Cloud Functions. Support full-text search across students, societies, events, opportunities, and posts. Implement suggested profiles (by college/course/interests) and trending topics/hashtags per campus. Expose search endpoints consumed by the global search bar (Navbar) and Discovery sections across all pages.

As a Tech Lead, verify the end-to-end integration between the Notifications frontend implementation and the Notifications Firestore backend API. Ensure real-time notification updates appear in NotificationsList, filter tabs in NotificationsFilter accurately reflect unread counts from Firestore, and mark-as-read actions persist to the backend.

As a frontend developer, implement the OpportunitiesGrid section for the Opportunities page. This section renders a grid of opportunity cards from a static `opportunities` array of 6+ items, each with fields: `id`, `org`, `title`, `type`, `typelabel`, `desc`, `stipend`, `deadline`, `skills` (array of strings), `remote` (Hybrid/Remote/On-campus), `color`, `initials`, `logoGradient`. Each card displays a logo avatar using `logoGradient` CSS background and `initials` text, type badge with `typelabel`, title, description, skill chips, stipend, deadline, and a remote-mode pill. Uses `useState` for active filter or hover state. Cards are styled via `OpportunitiesGrid.css` with color-coded type variants. Includes sample data for org types: Google DSC Delhi (Internship), Startup Studio DU (Freelance), DU Film Society (Collaboration), Miranda House Research Lab (Research), Campus Eats (Internship), IUCAA Outreach (Freelance).

As a Backend Developer, implement Firestore collections and Cloud Functions for the Messages page backend. This is distinct from the Direct Messages Firestore API (efd146b7) which covers DM/group chat logic — this task covers the Messages page-specific API surface: conversation list endpoint, unread count aggregation, message search, and any Cloud Functions needed to support the Messages page UI (conversation metadata, last-message preview, participant info). Expose endpoints consumed by the Messages page frontend sections.

As a Tech Lead, verify the end-to-end integration between the Dashboard frontend (DashboardStatsCards, DashboardNotifications, DashboardUpcomingEvents, DashboardQuickActions, DashboardActivityFeed) and the backend APIs (User Profiles, Notifications, Events, Campus Feed). Ensure role-based stat cards reflect real Firestore data, notifications list populates from the Notifications API with correct unread state, upcoming events load from Events Firestore, and the activity feed reflects actual recent interactions from the Feed API.

As a Tech Lead, verify the end-to-end integration between the Home page frontend preview sections (HomeFeedPreview, HomeEventsPreview, HomeSocietiesPreview, HomeOpportunitiesPreview, HomeMarketplacePreview) and their respective backend APIs (Campus Feed, Events, Societies, Opportunities, Marketplace Firestore APIs). Ensure each preview section loads real data from Firestore instead of static arrays, save/follow/RSVP actions from preview cards persist to Firestore, and the Campus Map section links correctly route to authenticated feature pages.

As a DevOps Engineer, configure Firebase Cloud Messaging (FCM) for push notifications in the React Native app. Set up FCM credentials for iOS (APNs certificate/key) and Android, integrate @react-native-firebase/messaging in the React Native project, implement foreground and background notification handlers, and wire up Cloud Functions to send targeted FCM payloads for notification events: event reminders, new DMs, post reactions, opportunity matches, society updates, and mentions. Configure notification channels for Android (importance levels) and notification categories for iOS.

As a frontend developer, implement the SignupInterestsStep section for the Signup page. This section renders a raw Three.js particle system (NOT @react-three/fiber) via canvasRef with a WebGLRenderer, PerspectiveCamera, BufferGeometry for 80 particles with Float32Array positions/sizes/colors blending primaryColor (#1A73E8), accentColor (#FFAB40), and mutedColor (#B0BEC5). The section manages selectedInterests array and availability object states. It renders 10 INTEREST_CATEGORIES as toggle chip buttons (chipRefs array) — requiring MIN_INTERESTS (3) to be selected before proceeding — and 4 AVAILABILITY_OPTIONS as toggle switches (internships, collaborations, studygroups, freelance). GSAP animates card entrance and chip selection micro-interactions. The Three.js animation loop runs via animFrameRef requestAnimationFrame. Implement cleanup for renderer disposal and animation frame cancellation on unmount. CSS classes prefixed per SignupInterestsStep.css with chip selected/unselected states and availability toggle styles.

As a frontend developer, implement the SocietiesSearch section for the Societies page. This section uses `useState` for `query`, `activeFilter` (default 'all'), `isFocused`, `recentSearches` (INITIAL_RECENT array), and `showSuggestions`. It uses `useRef` for `searchWrapperRef`, `pillsRef`, `particleMountRef`, and `threeCleanupRef`. A Three.js particle canvas is initialized in a `useEffect` on `particleMountRef` — a `WebGLRenderer` (alpha, antialias) renders 70 particles with `BufferGeometry`, custom colors, and a `PerspectiveCamera` at z=32. GSAP animates pill entrance. Filter pills are rendered from `FILTER_PILLS` array (8 categories: all, tech, arts, sports, social, academic, professional, wellness). A search input shows `filteredSuggestions` from `MOCK_SUGGESTIONS` filtered by `query`. Outside-click closes suggestions via `mousedown` listener on `document`. Icons: `Search`, `X`, `Clock`, `TrendingUp`, `ArrowUpRight` from lucide-react. Import `SocietiesSearch.css`.

As a frontend developer, implement the SocietiesGrid section for the Societies page. This section renders a grid (`sg-grid`) of 9 society cards using a static `societies` array with fields: `id`, `name`, `tagline`, `icon` (emoji), `members` (number), and `image` (CSS linear-gradient string). Each `sg-card` has an `sg-card-image` div with inline `background` style from the gradient, an `sg-icon` div showing the emoji, and `sg-card-content` with `h3.sg-card-name`, `p.sg-card-tagline`, member count using `Users` icon from lucide-react, and a follow toggle button using `Heart` icon from lucide-react. Follow state is tracked in `useState({}) followedSocieties` keyed by society `id`, toggled via `toggleFollow(id)`. Import `SocietiesGrid.css`.

As a frontend developer, implement the SocietiesFilters section for the Societies page. This section renders a filter bar with `useState` for `activeFilter` (default 'all') and `mobileOpen` (boolean). `FILTER_OPTIONS` array (6 items: all/following/applied/joined/trending/new) each has `key`, `label`, icon component from lucide-react (`Globe`, `Users`, `Send`, `UserCheck`, `TrendingUp`, `Sparkles`), and `count`. Desktop renders `sf-desktop` pill buttons (`sf-pill`, `sf-pill-active`) with icon, label, and count badge. Mobile renders `sf-mobile` with a dropdown trigger (`sf-mobile-trigger`) showing active filter and `ChevronDown`, and a listbox dropdown. Outside-click closes via `mousedown` listener scoped to `dropdownRef`. Escape key closes via `keydown` listener. Both listeners are added/removed conditionally when `mobileOpen` is true. Import `SocietiesFilters.css`.

As a frontend developer, implement the SocietiesFeatured section for the Societies page. This section uses `useRef` for `canvasRef` and `containerRef`, and a Three.js `useEffect` on `canvasRef` to render a decorative 3D background canvas. The `FEATURED_SOCIETIES` array contains 4 societies (Debating Society, Dramatics & Theatre Club, Entrepreneurship Cell, Photography Club) each with `id`, `name`, `category`, `description`, `members`, `events`, `bannerGradient` (CSS linear-gradient), `testimonial` (quote/author/role), `badge` ('Featured'/'Popular'/'Top Rated'), and `href`. Cards render with a gradient banner, badge, society name/category, description, member count with `Users` icon, event count with `Calendar` icon, a testimonial block with quote/author/role, and an 'Learn More' link with `ArrowRight` icon from lucide-react. Import `SocietiesFeatured.css`.

As a frontend developer, implement the SocietiesJoinCTA section for the Societies page. This section uses `@react-three/fiber` `Canvas` and `@react-three/drei` `Float` to render a `FloatingShapes` scene with 5 wireframe/transparent geometries: `icosahedronGeometry`, `octahedronGeometry`, `torusGeometry`, `dodecahedronGeometry`, and `torusKnotGeometry`, each wrapped in `Float` with varying `speed`/`rotationIntensity`/`floatIntensity`. GSAP with `ScrollTrigger` (registered via `gsap.registerPlugin`) animates a counter from 0 to target values (`societies: 150`, `members: 8000`, `events: 500`, `satisfaction: 98`) over 2.4s with `power3.out` ease when the section enters the viewport at 78%. Counter state is tracked via `useState({societies:0, members:0, events:0, satisfaction:0})` and updated via `onUpdate`. The `gsap.context()` is used for cleanup with `ctx.revert()`. Stats array renders with value, suffix ('+'), and label. A CTA button with `ArrowRight` icon is included. Import `SocietiesJoinCTA.css`.

As a frontend developer, implement the MarketplaceFiltersBar section for the Marketplace page. This section manages six state variables via useState: selectedCategory (null), priceMax (50000), selectedCondition ('All'), selectedSort ('Newest'), isModalOpen (false), and activeFilters ([]). It renders a results counter showing 1247 items, category dropdown buttons for ['Textbooks','Electronics','Furniture','Clothing','Services','Other'], condition toggles for ['All','New','Used'], a price range slider (₹0–₹50K), and a sort dropdown with ['Newest','Most Popular','Price: Low-High','Price: High-Low','Trending']. Active filter chips are rendered with remove (X) buttons and a clearAllFilters action. A mobile modal is triggered by a Sliders icon button (lucide-react), with handleModalApply and handleModalClose handlers. Includes ChevronDown and X icons from lucide-react for dropdowns and chip removal. Apply MarketplaceFiltersBar.css for desktop/mobile responsive layout.

As a frontend developer, implement the MarketplaceRecommendations section for the Marketplace page. This section uses useState (currentSlide, dismissed, isRefreshing, cardsPerView), useEffect, useRef, useCallback, and useMemo hooks. It renders a horizontally scrollable carousel of 6 product recommendation cards from productData (Calculus textbook, Haier mini fridge, JBL headphones, North Campus Fest Pass, MacBook Air M1, Levi's denim jacket), each with gradient image backgrounds (imageGradient), category icon (BookOpen, ShoppingBag, Headphones, Ticket, Smartphone, Shirt from lucide-react), seller name, sellerRating, trending badge (TrendingUp + Zap icons), and personalized reason label. Carousel navigation uses ChevronLeft/ChevronRight buttons updating currentSlide state. CARDS_VISIBLE breakpoints ({mobile:1, tablet:2, desktop:3, xlarge:4}) control cardsPerView via resize observer in useEffect. A RefreshCw button triggers isRefreshing animation state for recommendation refresh. An X dismiss button sets dismissed to hide the section. GSAP ScrollTrigger animates section entrance. Three.js is imported for potential canvas particle background. Apply MarketplaceRecommendations.css for carousel and card layout.

As a frontend developer, implement the MembersSearchFilter section for the Members page. This section manages six pieces of state via useState: `searchQuery`, `statusFilter`, `collegeFilter`, `yearFilter`, `roleFilter`, and `sortBy` (default 'name-asc'), plus `activeDropdown` for controlling which custom dropdown is open. Renders a search input with a clear (X) button via `handleSearchClear`. Includes four custom dropdown filters (Status, College, Year, Role) each toggled via `toggleDropdown` and using ChevronDown + Check icons from lucide-react. Each dropdown has its own options array (statusOptions, collegeOptions, yearOptions, roleOptions with values like 'society_head'). A sortOptions dropdown with 5 sort modes (name-asc, name-desc, joined-newest, joined-oldest, posts-high). Active filters are computed via `activeFilters` array (filtering falsy values), displayed as removable chips via `handleRemoveFilter`. A 'Clear All' handler resets all state. Accepts `selectedCount` prop. Bulk action buttons (Download, Trash2) appear when `selectedCount > 0`. Dropdown selections toggle off if re-selected (deselect behavior).

As a Tech Lead, verify the end-to-end integration between the Feed frontend implementation and the Campus Feed Firestore backend API. Ensure real-time post updates appear in FeedContent, filter state in FeedFilterBar correctly queries Firestore, post reactions/comments/saves persist to Firestore and reflect immediately in the UI, and load-more pagination fetches the next batch from the backend.

As a Tech Lead, verify the end-to-end integration between the Events frontend implementation and the Events Firestore backend API. Ensure event listings load from Firestore, RSVP actions persist correctly, event search/filter queries the backend, and the EventsCTA section correctly triggers event creation workflows for society heads.

As a Tech Lead, verify the end-to-end integration between the Messages page frontend implementation and the Direct Messages / Messages Firestore backend APIs. Ensure conversation list loads in real-time from Firestore onSnapshot, message sending persists to Firestore and reflects immediately in the thread view, unread counts update correctly across conversations, media uploads go through Firebase Storage and display inline, and group chat participant lists match Firestore data.

As a Tech Lead, verify the end-to-end integration between the Opportunities page frontend implementation (OpportunitiesHero, OpportunitiesFilters, OpportunitiesFeatured, OpportunitiesGrid, OpportunitiesByType, OpportunitiesCTA) and the Opportunities Firestore backend API. Ensure opportunity listings load from Firestore, type/domain/stipend/remote filters query the backend correctly, apply actions submit to Firestore, and the featured card countdown timer reflects accurate deadline data from the backend.

As a Tech Lead, verify the end-to-end integration between the Moderation page frontend sections (ReportsList, ActionLog) and the Admin Moderation Firestore backend API. Ensure the reports list loads from Firestore with correct severity/status filtering, moderation actions (approve/reject/escalate/dismiss) persist to Firestore and update report status in real-time, action log entries reflect actual admin actions from the audit log collection, and expandable reason panels display backend-stored reason text.

As a frontend developer, implement the SignupCompletionStep section for the Signup page. This section renders a celebration screen with a @react-three/fiber Canvas containing a ConfettiParticles component — 100 confetti meshes using planeGeometry with brand colors (#1A73E8, #FF7043, #FFD600, #FFAB40, #7C4DFF, #00BFA5, #E91E63), each with individual fallSpeed, driftX/Z, rotSpeedX/Y/Z properties computed via useMemo. The useFrame hook drives per-frame position.y decrement (fallSpeed * delta * 60), sinusoidal x drift, rotation increments, and ceiling/floor reset recycling. Lucide React icons (Check, Newspaper, CalendarDays, Users, ArrowRight) are used in the completion card content. GSAP drives entrance animations on the completion card and feature highlights. Implement SignupCompletionStep.css with confetti canvas overlay (pointer-events: none), completion card layout, and icon list styles.

As a frontend developer, implement the MarketplaceProductGrid section for the Marketplace page. This section uses useState, useEffect, useRef, and useCallback hooks to manage a product listing of 9+ INITIAL_PRODUCTS (MacBook Air M2, Calculus Textbook, Yamaha Guitar, Boat Rockerz headphones, IKEA desk, Casio calculator, HP printer, DU Fest T-Shirts, Nikon DSLR). Each product card shows title, price (₹-prefixed), condition badge ('new'/'used'), seller info with avatar initial and college name, location (MapPin icon), and action icons: Heart (save/unsave toggle updating the saved field on product state), Eye (view count), MessageCircle (chat), and ShoppingCart (add to cart). The grid supports LayoutGrid and LayoutList view toggle (lucide-react icons). GSAP ScrollTrigger is registered and used for card entrance animations via refs. Three.js (*) is imported for potential particle/background effects. Empty state components use SearchX and PackageOpen icons. Apply MarketplaceProductGrid.css for grid/list responsive layout.

As a frontend developer, implement the MembersTable section for the Members page. This section initializes with `initialMembers` array of 8 Delhi University student records (fields: id, name, email, initials, status ['active'|'suspended'], joined date, societyCount, role). Uses `useState` for `members` and `openMenuId`, and `useRef` for `tableBodyRef`, `cardListRef`, and `dropdownRef`. Implements a GSAP entrance animation on mount — querying `.mt-row` (desktop table rows) and `.mt-card` (mobile card list) elements, setting initial `{opacity: 0, y: 12}` then animating to visible with staggered timing via `gsap.context`. Uses `useCallback` for `closeMenu` and a `mousedown` document event listener (cleaned up on unmount) to close the open context menu when clicking outside via `dropdownRef`. Action menu (MoreVertical icon) per row triggers `openMenuId` state. Action menu items use lucide-react icons: MessageCircle, Eye, Ban, CheckCircle, UserX, UserCheck. Accepts `selectedIds` (Set) and `onSelectionChange` props for row selection management. Renders both a desktop table view (tableBodyRef) and a mobile card list view (cardListRef) for responsive layout.

As a Tech Lead, verify the end-to-end integration between the Societies and Society page frontend implementations and the Societies Firestore backend API. Ensure society listings load from Firestore, follow/unfollow state persists, join applications are submitted and tracked, society announcements display in real-time, and member lists reflect actual Firestore data.

As a Tech Lead, verify the end-to-end integration between the global search bar (Navbar, SocietiesSearch) frontend implementations and the Search & Discovery backend API. Ensure search queries return correct results for students, societies, events, opportunities, and posts, and that suggested profiles and trending sections populate from the backend.

As a Tech Lead, verify the end-to-end integration between the SocietiesSearch frontend section and the global search bar (Navbar) with the Search & Discovery backend API. Ensure full-text search across students, societies, events, opportunities, and posts returns accurate results, suggested profiles populate based on college/course/interests from Firestore, trending topics/hashtags sections reflect real backend data, and filter pill selections correctly scope the search query to the backend.

As a frontend developer, implement the MembersPagination section for the Members page. This section uses `useState` for `currentPage` (default 1) and `rowsPerPage` (default 10), with `TOTAL_RECORDS = 247` and `ROWS_OPTIONS = [5, 10, 20, 50]` as constants. Computes `totalPages` via `Math.ceil`, and `clampedPage` to guard against out-of-bounds state. Uses `useMemo` to compute `visiblePages` array implementing a sliding window algorithm: always shows page 1 and last page, shows up to 5 middle pages centered around `clampedPage`, and inserts `'...'` ellipsis strings when gaps exist. Renders a record range info label (e.g. 'Showing 1–10 of 247 members') using `startRecord` and `endRecord`. Includes Previous/Next nav buttons (ChevronLeft/ChevronRight from lucide-react) with disabled state when at bounds. Page number buttons with active state styling. `handleRowsChange` recalculates the current page to preserve the first visible record's position when rows-per-page changes. Ellipsis entries render as `<span className='mp-ellipsis'>` rather than buttons.

As a Tech Lead, verify the end-to-end integration between the Login/Signup frontend implementation and the Firebase Auth backend API. Ensure DU email validation flows correctly, JWT tokens are stored and refreshed properly, profile setup data persists to Firestore, and all auth state changes are reflected in the global state and UI across Login, Signup, and protected pages.

As a Tech Lead, verify the end-to-end integration between the Marketplace frontend implementation and the Marketplace Firestore backend API. Ensure product listings load from Firestore, save/unsave toggles persist, category and condition filters query the backend correctly, and the recommendations carousel reflects real personalized data.

As a Tech Lead, verify the end-to-end integration between the Signup profile setup frontend (SignupProfileStep, SignupInterestsStep, SignupCompletionStep) and the User Profiles Firestore backend API. Ensure profile data (name, college, course, year, photo, interests, availability toggles) persists to Firestore on completion, profile photo uploads go through Firebase Storage, badge assignments reflect in Firestore, and the Dashboard and Home pages correctly load the authenticated user's profile data from Firestore.

As a Tech Lead, verify the end-to-end integration between the Admin Panel, Moderation, and Members page frontend implementations and the Admin Moderation Firestore backend API. Ensure moderation queue items load from Firestore, report actions (approve/reject/escalate) persist correctly, member suspension/reactivation updates Firestore user records, and society management operations reflect in real-time.

As a Tech Lead, verify the end-to-end integration between the Members page frontend (MembersHeader, MembersSearchFilter, MembersTable, MembersPagination) and the Admin Moderation Firestore backend API. Ensure the members table loads real student records from Firestore with correct active/suspended status, search and filter queries hit the backend correctly, pagination fetches the right page of results, and member suspension/reactivation actions update Firestore user records and immediately reflect in the table.