Complete Prompt Manager Application Development

Summary

Developed a comprehensive Next.js-based prompt management application with full CRUD operations, import/export capabilities, variable templating, and modern UI components for managing AI prompts with advanced features.

Why Care

This application provides a complete solution for teams working with AI prompts, enabling efficient creation, organization, and iteration of prompt templates. The modular architecture and export/import functionality make it suitable for collaborative workflows and prompt versioning, while the variable templating system supports dynamic prompt generation for different use cases.

Implementation

Changes Made

Project Structure

text 
prompt-manager/
├── src/
│   ├── app/
│   │   ├── layout.js (17 lines) - Root layout with metadata
│   │   ├── page.js (21 lines) - Main page with splash screen integration
│   │   ├── globals.css (144 lines) - Tailwind CSS styling
│   │   └── favicon.ico (31KB) - Application icon
│   └── components/
│       ├── PromptManager.js (265 lines) - Main application component
│       ├── CreatePromptModal.js (249 lines) - Prompt creation interface
│       ├── EditPromptModal.js (265 lines) - Prompt editing interface
│       ├── PromptCard.js (169 lines) - Individual prompt display
│       ├── CustomPropertiesSection.js (138 lines) - Advanced properties management
│       ├── ExportModal.js (580 lines) - Multi-format export functionality
│       ├── ImportModal.js (386 lines) - Markdown file import system
│       ├── DeleteConfirmModal.js (55 lines) - Confirmation dialogs
│       ├── SearchBar.js (20 lines) - Search functionality
│       ├── StatisticsSection.js (59 lines) - Usage analytics display
│       ├── ActionHeader.js (40 lines) - Action buttons and controls
│       ├── Navigation.js (18 lines) - Navigation component
│       └── SplashScreen.js (144 lines) - Welcome screen with animations
├── package.json (27 lines) - Dependencies and scripts
├── next.config.mjs (5 lines) - Next.js configuration
├── postcss.config.mjs (6 lines) - PostCSS configuration
├── eslint.config.mjs (15 lines) - ESLint configuration
├── jsconfig.json (8 lines) - JavaScript configuration
└── .gitignore (42 lines) - Git ignore patterns

Dependencies Added

  • Core Framework: Next.js 15.4.4, React 19.1.0, React-DOM 19.1.0
  • UI Components: Lucide React 0.525.0 (icon library)
  • Markdown Editor: @uiw/react-md-editor 4.0.8 (rich text editing)
  • File Processing: jszip 3.10.1 (ZIP file creation for exports)
  • Styling: Tailwind CSS 4 (utility-first CSS framework)
  • Development: ESLint 9, PostCSS 4

Configuration Files

  • next.config.mjs: Next.js configuration with default settings
  • postcss.config.mjs: PostCSS configuration for Tailwind CSS
  • eslint.config.mjs: ESLint configuration with Next.js rules
  • jsconfig.json: JavaScript path mapping and module resolution
  • .gitignore: Comprehensive ignore patterns for Next.js projects

Technical Details

Core Application Architecture

The application follows a component-based architecture with the main PromptManager component orchestrating all functionality:
javascript 
// src/components/PromptManager.js - Main state management
const [prompts, setPrompts] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
const [selectedPrompt, setSelectedPrompt] = useState(null);

Variable Templating System

Implemented automatic variable extraction from prompt content using regex patterns:
javascript 
// Variable extraction from content
const extractVariables = (content) => {
  const variableRegex = /\{\{([^}]+)\}\}/g;
  const matches = [...content.matchAll(variableRegex)];
  return [...new Set(matches.map(match => match[1]))];
};

Advanced Export Functionality

Multi-format export system supporting JSON, Markdown, and CSV with ZIP bundling:
javascript 
// src/components/ExportModal.js - Export format handling
const exportToJSON = (prompt) => {
  const exportData = {
    name: prompt.name,
    description: prompt.description,
    content: prompt.content,
    variables: prompt.variables,
    category: prompt.category,
    ...(includeMetadata && {
      createdAt: prompt.createdAt,
      lastUsed: prompt.lastUsed,
      usageCount: prompt.usageCount
    })
  };
  return JSON.stringify(exportData, null, 2);
};

Markdown Import System

Intelligent markdown file parsing with automatic metadata extraction:
javascript 
// src/components/ImportModal.js - Markdown parsing
const parseMarkdownFile = (content, filename) => {
  const titleMatch = content.match(/^#\s+(.+)$/m);
  const title = titleMatch ? titleMatch[1].trim() : filename.replace(/\.(md|markdown)$/i, '');
  
  const variableRegex = /\{\{([^}]+)\}\}/g;
  const matches = [...content.matchAll(variableRegex)];
  const variables = [...new Set(matches.map(match => match[1].trim()))];
  
  return {
    name: title,
    description: description,
    content: content,
    variables: variables,
    category: 'Custom'
  };
};

Custom Properties System

Advanced feature for generating structured data from prompts:
javascript 
// src/components/CustomPropertiesSection.js - Custom properties
const generateCustomPropertiesPrompt = (properties) => {
  if (!properties || properties.length === 0) {
    return '';
  }
  
  const propertiesList = properties.map(prop => `"${prop}": "value"`).join(', ');
  return `\n\nPlease return the following information as a JSON object at the end of your response:\n{\n  ${propertiesList}\n}`;
};

Responsive UI Design

Modern, responsive interface using Tailwind CSS with consistent design patterns:
css 
/* src/app/globals.css - Global styling */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom animations and transitions */
.animate-fadeOut {
  animation: fadeOut 1s ease-in-out forwards;
}

.animate-slideInDown {
  animation: slideInDown 0.6s ease-out;
}

Integration Points

Component Communication

  • State Management: Centralized state in PromptManager with prop drilling to child components
  • Event Handling: Consistent event handling patterns across all modal components
  • Data Flow: Unidirectional data flow from parent to child components with callback functions

File System Integration

  • Import System: File API integration for markdown file processing
  • Export System: Blob API and JSZip for multi-format file generation
  • Download Handling: Browser-native download functionality with proper MIME types

External Dependencies

  • Markdown Editor: @uiw/react-md-editor integration for rich text editing
  • Icon System: Lucide React icons for consistent visual language
  • ZIP Creation: JSZip library for bundling multiple export files

Documentation

Component API Reference

  • PromptManager: Main application component with full CRUD operations
  • CreatePromptModal: Form-based prompt creation with validation
  • EditPromptModal: In-place prompt editing with variable management
  • ExportModal: Multi-format export with metadata options
  • ImportModal: Markdown file import with automatic parsing
  • CustomPropertiesSection: Advanced properties for structured output

Usage Examples

javascript 
// Creating a new prompt
const newPrompt = {
  name: 'Customer Analysis',
  description: 'Analyze customer data for insights',
  content: 'Analyze {{customer_data}} for {{customer_name}}',
  variables: ['customer_data', 'customer_name'],
  category: 'Analysis'
};

// Exporting prompts
const exportData = prompts.map(prompt => exportToJSON(prompt));
const zip = await createZipArchive(exportData);

Configuration Options

  • Export Formats: JSON, Markdown, CSV with optional metadata
  • Import Formats: Markdown files with automatic variable detection
  • Custom Properties: Structured data generation for LLM responses
  • Search Functionality: Real-time filtering across name, description, and category

Performance Considerations

  • Lazy Loading: Modal components loaded on-demand
  • Efficient Rendering: React.memo for performance optimization
  • File Processing: Asynchronous file operations with progress indicators
  • Memory Management: Proper cleanup of file handles and event listeners