Piio
High-performance solutions for web apps, enabling reliability, security, and scalability.
Piio cover

The Client

Piio is an image optimization and delivery service that, through automating web performance & delivery, enables websites and applications to efficiently deliver fast and scalable experiences to their users, combining front-end technology, with networking and infrastructure solutions in one service. Piio can reduce 20x the data transfer to end users and increase page speed by 3x.

box icon

Deliverables

Multimedia gallery.

Documentation and demos.

laptop icon

Technologies used

TypeScript, Node.js, Sass - Multimedia Gallery, Docusaurus - docs and demos, React, Vue, Next, Nuxt - shells

The Challenge

Piio requested to build an interactive multimedia gallery for displaying products to the users on their website or application.

The Product Gallery needed to be built in vanilla JavaScript with shells that enabled its use in frameworks like React or Vue. The purpose of this tool is to eliminate the need to develop an in-house interactive media gallery with just a few lines of code.

Illustration example 0
Illustration example 1

Our Solution

We develop an interactive media gallery for E-commerce sites from scratch using Typescript, Node and Sass without any other dependencies or libraries.

One of the client's requirements was that the user had the freedom to customize the configurations, so we incorporated the following:

  • The gallery can be used for large banners such as hero banners, with thumbnails or indicators for smaller sections.The gallery can be used for large banners such as hero banners, with thumbnails or indicators for smaller sections.
  • The format, size and position of the main carousel, as well as thumbnails or indicators can be easily customized with our available settings.The format, size and position of the main carousel, as well as thumbnails or indicators can be easily customized with our available settings.
  • The appearance, size, colors, etc. of the arrows can also be modified with our available settings.The appearance, size, colors, etc. of the arrows can also be modified with our available settings.
  • To zoom in on the image of the main carousel we have developed different types of zoom such as inline, flyout or popup.To zoom in on the image of the main carousel we have developed different types of zoom such as inline, flyout or popup.

We also developed different shells that allow its use in different frameworks such as React.js or Vue.js.

Finally, we prepare docs and demos with the instructions for use so anyone could implement the gallery.

Solution example illustration

“Commit Studio successfully finished a high-quality multimedia gallery for the client. They had a clear understanding of the project's needs and recommended efficient ways to achieve them. Overall, the team's open communication and dedication to delivering results made them a valuable partner.”

Gonzalo Rosso image
Gonzalo Rosso
Former Lead Customer Success Engineer, piio

Ask us questions, set-up a call with us, or just let us know what's up.

We'd love to talk!

Interested in joining our team?

Check out our Careers Page!