ICWRER 2025 Conference Website – A Modern React Experience for Academic Excellence

Built a comprehensive conference website that brings together water resources researchers from around the globe, featuring dynamic animations, responsive design, and seamless user experience for academic excellence.

🔗 Live Project

🔗 Conference Website: https://karunya.edu/daiml/icwrer

🪄 What Sparked This Project?

The International Conference on Water Resources and Environment Research (ICWRER) 2025 needed a digital presence that matched its academic prestige. As a developer passionate about creating meaningful web experiences, I was commissioned to build a sophisticated conference website that would serve hundreds of researchers, students, and industry professionals worldwide.

The challenge was clear: create a website that not only looks stunning but also handles complex conference logistics – from registration and accommodation booking to detailed schedule management and committee information. The site needed to be professional yet approachable, informative yet engaging.

What excited me most was the opportunity to combine my technical skills with environmental consciousness, creating a platform that would facilitate important discussions about water resources and climate change. The conference organizers wanted something that would stand out from typical academic websites while maintaining the credibility and professionalism expected in academic circles.

🧰 Tech Stack

I chose React for its component-based architecture, which was perfect for managing multiple complex sections like registration tables, committee listings, and accommodation details. Vite was selected over Create React App for its superior build performance and modern development experience.

The decision to use vanilla CSS instead of a framework like Tailwind was intentional – it gave me complete control over the visual design and allowed for custom animations that truly reflect the conference's professional branding. This approach enabled me to create unique loading animations and transitions that perfectly match the academic context.

✨ Key Features

🚧 Challenges I Faced

Video Loading and Performance Optimization

The hero section features a background video that needed to load seamlessly without blocking the user experience. I implemented a sophisticated loading system that waits for video readiness before transitioning from the loader, ensuring smooth playback across all devices and connection speeds. This involved careful handling of video preload attributes, muted playback for autoplay compatibility, and playsInline for mobile optimization.

Complex State Management with Scroll Navigation

Managing active navigation states based on scroll position proved tricky. I created a custom scroll listener that calculates viewport positioning and updates navigation highlights in real-time, including handling dropdown menu states for nested navigation items. The challenge was ensuring smooth performance while constantly monitoring scroll events without causing performance bottlenecks.

Responsive Table Design for Complex Data

The registration and schedule tables needed to work flawlessly on mobile devices while displaying complex information. I solved this by implementing horizontal scroll containers with visual cues (like the "Swipe" button) to guide users on mobile interactions. The tables maintain their structure while providing clear navigation hints for mobile users.

Multi-Component Architecture Management

With 15+ major components, maintaining consistent styling and state management became complex. I established a clear CSS variable system in Variables.css and component communication patterns that kept the codebase maintainable. This included organizing components logically and ensuring consistent prop passing patterns throughout the application.

📚 What I Learned

📈 Optimisations & Performance

Image and Video Optimization

All images use the loading="lazy" attribute to improve initial page load times. Background video includes multiple optimization techniques: preload="auto", muted, and playsInline for better mobile compatibility. This ensures fast loading while maintaining visual impact.

Component Architecture Optimization

Each section is a separate component, enabling better code organization and potential for future code-splitting. This modular approach makes the codebase more maintainable and allows for efficient updates to individual sections without affecting the entire application.

CSS Custom Properties System

Centralized theming system in Variables.css for consistent design and easy maintenance. This approach eliminates repeated style definitions and makes theme modifications effortless, while ensuring design consistency across all components.

Smooth Scrolling Implementation

Custom scroll behavior with offset calculations ensures perfect navigation positioning. The scroll listener is optimized to prevent performance issues while providing real-time navigation updates and smooth transitions between sections.

🙌 Final Thoughts

Building the ICWRER 2025 conference website was an incredibly rewarding experience that challenged me to create something truly professional and functional. The project taught me the importance of balancing visual appeal with practical functionality – every animation and interaction serves a purpose in guiding users through the conference information.

My biggest win was creating a loading experience that actually enhances the user journey rather than frustrating users. The seamless transition from loader to hero video creates a memorable first impression that sets the tone for the entire conference experience. The scroll-based navigation system also became a standout feature that provides intuitive wayfinding throughout the complex conference information.

If I were to start over, I might consider implementing a content management system for easier updates to committee information and schedule changes. I'd also explore adding a registration form integration with payment processing and automated email confirmations. Additionally, implementing a dark mode theme could enhance accessibility for different user preferences.

The water resources and environmental focus of this conference made the work feel meaningful beyond just the technical aspects. It's rewarding to know that this website will help facilitate important discussions about climate change and water conservation that could impact our planet's future. This project proved that academic websites don't have to be mundane – they can be both informative and visually engaging while maintaining the credibility expected in professional academic contexts.