A high-performance, cloud-native photography platform designed and deployed using modern web technologies and AWS cloud services. Pexeluxe automatically indexes newly uploaded images, serves them globally via CDN, and delivers a smooth, responsive viewing experience with real-time telemetry.
Live Demo: 👉 https://d23oj82a8a9j68.cloudfront.net/
Pexeluxe was built as a full production system to explore:
- Cloud-native architecture
- Event-driven automation
- High-performance front-end rendering
- Scalable content delivery
- Real-world system design
The platform allows new images to be uploaded to Amazon S3, automatically indexed using AWS Lambda, and displayed instantly on a global website backed by Amazon CloudFront CDN.
User Browser
│
▼
CloudFront CDN (Global Edge Network)
│
▼
Amazon S3 (Static Website + Image Storage)
│
▼
AWS Lambda (Image Indexer)
│
▼
images.json (Auto-generated image index)
- Amazon S3 — image storage & static website hosting
- AWS Lambda — event-driven image indexing
- Amazon CloudFront — global content delivery & caching
- IAM — fine-grained security & permissions
- Serverless Architecture
- Event-Driven Architecture
- HTML5
- CSS3
- JavaScript
- Responsive Design
- Performance Optimization
- CDN caching strategies
- Lazy loading
- Infinite scrolling
- Telemetry & analytics
- Distributed systems design
- Client-side instrumentation
- UX & UI optimization
- User uploads photos into the S3
photos/directory. - S3 emits an ObjectCreated event.
- AWS Lambda is triggered automatically.
- Lambda scans all images and generates an updated
images.json. - Frontend fetches
images.jsonand renders the gallery instantly. - CloudFront distributes everything globally with edge caching.
No manual updates. Fully automated.
- Infinite Scroll — loads images in batches for smooth browsing
- Lazy Loading — images only load when entering viewport
- Aspect-ratio stabilization — prevents layout shift while loading
- High-performance DOM batching — DocumentFragment rendering
- Responsive Grid — adapts perfectly to desktop, tablet, and mobile
- Click image → fullscreen viewer
- Keyboard navigation:
←previous image→next imageEscclose viewer
- Overlay click closes viewer
Client-side telemetry records:
- Time spent on page
- Images loaded
- Scroll depth
- Viewer open count
- Device information
Metrics are collected via JavaScript and logged for performance analysis and UX improvements.
- Clean minimal design inspired by modern photography platforms
- Stable layout with no content jumping
- Subtle animations & hover effects
- Soft shadows & rounded corners
- High contrast for visual clarity
- Optimized for both touch and keyboard navigation
- CDN-level caching using CloudFront
- HTML served with low TTL for rapid updates
- Images cached aggressively at edge locations
- Batch rendering & deferred loading
- Minimal JavaScript execution on scroll
- IAM-based access control
- Private write permissions on S3
- Public read access only for necessary objects
- CloudFront origin protection
- Server-side encryption for stored objects
- Frontend hosted on Amazon S3
- Served globally by CloudFront
- Fully serverless backend using AWS Lambda
- No servers to manage
- Scales automatically with traffic
Pexeluxe demonstrates production-grade engineering:
- Cloud architecture
- Event-driven backend automation
- High-performance frontend
- Distributed systems design
- Real-world DevOps workflows
This is not a demo — this is a live production system.
🌐 https://d23oj82a8a9j68.cloudfront.net/