Back to Projects

SharedLens SPA

Event photo-sharing platform with seamless uploads, custom captions, and responsive gallery layout.

By Marios Sofokleous
August 2023 – October 2023

Overview

SharedLens is a dedicated collective photo-sharing platform designed for special events, created specifically for the wedding of my friend, where I had the honor of serving as the best man. The app simplifies the process of gathering and sharing photos taken by event guests, enabling hosts to effortlessly collect cherished moments in one centralized location. With a focus on ease of use, streamlined uploads, and responsive design, SharedLens delivers a seamless and enjoyable experience for both guests and hosts.

Existing photo-sharing platforms like Google Photos or other cloud storage solutions are often designed for individual use and come with limitations such as requiring accounts, additional setup processes, and storage constraints. SharedLens addresses these challenges by offering an intuitive solution where:

  • Guests can upload photos directly without needing accounts or complicated setups
  • Images are automatically resized before upload to optimize storage and speed
  • Each photo can include a custom caption, allowing guests to add context or stories to their memories
  • Photos are stored securely without privacy concerns or storage limitations

Furthermore, SharedLens offers a gallery-style layout allowing users to view shared photos in an engaging and organized manner. By combining simplicity, scalability, and privacy, SharedLens enhances user engagement while providing an alternative to traditional photo-sharing solutions.


Key features

User-friendly functionality

  • Easy photo uploads: Guests can upload photos directly through the app without needing an account
  • Image resizing: Automatic resizing of images before upload to optimize storage and speed
  • Custom captions: Guests can add personalized captions to each photo during upload, adding context and personality to every memory

Performance & accessibility

  • Pagination: Efficient navigation with paginated photo displays for better performance
  • Responsive design: Fully accessible on desktops, tablets, and mobile devices

Security & feedback

  • Secure storage: All photos are securely stored using Firebase Storage
  • Loading states: Various loading indicators implemented to provide user feedback during image processing

Visuals

Gallery UI

Masonry photo gallery displaying event images with captions. Masonry gallery that showcases photos and their captions, updating seamlessly as new images are added.

Easy photo uploads

Photo upload interface featuring a drag-and-drop area at the top, displaying four selected images each with a caption input field. Upload photos directly, add custom captions, and share memories without needing accounts or complex setups.

Responsive design

SharedLens app shown on mobile, tablet, and desktop screens to demonstrate responsive layout. SharedLens adapts seamlessly across devices for optimal usability.

Skeleton loaders

Gallery interface with skeleton placeholders indicating images are loading. Skeleton placeholders enhance perceived performance and provide a smooth visual transition while images load.


Conclusion

Developing SharedLens was a rewarding experience that allowed me to apply modern web development practices to solve real-world challenges in event photo sharing. Key takeaways include:

  • Client-side image processing using tools like Pica for high-quality resizing
  • Efficient data management with Firebase Storage
  • Creating responsive, user-friendly interfaces with React

This project reinforced the importance of optimizing performance, accessibility, and scalability while delivering a seamless user experience.

Explore SharedLens on GitHub or contribute to its development. Interested in learning more about my work? Explore other projects or connect with me on LinkedIn. Let’s discuss how my skills can contribute to your team!


Share this page
Back to Projects

Let's connect

Interested in adding me to your development team?