DEV Community

Denis
Denis

Posted on

How Our AI Agents Built a Dynamic Global Event Timezone Converter & Embed Widget

#ai #opensource #node #javascript

Global Event Timezone Converter & Embed Widget: Eliminate Timezone Confusion

At Pixel Office, we are constantly seeking ways to simplify life for developers and content creators. With the rising number of global online events, managing timezones has become a critical challenge. We are proud to present our latest Devlog: the Global Event Timezone Converter & Embed Widget.

The Problem We Solve

Are you organizing a webinar, stream, or online conference for an international audience? No more timezone headaches! Our widget eliminates the guesswork by automatically displaying the event time in each viewer's local time, complete with a dynamic countdown timer.

How Our AI Agents Worked on This Project

Our team of AI agents embarked on this project with a clear vision:

  • Klára (AI Designer): Klára spearheaded the visual concept. She designed an intuitive interface for inputting event details and sophisticated, modern templates for the widget itself. Her designs include variations for glassmorphism, dark mode, ensuring the widget looks great on any webpage, with an emphasis on user-friendliness and visual appeal.

  • Jan (AI Developer): Jan delved into the code, transforming Klára's designs into a robust HTML and JavaScript solution. Central to his work was the logic for dynamic timezone conversion and the generation of embeddable code. For managing user data and the status of unlocked features, he implemented integration with Firebase and localStorage. Here's a snippet illustrating the core initialization and feature unlock status management:

    
        const WIDGET_SLUG = "global-event-timezone-embedder";
        const FIREBASE_API_KEY = "AIzaSyFakeKeyForShowcaseHubAuthTestingOnly"; // As per instructions
        const AUTH_API_BASE = "https://api.pixeloffice.eu/api/pay/";
        const WHATSAPP_NUMBER = "420607450436"; // As per instructions

        // Firebase Initialization
        const firebaseConfig = {
            apiKey: FIREBASE_API_KEY,
            authDomain: "pixeloffice-hub.firebaseapp.com",
            projectId: "pixeloffice-hub",
            storageBucket: "pixeloffice-hub.appspot.com",
            messagingSenderId: "1234567890",
            appId: "1:1234567890:web:abcdef123456"
        };
        if (!firebase.apps.length) {
            firebase.initializeApp(firebaseConfig);
        }
        const auth = firebase.auth();
        let currentUser = null;
        let isUnlocked = localStorage.getItem(`pv_unlocked_${WIDGET_SLUG}`) === "true";
        let usageCount = parseInt(localStorage.getItem(`pv_action
// ... a další multijazyčné překlady

    "For seamless operation and differentiation between free and premium versions, we implemented intelligent state management for isUnlocked via localStorage, complementing a robust Firebase integration for authentication and usage monitoring. This ensures a smooth transition and personalized experience for every user."

  • Martin (AI QA Specialist): Martin rigorously tested widget generation across various timezones and browsers. His meticulous work identified and resolved potential bugs, ensuring the accuracy and reliability of time conversion and flawless countdown functionality.

  • Tomáš (AI DevOps Engineer): Tomáš ensured the seamless deployment of the application on our infrastructure and optimized it for fast and stable operation. He handled the scalability and security of the entire solution.

Features and Benefits of Our Widget

  • Automatic Timezone Conversion: Your audience will see the event time in their local timezone, without needing to perform any calculations.
  • Countdown Timer: A dynamic countdown builds anticipation before the event begins.
  • Customizability:
    • Free: Up to 3 widget generations with standard themes.
    • Premium (one-time $1.99 Stripe payment): Unlimited generations, advanced customization options (glassmorphism, dark mode, custom branding), and various embed styles (inline, popup, banner).
  • Easy Embedding: Simply copy and paste the HTML/JS code onto any webpage.

Try It Yourself!

Check out the live demo at https://pixeloffice.eu/showcase/global-event-timezone-embedder/ and generate your own widget! Start simplifying timezone management for your global events today.

Top comments (0)