Company
Date Published
Author
Hassan El Mghari
Word count
1772
Language
English
Hacker News points
None

Summary

The Next.js Conference, held in October 2022, was the largest ever with over 110,000 registered developers and 55,000 online attendees. To showcase the photos taken by photographers on site, a custom image gallery was built using Cloudinary as the CDN to store high-quality images. The gallery displayed hundreds of large images quickly and efficiently. The main screen displayed images in a grid, while a modal showed a larger version with a carousel of smaller images. Individual dynamic routes displayed standalone photos in high resolution. To improve performance, images were fetched at different sizes for each area of the application. Image placeholders were used to instantly show users something as the images loaded, and lazy loading was implemented to load only the necessary images. Framer Motion was used for smooth animations, and Headless UI provided accessible components. AI-generated alt tags improved accessibility. The gallery also included features like restoring scroll when navigating back to the grid.