Gmiu Gallery V2
Split-Screen Course Explorer & Multi-Image Admin Panel
Project Overview
GMIU Gallery v2 is a full-stack institutional web application built for Gyanmanjari Innovative University (GMIU) to serve as an interactive, public-facing course explorer and image gallery portal.
Overview
GMIU Gallery is a full-stack institutional web application built for Gyanmanjari Innovative University (GMIU) to serve as a public-facing course explorer and image gallery portal. On the frontend, the application is architected as a React SPA using Vite as the build tool, with TailwindCSS handling utility-based styling.
Animation-Driven User Interface
It features a rich, animation-driven UI — including a custom split-screen 'line reveal' page transition, animated stagger-card entrance effects, a custom cursor component, QR code generation, and smooth animated modals built with Radix UI Dialog.
Structured Public Experience
The core public experience is split across three major feature areas: a Home page that dynamically fetches academic and education levels from the PHP REST API and presents them as interactive stacked-tab course cards; a Course Explorer that drills down from academic level → education level → course descriptions → branch details using nested dynamic routes; and a Gallery with category-filtered, paginated image fetching, a CSS masonry column layout, skeleton loading states, error retry logic, and a full-screen lightbox modal.
Relational Placement Statistics
The branch detail pages go a step further by embedding a Placement Overview section — pulling live stats (registered students, placed students, placement rate, highest & average packages, companies visited) from the database and rendering them as animated stat cards — as well as a contextually filtered mini-gallery embedded directly within the branch view, showing only images tagged to that specific academic level, education level, and branch combination using FIND_IN_SET SQL queries.
Robust PHP & AJAX Admin Control
A separate PHP admin panel (gallery-backend/) handles all content management. It includes a session-based login system, a dashboard, and CRUD pages for levels, courses, and multi-image uploads (up to 10 images per batch, 2500 KB total cap, with live preview). Each admin page features DataTables with search, pagination, and export (CSV, PDF, print), dynamically cascading dropdowns loaded via AJAX/Fetch API, Select2 for multi-select, and soft-delete logic with active/inactive toggling. The REST API layer (backend-api/) exposes six PHP endpoints consumed by the React frontend via Axios.
Screenshots & Gallery
