Hero section

Case: Piio

Client slogan: 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 developed 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 could 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 the thumbnails or indicators can be easily customized through the settings we provide.The format, size and position of the main carousel, as well as the thumbnails or indicators can be easily customized through the settings we provide.
  • The appearance, size, colors, etc. of the arrows can also be modified through the settings.The appearance, size, colors, etc. of the arrows can also be modified through the settings.
  • To zoom in on the image of the main carousel we developed different types of zoom, such as inline, flyout or popup.To zoom in on the image of the main carousel we developed different types of zoom, such as inline, flyout or popup.

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

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

Solution example illustration
Client testimonial:

“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.”

Authored by:
Gonzalo Rosso image

Name: Gonzalo Rosso

Company position: 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!