feat: add dynamic club pages

[madhukarnitp]

feat: revamp clubs module with dynamic club pages, shared club context, and API-driven navigation

Overview

This PR introduces a complete restructuring of the Student Clubs section by implementing dynamic club pages using the App Router, centralized club data management through context, and reusable components for club-specific information.

The clubs experience is now powered by backend APIs with caching support, enabling individual pages for each club including Overview, About, Team, Gallery, and Contact sections.

---

✨ What's Changed

🏛️ Dynamic Club Architecture

• Added dynamic routing using /Student/Clubs/[slug].
• Implemented server-side club data fetching based on club slug.
• Added notFound() handling for invalid club routes.

🔄 Shared Club Context

• Introduced ClubProvider to avoid prop drilling across club pages.
• Added useClub() hook for consuming club data throughout nested routes.

🎨 New Club Experience

Implemented dedicated pages/components for:

Overview Page

• Club hero section with leadership highlights.
• Club statistics display.
• About section preview with navigation to full details.

About Page

• Detailed club description view.
• Fallback content support when club information is unavailable.

Team Page

• Leadership cards for faculty coordinators, campus PIs, and student representatives.
• Empty-state handling when team information is unavailable.

Gallery Page

• Responsive gallery layout.
• Image lightbox with next/previous navigation.
• Keyboard accessibility support.
• Lazy image loading for improved performance.

Contact Page

• Support for email, phone, website, and address information.
• Social media integrations (Instagram, LinkedIn, GitHub, YouTube, Discord, etc.).
• Empty-state handling for missing contact details.

📱 Sidebar Navigation

• Added dedicated club sidebar navigation.
• Separate mobile and desktop experiences.
• Active route highlighting for improved usability.

🌐 API Integration Improvements

• Introduced reusable club service functions.
• Added request timeout support.
• Implemented React cache for request optimization.
• Added ISR revalidation strategies for club data.

🗂️ Data Transformation Utilities

• Added helper functions to normalize backend responses.

• Standardized club data across the application.

• Improved handling for:

  • Gallery images
  • PI details
  • Leadership information
  • Contact details

🧭 Navbar Enhancements

• Clubs submenu is now generated dynamically from API data.
• Newly added clubs automatically appear in navigation.
• Added support for external club logo URLs.
• Improved mobile navigation interactions.

🧹 Cleanup

• Removed the legacy clubs slider implementation.
• Deleted unused CSS related to the previous clubs page.
• Simplified the overall clubs module structure.

---

📂 Files Added

Dynamic Club Pages

• src/app/Student/Clubs/[slug]/layout.js
• src/app/Student/Clubs/[slug]/page.js
• src/app/Student/Clubs/[slug]/ClubHero.js
• src/app/Student/Clubs/[slug]/ClubSidebar.js
• src/app/Student/Clubs/[slug]/ClubProvider.jsx

About Module

• src/app/Student/Clubs/[slug]/about/page.js
• src/app/Student/Clubs/[slug]/about/ClubAbout.js

Team Module

• src/app/Student/Clubs/[slug]/team/page.js
• src/app/Student/Clubs/[slug]/team/ClubTeam.js

Gallery Module

• src/app/Student/Clubs/[slug]/gallery/page.js
• src/app/Student/Clubs/[slug]/gallery/ClubGallery.js

Contact Module

• src/app/Student/Clubs/[slug]/contact/page.js
• src/app/Student/Clubs/[slug]/contact/ClubContact.js

Services & Utilities

• src/app/Student/Clubs/services/clubService.js
• src/app/Student/Clubs/utils/clubHelpers.js

Supporting Layouts

• src/app/Student/Clubs/layout.js
• src/app/Student/Clubs/loading.jsx

---

📂 Files Updated

Clubs Listing

• src/app/Student/Clubs/page.js

  • Migrated to API-driven club listing.
  • Added category-based filtering.
  • Linked clubs to dynamic detail pages.
  • Removed legacy slider implementation.

Global Navigation

• src/app/components/global/Navbar.jsx

  • Added dynamic club submenu generation.
  • Improved mobile navigation handling.
  • Added support for remote club logos.

---

🗑️ Files Removed

• src/app/Student/Clubs/sliderData.js
• src/app/Student/Clubs/style.css

---

✅ Testing Performed

• Verified club listing renders correctly.
• Verified dynamic routing using club slug.
• Verified invalid club slugs return a 404 page.
• Tested shared club context across nested routes.
• Tested mobile and desktop sidebar navigation.
• Tested gallery lightbox interactions and keyboard navigation.
• Verified navbar club links populate dynamically from API responses.
• Confirmed graceful fallback handling for missing club data.

---

Result

This PR modernizes the Student Clubs module by introducing a scalable, API-driven architecture with improved maintainability, reusable components, and a significantly enhanced user experience across club pages and navigation.

📷 Screeenshots