The College Jean-de-Brebeuf Touchscreen Wall project involved creating an interactive graduation photo display application for large-scale touchscreen TVs. The system features a carousel-style dynamic homepage with an advanced search engine, zoomable photo interface, and an administrative dashboard for content management.
As the Full-stack Developer, I engineered a responsive carousel gallery with an animated search bar, enabling users to browse photos efficiently. The implementation of zoom functionality and optimized image rendering were critical for providing a smooth user experience on the large touchscreen displays.
The project required careful consideration of performance optimization for handling large numbers of high-resolution images while maintaining responsive touch interactions. The administrative dashboard allows staff to easily manage and update the photo collection.
Created an engaging interactive platform for browsing graduation photos.
Provided intuitive tools for staff to manage and update content.
Successfully optimized image rendering for high performance on large displays.
A React-powered carousel system optimized for 65-inch touchscreen displays. Features hardware-accelerated CSS transforms, touch gesture recognition via Hammer.js, and lazy-loaded high-resolution imagery served through Ruby on Rails RESTful endpoints.
Real-time graduate search with predictive text and fuzzy matching algorithms. The React component debounces user input and queries a Rails-backed Elasticsearch index, returning results in under 100ms with highlighted matching substrings.
Dynamic filtering interface allowing users to browse graduates by program, year, or class. Built with React state management and RESTful API pagination, supporting efficient traversal through thousands of records with smooth SASS-animated transitions.
Touch-optimized mosaic grid with pinch-to-zoom functionality. Implements custom gesture detection for simultaneous pan and zoom operations, with progressive image loading that fetches higher resolutions as users zoom in—tested with Jest for gesture accuracy.
Detailed class roster display with animated card transitions. Each graduate card fetches additional data via RESTful API calls, featuring SASS-powered hover states and touch-friendly interaction zones optimized for large touchscreen ergonomics.
