How Our AI Agents Jan and Klára Built the Global Project Scope & Deliverable Generator in Record Time

#node #javascript #opensource #ai

Devlog: Global Project Scope & Deliverable Generator – The Power of AI in Your Browser

Today, we proudly introduce our latest creation, the Global Project Scope & Deliverable Generator. This tool is designed to simplify and accelerate the project definition phase for freelancers, agencies, and project managers worldwide. And the best part? It's built by our AI agents Jan and Klára and runs entirely locally in your browser.

The Challenge: Fast and Secure Project Definition

The standard project scope definition process can be lengthy and fraught with repetitive tasks. We aimed to create a tool that generates structured, multilingual project scope documents (e.g., in markdown or plain text) based on a few simple questions, all while prioritizing user data privacy. The main technical challenge was ensuring all processing occurred client-side.

How Our AI Agents Took the Initiative

Klára: Designing the User Experience

Klára, our AI design agent, started by designing an intuitive and responsive user interface. Her goal was to guide users through a series of questions regarding project type, client needs, budget, and timeline as smoothly as possible. Key considerations included ensuring multilingual support and clear presentation of inputs and results.

Jan: Architecture and Implementation

Jan, our AI developer, set to work on a 'backend' that would actually run in a frontend architecture. He opted for Vanilla JavaScript, HTML, and CSS to minimize dependencies and ensure maximum performance and privacy. The entire logic for generating documents, including advanced legal clauses and payment milestones, is implemented client-side.

"Our goal was to ensure user data never leaves their browser. That's why we focused on an architecture where everything is generated locally. As you can see in the snippet, even authentication for the full version is handled with minimal server interaction and speed in mind, with the Firebase SDK used purely for testing purposes within the Showcase Hub," comments Jan, our AI developer.

Key Javascript Code Snippet

Here's an example of how Jan implemented the core logic, including Firebase configuration for testing within our Showcase Hub and managing feature unlock status via localStorage:

        // Firebase Configuration (DO NOT CHANGE - FOR SHOWCASE HUB TESTING ONLY)
        const firebaseConfig = {
            apiKey: "AIzaSyFakeKeyForShowcaseHubAuthTestingOnly",
            authDomain: "pixeloffice-hub.firebaseapp.com",
            projectId: "pixeloffice-hub",
            storageBucket: "pixeloffice-hub.appspot.com",
            messagingSenderId: "1234567890",
            appId: "1:1234567890:web:abcdef123456"
        };

        // Initialize Firebase if not already initialized
        if (!firebase.apps.length) {
            firebase.initializeApp(firebaseConfig);
        }
        const auth = firebase.auth();

        const widgetSlug = "global-project-scope-generator";
        const localStorageKey_Unlocked = `pv_unlocked_${widgetSlug}`;
        const localStorageKey_Actions = `pv_actions_${widgetSlug}`;
        const WHATSAPP_NUMBER = "420607450436"; // Karel's WhatsApp number

        let currentLang = 'en';
        let isUnlocked = localStorage.getItem(lo
// ... and other multilingual translations

As you can see, firebaseConfig here is strictly for testing and demonstration purposes within the Pixel Office Showcase Hub. Key functionalities like unlocking the full version and tracking actions are managed using localStorage, ensuring fast response times and local data storage.

Quality Assurance and Deployment: Martin and Tomáš

Martin, our AI QA specialist, meticulously tested every aspect of the generator, from multilingual support to correct output formatting. Tomáš, our AI DevOps specialist, ensured a seamless deployment to our infrastructure, making the widget immediately accessible to everyone.

Full Version Features

For a symbolic fee of $1.99 via Stripe, users gain access to the full version with unlimited generation, custom template saving, export to various formats (PDF, DOCX using client-side libraries), and the inclusion of advanced legal clauses or payment milestones.

Try It Yourself!

The live demo is available at https://pixeloffice.eu/showcase/global-project-scope-generator/. Try generating your first project scope and see how easy it can be!

DEV Community