JCOM Member Directory
An internship project developed at Exouzia Technologies — a high-performance digital member directory and business networking platform for JCOM members, featuring instant real-time search, touch gesture navigation, and interactive profile cards.
Member business profiles indexed with sub-millisecond search & gesture navigation.
Building a production-ready client directory during internship at Exouzia.
As a Frontend Developer Intern at Exouzia, I was responsible for architecting a mobile-first directory for 100+ organization members. The challenge was ensuring sub-millisecond search filtering, immediate contact action buttons, and zero layout shifts across desktop and mobile devices.
React 19, Vite & Framer Motion with Tailwind CSS v4.
Leveraged modern React 19 memoized state hooks (`useMemo`) for instant search execution, built custom horizontal touch swipe gesture handlers for intuitive mobile navigation, and applied Framer Motion for staggered list entrance animations.
Interactive Implementation
const filteredMembers = useMemo(() => {
if (!searchQuery.trim()) return members;
const query = searchQuery.toLowerCase().trim();
return members.filter((member) => {
const formattedIdx = String(member.id).padStart(2, "0");
return (
member.name.toLowerCase().includes(query) ||
member.slug.toLowerCase().includes(query) ||
formattedIdx.includes(query) ||
String(member.id).includes(query)
);
});
}, [searchQuery]);Core Highlights
Real-Time Instant Search
Sub-millisecond fuzzy filtering across member names, company titles, IDs, and business categories.
Digital Profile Cards
Interactive cards displaying business services, direct WhatsApp touchpoints, telephone dialing, and social links.
Touch & Gesture Navigation
Mobile-optimized horizontal swipe handlers enabling seamless touch navigation between directory lists and profile views.
Staggered Motion UI
Fluid entrance animations and responsive layout transitions powered by Lenis smooth scroll and Framer Motion.