A Full-featured Application in 30-days with Claude AI ✨

Light. Speed.✨: Claude AI Development in Action (Part 1 of 2)

Welcome to the sixth installment of my Light. Speed. Series!

In previous articles, we've explored high-performance web development with Astro, a web framework for content-driven websites, used in combination with modern deployment libraries, service APIs and edge hosting strategies.

Today, I'm sharing something extraordinary: how I built a sophisticated web application in just 30 days using Claude AI as my development partner.

The Challenge: A Complete Light. Speed.✨ Application in 30 Days

What started as a simple online prompt editor in 2023 evolved into my dream project—Midjourney Prompt Manager (MPM)—a sophisticated SaaS platform for creating, managing, and sharing Midjourney AI image generation prompts. This wasn't just a feature addition; it was a complete online systems architecture requiring:

• Database Schema with 11 collections and complex relationships
• UI/UX Design System from prompt editor to project & team management to galleries
• Rich User Features from basic prompt management to advanced team collaboration
• Payment Integration with 5-tier Stripe subscription model and discount codes
• Public Gallery System with rating, filtering, and user profiles & galleries

And, of course, to make it as fast as possible, it had to use a lightweight framework. Again, I reached for some of the fastest and lightest tools for the job:

• Astro delivers the best of both worlds—lightning-fast static sites with interactive islands that hydrate only when needed (more than just for static content)
• htmx provides AJAX, CSS Transitions, and WebSockets—it completes HTML as a hypertext (this library truly has super powers)
• Alpine.js a rugged, minimal tool for composing behavior directly in markup
• Tailwind CSS - I couldn't really go without mentioning another serious tool in the arsenal not in my graphic below: utility-first styling that makes design systems scale without the CSS bloat

1. The Claude AI Development Partnership

Working with Claude AI fundamentally changed my development approach. Instead of writing every line of code myself, I became a technical architect guiding an AI development partner through complex system development.

Development Methodology

• Strategic Planning: I defined requirements and architecture
• Implementation Partnership: Claude generated code, I reviewed and refined
• Iterative Refinement: Continuous feedback loops for optimization
• Documentation: Real-time documentation as we built

Claude truly excelled at the following:

• Code Generation: Components, API endpoints, database schemas
• Problem Solving: Debugging complex editor, prompt management and integration issues
• Pattern Recognition: Consistent coding patterns across the codebase (using the correct patterns and libraries for the problem at hand)
• Documentation: Comprehensive guides for every implementation phase (including detailed debugging notes)

2. Editor Evolution: From Basic to Advanced Prompt Editor

The heart of MPM is its prompt editor. What started as a simple prompt builder from 2023 needed a complete overhaul to match modern UX expectations and handle the complexity of Midjourney Prompt Manager's intricate prompt, project and team management systems.

Editor: Enhanced Midjourney Parameters

First, Claude helped me formulate a look and feel for the application. We developed what I call "Glass Morphism"—a design language with a sophisticated color scheme much improved from the original editor styling. It's easy on the eyes (dark theme) and has an interesting animated background with many semi-transparent containers as can be seen here in the Midjourney Parameters area:

In addition to the theme, improvements to the UX were made such as adding a graphic that changes to represent the outline of the aspect ratio of the image (square here).

Editor: Custom Accordion System with Style Badges

Claude helped transform standard HTML checkboxes and radio buttons into an elegant accordion-based interface. The initial editor didn't hide the style areas, and it was a UX issue as users had a lot of scrolling to do. Here, you can see that same glass morphism design combined with the full range color palette and badges on the accordion headers that indicate the styles selected (don't need to open the accordion):

{/* Before: Basic checkboxes */}
<input type="checkbox" id="cyberpunk" name="theme" value="cyberpunk" />
<label for="cyberpunk">Cyberpunk</label>

{/* After: Custom accordion with style badges */}
<div class="accordion-section" data-category="theme">
  <button class="accordion-trigger glass-morphism" 
          onclick="toggleAccordion(this)">
    <span class="category-name">Theme Styles</span>
    <div class="style-badges">
      {selectedThemes.map(theme => (
        <span class="style-badge">{theme}</span>
      ))}
    </div>
    <svg class="accordion-icon">...</svg>
  </button>
  <div class="accordion-content">
    {/* Interactive style grid */}
  </div>
</div>

Advanced Style System Integration

Claude helped implement a sophisticated style management system that transforms the basic prompt editor into a powerful creative tool through the use of these styles, but more importantly, programming the logic for the data the user selects into a full string that can be easily copied into Midjourney with base prompt, Midjourney Parameters, and MPM styles combined into a natural-language prompt.

I've come up with a name for this, and that's the Key Prompt as seen here:

Here's the resulting image created in Midjourney using the Key Prompt from MPM:

Editor: Built-in Team and Project Management Tools

Claude helped integrate a Prompt Management panel at the top of the new in-app editor, enabling team selection, dynamic project selection and on-the-fly project creation in a sleek glass morphism interface (with a pulsing background effect to bring it to life):

The enhanced system features:

• Glass morphism design with backdrop blur and transparency effects
• Visual style badges showing selected options at the top of each accordion
• Smooth animations powered by Alpine.js for expand/collapse interactions
• Intuitive organization with 17 style categories and 1,300+ style options

The style system includes:

• Dynamic badge updates as users make selections
• Category persistence maintaining state across page refreshes
• Smart prompt generation that intelligently combines all selections
• Mobile-responsive design adapting perfectly to any screen size

3. Astro View Transitions: Seamless Gallery Navigation

One of Astro's most powerful features is View Transitions, which create smooth, app-like navigation without full page reloads. Claude helped implement these transitions specifically for the gallery system, creating an exceptionally polished user experience.

Midjourney Prompt Detail Pages

When users click from the gallery to a prompt detail page, the transition focuses on the image, creating a zoom-like effect that maintains visual continuity:

Gallery-to-Detail Transition Implementation

{/* Gallery card with transition names */}
<a href={`/public/prompts/${prompt.id}`} 
   transition:name={`prompt-${prompt.id}`}
   class="gallery-card">
  <img transition:name={`image-${prompt.id}`} 
       src={getOptimizedImageUrl(prompt.thumbnail)}
       alt={prompt.title}
       class="gallery-image" />
  <div transition:name={`details-${prompt.id}`} 
       class="prompt-info">
    <h3>{prompt.title}</h3>
    <p>{prompt.user.name}</p>
  </div>
</a>

4. Development Time: 4 Months Compressed into 30 Days

What would normally be a 4-month project was compressed into 30 days due to several key factors. Claude AI was by far the biggest contributor, primarily due to the AI's ability to add troubleshooting code in place and iterate through different solutions much faster than a human developer could. This was multiplied by following a proven tool stack that minimized architectural complexity.

Finally, there was the human element. I had been planning this project for months and prepared general architecture notes, example code, had a version 1.0 editor built, and pre-produced images and marketing content in advance. I worked every day of those 30 days, with several sessions burning the midnight oil.

The 30-day development cycle was organized into 12 distinct phases, each documented and completed with Claude's assistance:

Phase 1-3: Foundation (Days 1-7)

Database Schema & Authentication

• Created the entire project database schema
• Implemented Google OAuth 2.0 integration
• Created user profile system with portfolio features

Phase 4-6: Core Features (Days 8-15)

Prompt Management & Image System

• Built dual editor system (free homepage + premium app)
• Implemented prompt management pages with multi-image S3 upload and Amazon CloudFront integration
• Created responsive gallery system with Astro View Transitions & 5-star ratings

Phase 7-9: Advanced Features (Days 16-23)

Team Collaboration & Search

• Team management with activity tracking
• Advanced search with Fuse.js implementation
• Project organization with hashtag support and search filters

Phase 10-12: Polish & Launch Prep (Days 24-30)

Payment Integration & Performance

• Stripe subscription system with usage tracking
• Integrated dub.co shortlinks with social meta tags & UTM tracking
• Performance optimization achieving 83/94/100/100 Lighthouse scores

5. What This Means for Your Business

AI tools like Claude aren't perfect yet—just like Midjourney's AI images—but they're remarkably effective. Smart developers will leverage these tools to save you both time and money.

Hire AI-Savvy Developers!

Claude helped design this complex project, but translating requirements into architecture and UX requires skilled professionals. However, Claude Opus 4 excelled at generating TypeScript types, defining PocketBase collection rules, and creating data access patterns—saving me dozens of hours throughout development.

Budget Impact: 2-4x Productivity Gains

Claude Opus 4 has become essential in my toolkit. I estimate 2x output on this project compared to hand-coding (up to 4x in some areas). That's substantial productivity gain that translates to competitive client pricing.

The Reality Check—I'll Be Real

While I was amazed daily by Claude's capabilities, there were unnecessary hours spent on poorly implemented code. Sometimes it would create duplicate systems or modify components I didn't request.

I felt like a babysitter watching a brilliant but impulsive child. It would randomly switch contexts and troubleshoot on the wrong branch (whoops!).

But I'm still immensely impressed. Having worked with AI since 2023, Opus 4 and Sonnet 4 are Next Level.

The game-changer? Comprehensive project documentation specifically for the LLM. This is literally my business (I built a prompt builder!), so I know firsthand how critical good inputs are. Now that Opus 4 can work in terminal and Sonnet 4 can review entire repositories, the workflow is streamlined.

Bottom line: AI needs guidance, but skilled developers leveraging AI will become extraordinarily productive. We're all learning, but the future is incredibly bright.

Summary

Building Midjourney Prompt Manager in 30 days with Claude AI demonstrated the transformative power of human-AI collaboration. This covered the development partnership, editor evolution, and remarkable development velocity achieved.

Key Highlights from Part 1:

The Partnership Model:

• Claude AI served as a sophisticated development partner, not just a code generator
• Strategic planning by humans, implementation partnership with AI
• Real-time documentation and continuous feedback loops

Editor Evolution:

• Transformed a basic 2023 prompt builder into a modern, feature-rich editor
• Glass morphism design system with great UX irmprovements like custom accordions
• 17 style categories with 1,343+ options elegantly organized
• Integrated team and project selection while editing prompts (Prompt Management)

Development Acceleration:

• Compressed 4 months of work into 30 days
• 12 development phases systematically executed
• Maintained high code quality while achieving up to 4x productivity

Technical Foundation:

• Astro + htmx + Alpine.js + Tailwind CSS for lightning-fast performance
• Sophisticated View Transitions for app-like user experience
• PocketBase backend with 11 collections (powerful open source)
• AWS S3 + Amazon CloudFront for image optimization

What's in the next Light. Speed.✨ article?

In part two of this article, I dive deep into:

Advanced Features & Implementation Details:

• The complete image management system with AWS S3 and Amazon CloudFront
• Real-time search implementation and drop-down filtering with Fuse.js
• Stripe subscription system with 5 tiers and webhook handling
• Team collaboration features and activity tracking

Production Performance & Metrics:

• How I achieved 79/96/100/100 Lighthouse scores (still optimizing)
• Deployment architecture across Netlify, PocketHost, and AWS
• Performance optimization strategies that deliver sub-200ms response times
• Real-world usage metrics and scalability considerations (migration to Supabase)

Lessons Learned & Best Practices:

• What Claude AI excels at (and where human expertise remains critical)
• Development velocity metrics showing massive output improvement
• Code quality patterns that emerged from AI collaboration
• Documentation strategies for AI-assisted development

Don't miss the technical deep dive that shows exactly how I built production-ready features with Claude AI as a development partner!

Please visit the live Midjourney Prompt Manager, feel free to reach out using my contact form, and follow me on LinkedIn and X/Twitter.

---

About the Light. Speed.✨ Series: This series documents real-world experiences building fast websites and applications with AI. Each article shares practical insights, tools & techniques, and lessons learned from shipping actual products that serve real users.

Connect with me: Follow my journey on LinkedIn and X, or reach out through my contact form to discuss your own AI-assisted development projects.