NaPola a Skroz — Interactive AI Web App for a Creative Contest

NaPola a Skroz is an interactive web application built for the Atlantic Štark brand as part of the “Najlepše želje” promotional campaign. The idea was simple and fun: give people a way to create playful, personalized images and share them instantly—boosting engagement and brand visibility across social platforms.

Concept & Goals

Blend creativity, entertainment, and the viral potential of social media. Inside the app, users can:

• Upload a selfie (or pick from starter photos).
• Generate a unique AI image using predefined styles and filters.
• Preview, save, and share directly to social networks.
• Enter the activation automatically and compete for prizes.

The experience is intentionally fast, simple, and visually polished to encourage maximum participation.

Technology Stack

Frontend

• Laravel Blade Templates for modular, maintainable views
• HTML5 / CSS3 (SCSS) styled to match the campaign brand
• JavaScript (ES6) for interactivity, form validation, and dynamic UI
• AJAX (Fetch API) for smooth, no-reload requests
• Lottie animations as lightweight loaders to reduce perceived wait time

Backend

• Laravel (PHP 8) using an MVC architecture for stability and clean structure
• MySQL to store users, generated images, and share events
• OpenAI API (Vision + DALL·E) for content understanding and image generation
• ImageMagick for server-side image processing and optimization

Integrations

• Social sharing (Facebook, Instagram, WhatsApp, Viber): custom share links + per-image Open Graph tags
• Google Analytics for engagement and funnel tracking
• GDPR Cookie Consent for privacy compliance

How It Works

1. Landing & CTA — clear call to action (“Create your NaPola a Skroz image”).
2. Upload/Capture — the user uploads a photo or takes one on the spot.
3. AI Pipeline
   • The image is normalized on the server (ImageMagick).
   • OpenAI Vision detects key content and prepares a targeted prompt.
   • DALL·E generates a personalized transformation.
4. Result & Actions — the user sees the final image (with an animated loader during processing), can download it, and share instantly.
5. Analytics — the system logs created images, shares, and downloads for campaign reporting.

Challenges & Solutions

• Generation speed — We optimized the pipeline by sending lighter preview assets for AI processing first, then rendering full-quality images for download.
• Inconsistent source photos — Automatic scaling and smart cropping ensure consistent output regardless of device or orientation.
• Social previews — Each generated image gets a unique detail page with correct Open Graph tags so previews render perfectly on social platforms.

UX & Design Approach

• A minimalist, warm visual style aligned with Najlepše želje branding
• Large, central CTAs to reduce friction and guide users forward
• Lottie loaders to smooth over waiting times
• Full mobile responsiveness for phones and tablets

Campaign Results

• High engagement: strong volume of created, shared, and downloaded images
• Positive user feedback: fun, easy, and fast to use
• Expanded reach: organic shares amplified brand visibility without extra ad spend

My Role

• End-to-end backend development (Laravel, APIs)
• Frontend implementation and UX optimizations
• OpenAI integration for vision + image generation
• Social sharing implementation and meta-tag setup
• Performance testing and device/browser optimizations

Conclusion

NaPola a Skroz shows how AI, thoughtful web development, and creative marketing can combine into a playful, share-worthy experience. With a fast app, on-brand design, and smart integrations, we delivered a tool that entertained users and delivered measurable value to the brand.

Compact Version (optional)

Overview: An AI-powered selfie app for Atlantic Štark’s Najlepše želje campaign. Users upload a photo, generate a unique AI image, and share it instantly.
Tech: Laravel (PHP 8), Blade, MySQL, ES6, AJAX, OpenAI Vision + DALL·E, ImageMagick, Lottie, GDPR consent.
Highlights: Optimized generation pipeline, consistent output across devices, per-image Open Graph pages for perfect social previews.
Impact: High engagement, positive feedback, and expanded organic reach.

‍