Portfolio

back to portfolio

AiFront mobile app

ollowing the launch of the AiFront web platform The Piplos Media team has developed a fully-fledged PWA version of the app, optimised for mobile use and quick access from any device without the need to download it from the App Store or Google Play.

image 14.jpg

The main aim of the project was to transform the AI façade visualiser into the most user-friendly mobile tool possible for use ‘in the field’—directly on site, at construction sites or when meeting with clients.

image 15.jpg

Project objective

Develop a mobile version of AiFront that:

  • functions as a native app
  • can be installed on a smartphone with a single click
  • provides quick access to AI-generated facade visualisations
  • maintains the high performance and user experience of the web version
  • works on Android, iOS, tablets and desktops
image 16.jpg

The problem

The classic web version of the project was well-suited to desktop use, but in practice, users often work from their smartphones:

  • taking photos of the façade directly on site
  • showing options to the client during a meeting
  • quickly comparing materials
  • using the service whilst on the move

However, developing separate native apps for iOS and Android significantly increased the time and cost of launch.

image 17.jpg

Solution

PWA architecture

Instead of creating two separate mobile apps, a modern PWA (Progressive Web App) architecture was implemented.

This made it possible to:

  • launch the app directly from the browser
  • pin it to the device’s home screen
  • use full-screen mode just like a native app
  • reduce development costs and timeframes
  • maintain a single codebase
image 18.jpg

UX and mobile experience

The interface has been completely redesigned for mobile use cases:

  • simplified navigation
  • adaptation of the editor interface for touch control
  • optimised interaction areas
  • improved drag-and-drop functionality on mobile devices
  • smooth transitions and animations

Particular attention was paid to performance and the app’s ‘native’ feel.

image 19.jpg

Key features:

The PWA version supports:

  • uploading photos of building facades from a smartphone
  • AI-powered material visualisation
  • working with user projects
  • viewing results in full-screen mode
  • saving and re-editing projects
  • responsive design for smartphones and tablets
image 20.jpg

Technology stack

Frontend

  • React + TypeScript
  • Vite
  • Tailwind CSS
  • PWA configuration и service workers
  • Responsive UI architecture
image 21.jpg

UX/UI

  • Mobile-first design
  • Interfaces optimised for touchscreen navigation
  • Glide-morph effects and modern UI animations
  • Smooth micro-interactions
image 22.jpg

Performance

  • lazy loading
  • image optimisation
  • resource caching
  • accelerated loading via service workers
image 23.jpg

The benefits of the PWA approach

For businesses

  • Launch without publishing on the App Store or Google Play
  • Single codebase
  • Faster product development
  • Lower maintenance costs
image 24.jpg

For users:

  • One-click installation
  • Works just like a regular app
  • Quick access from the home screen
  • No need to download from app stores
image 25.jpg

Result:

As a result, AiFront now has a fully-fledged mobile version that:

  • has expanded the product’s use cases
  • has made the service convenient for use on-site
  • has increased user engagement
  • has maintained a consistent user experience across web and mobile
image 26.jpg

The project has moved a step closer to becoming a fully-fledged AI SaaS product for the construction and façade industry.

image 27.jpg