Project Overview

Contributed to developing a sophisticated prototyping platform that enables product managers to rapidly transform ideas into interactive user interfaces. Participated in a major frontend rebuild migrating from React to Gleam with the Lustre framework, adopting the Elm architecture (Model-View-Update) which dramatically improved canvas performance and state management. Built a complete token-based billing system with Stripe integration, implementing subscription tiers and usage tracking for sustainable platform monetization. Implemented GitHub integration enabling users to export generated prototype code directly to repositories for seamless handoff to development teams. Focused on building core canvas functionality that accelerates the design process, implementing drag-and-drop tools that allow quick iteration. Created essential features including copy/paste functionality, alt-drag operations, and annotation tools that streamline the feedback loop from concept to prototype. Helped build the style guide system enabling users to maintain design consistency while rapidly experimenting with different visual approaches. Delivered numerous workflow optimizations and added new canvas components like tables that reduce time from idea to testable prototype. Collaborated with the team on code reviews and AI feature integration that further accelerates the prototyping process. The project strengthened expertise in functional programming with Gleam, the Elm architecture, payment systems integration, and building complex interactive applications focused on developer and designer productivity.

Key Features

Built interactive annotation tools for design feedback

Implemented copy/paste and alt-drag functionality for improved workflow

Developed token-based billing system with Stripe subscriptions and usage tracking

Created GitHub integration for exporting generated prototype code to repositories

Created style customization system for colors and typography

Added new canvas components including tables and other UI elements

Wrote comprehensive end-to-end tests ensuring platform reliability

Collaborated on AI feature development

Delivered quality of life improvements across the platform

Challenges Solved

Building complex canvas interactions with smooth copy/paste and drag operations

Implementing scalable backend systems for resource management

Creating intuitive annotation and feedback systems

Developing a flexible style guide that integrates with the generation system

Optimizing canvas performance with multiple interactive components

Ensuring seamless user experience across complex design workflows

Technologies Used

Gleam & Lustre

Rebuilt the frontend using Gleam with the Lustre framework, implementing the Model-View-Update (Elm) architecture. Developed type-safe interactive components for the canvas system including copy/paste handlers, drag operations, and dynamic UI elements using functional programming patterns.

Canvas Development

Implemented sophisticated canvas features including component manipulation, copy/paste functionality, alt-drag operations, and interactive overlays for annotations.

Backend Development

Developed backend systems for resource management using PostgreSQL and Drizzle ORM, implementing efficient tracking and data management.

Component Architecture

Built reusable canvas components including tables and other UI elements, focusing on performance optimization and smooth user interactions within the design environment.

Style Guide Implementation

Contributed to the creation of a flexible style system allowing users to define and apply custom colors and typography, integrating seamlessly with the existing design workflows.

End-to-End Testing

Implemented comprehensive E2E tests covering critical platform functionality including canvas operations, user authentication, billing workflows, and GitHub integration. Tests ensure reliability across releases and prevent regressions in complex interactive features.

Development Process

Canvas Functionality Enhancement & Gleam Migration

Participated in rebuilding the frontend from React to Gleam using the Lustre framework and Elm architecture (Model-View-Update). This migration dramatically improved canvas performance through immutable state management and predictable updates. Implemented copy/paste operations, alt-drag functionality, and new interactive components like tables with the functional programming paradigm.

Annotation Tool Development

Helped build a sophisticated system allowing users to add feedback and annotations. This feature bridges the gap between visual design and requirements, enhancing collaboration and iteration.

Token System & Stripe Integration

Built a complete token-based billing system with Stripe integration, implementing subscription tiers, usage tracking, and automated token allocation. Developed webhook handlers for subscription lifecycle events and created the infrastructure for metered billing based on platform usage.

Style Guide System Creation

Contributed to a comprehensive style guide feature allowing users to define custom colors and typography that integrate with their designs, ensuring brand consistency.

Quality of Life Improvements

Identified and implemented numerous UX enhancements based on user feedback and testing, improving overall platform usability and reducing friction in common workflows.

Code Review & Integration Support

Participated in code reviews for AI-related features and successfully integrated new functionality into existing tools, ensuring smooth collaboration with the AI development team.

End-to-End Testing Implementation

Wrote comprehensive end-to-end tests covering critical user workflows including canvas interactions, billing flows, and authentication. Ensured platform reliability and prevented regressions during rapid feature development.

Arkhet