Skip to content

feat: integrate projects-galleries API, implement interactive gallery cards...

Praveena Veeranki requested to merge feature/project into UI

🎯 Overview

This MR introduces a complete integration of the Projects Gallery with the live backend powered by Strapi, along with significant UI/UX improvements and stability updates. The goal is to deliver a dynamic, data-driven, and intuitive project exploration experience.

🔧 Key Changes

1. 🔗 API Integration & Data Mapping

  • Live Backend Sync: Replaced static FALLBACK_PROJECTS with real-time data fetching from

    /api/projects-galleries

  • Smart Data Mapping:

    • Differentiates between:

      • Standard galleries (e.g., BITS 2025)
      • Category-based galleries (LLM, Speech, Vision, Community)

    • Ensures accurate mapping of:

      • Descriptions
      • Focus items (items field)

2. 🎨 Interactive UI/UX Enhancements

🔹 Drill-down Navigation

  • Introduced cover card-based navigation
  • Users enter gallery view by clicking high-level categories

🔹 Descriptive Cover Cards

  • Displays:

    • Real descriptions (from backend)
    • Focus areas (items)

  • Enables quick understanding before navigation

🔹 Redesigned Project Cards

  • ❌ Removed redundant “View Details” button

  • ✅ Added:

    • Repo button
    • Demo button

  • ✨ Enhanced with:

    • Arrow animations
    • Hover effects

🔹 Data Integrity

  • Removed all fallback/mock text
  • UI now renders only verified backend data

3. ⚡ Stability & Performance

  • ✅ Test Suite Updated

    • Refactored Projects.test.tsx
    • Aligned with new API structure & navigation logic
    • All tests passing

  • 🎨 UI Consistency Improvements

    • Enhanced dark/light mode styling

    • Improved visual consistency across:

      • Gallery containers
      • Interactive elements

🧪 Verification

  • ✅ Verified API integration with live backend:

    apps.viswam.ai

  • ✅ Confirmed correct rendering of:

    • Gallery data
    • Category-level views

  • ✅ Handled empty states gracefully for categories without sub-projects

  • ✅ All automated tests passing

🎉 Result

  • Fully dynamic Projects Gallery powered by backend
  • Cleaner, modern, and interactive UI
  • Scalable architecture for future project additions

Merge request reports