cover-print

Print2Mobile | Audio Book – Static Web APP

Von am 19.03.2026

A book titled Flightpath filled to the brim with interesting facts, stories and visuals about aviation, but the question remains: How could we add even more value to an already great product.

Project Overview

To start off I invented a fictional product to which our lectures topic, Print to Mobile(Web) and the use of QR Codes can be applied to. I worked to gain added value for the product, as the title suggest my approach was by extending the physical product with a digital audio book. The project aims to provide an immersive experience through the scanning process and accommodate readers who may prefer to listen to books over reading or just want to listen while being occupied by something else.

A moment after the QR code is scanned the user is met with a book that opens its cover (the same as the physical book cover) and reviles an audio player where the user can listen to the audio book. Test it your self HERE.

Implementation

I decided to create a static web application as the title suggests. This was in order to simplify the project by having no server side. For the creation of the app I used a famous front end framework called Nuxt.js that is based on Vue.js for template files. Following the chronological order of how the user would encounter interact with the app. The opening of the book cover is created using Tailwindcss and some additional custom css code where the built in tools of tailwind were not enough. When the book is opened the user encounters the audio player which is created using the Web Audio API that is available in the browser by default. Finally I used the extremely user friendly deployment service of Netlify to publish my application to the web within minutes.

Summary

The product of this project is a prototype that shows how there can be added value to an existing products by incorporating the Print2Mobile concept. Future iterations of the project could also make use of augmented reality to further enhance the book by showing the plane models “pop-out” of the book through the users cameras into their surroundings and allow them to have a closer look.

I personally had fun seeing what’s the most creative way I can integrate the Print2Mobile concept in my project.

Find the application at: https://curious-mousse-8bd688.netlify.app/?auto=1

Disclaimer: This is a personal project created for educational and illustrative purposes. It is not affiliated with any existing organizations or products.

Beitrag kommentieren

(*) Pflichtfeld