Skip to content

PROJECT_STRUCTURE.md

Latest commit

 

History

History
380 lines (312 loc) · 10.9 KB

PROJECT_STRUCTURE.md

File metadata and controls

380 lines (312 loc) · 10.9 KB

Project Structure Documentation

This document provides a detailed overview of the Rapid Development Platform Prototype project structure, explaining the purpose and organization of each directory and file.

📁 Root Directory

rapid-dev-platform-prototype/
├── prototypes/                 # Main prototype files
├── openspec/                   # OpenSpec documentation
├── LICENSE                     # MIT License
├── README.md                   # English documentation
├── README_CN.md               # Chinese documentation
├── CONTRIBUTING.md            # Contribution guidelines
└── PROJECT_STRUCTURE.md       # This file

🎨 Prototypes Directory

The prototypes/ directory contains all the HTML prototype files and their associated assets.

Main Structure

prototypes/
├── css/                       # Shared CSS styles
│   └── style.css             # Unified styling system
├── js/                       # JavaScript utilities
│   └── breadcrumb.js         # Breadcrumb navigation manager
├── images/                   # Image assets
│   └── username.png          # User avatar image
├── dashboard.html            # Main dashboard page
├── projects.html             # Project management page
├── designer.html             # Visual designer page
├── form-designer.html        # Form builder page
├── model-designer.html       # Data model designer page
├── data-sources.html         # Data source management page
├── data-models.html          # Data model management page
├── api-management.html       # API management page
├── publish.html              # Application publishing page
├── versions.html             # Version management page
└── settings.html             # System settings page

CSS Directory (prototypes/css/)

Purpose: Contains shared CSS styles used across all prototype pages.

style.css

  • Purpose: Unified styling system for all prototype pages
  • Contents:
    • CSS custom properties (variables) for theming
    • Global styles and resets
    • Component styles (buttons, cards, forms, etc.)
    • Layout styles (grid, flexbox, etc.)
    • Responsive design breakpoints
    • Animation and transition styles
    • Sidebar brand area styles
    • Breadcrumb navigation styles
    • Navbar styles
    • Responsive design media queries

Key Features:

  • Centralized styling system
  • Consistent design tokens
  • Responsive design support
  • Component-based architecture
  • Cross-browser compatibility

JavaScript Directory (prototypes/js/)

Purpose: Contains JavaScript utilities and shared functionality.

breadcrumb.js

  • Purpose: Breadcrumb navigation manager
  • Contents:
    • BreadcrumbManager class
    • Page title mapping
    • Dynamic breadcrumb generation
    • Navigation state management
    • Cross-page navigation support

Key Features:

  • Automatic breadcrumb generation
  • Page title mapping
  • Dynamic navigation updates
  • Cross-page consistency
  • Error handling

Images Directory (prototypes/images/)

Purpose: Contains image assets used across the prototype.

username.png

  • Purpose: User avatar image
  • Specifications:
    • Size: 32x32 pixels
    • Format: PNG
    • Background: Transparent
    • Usage: User profile pictures in navigation

Note: This is a placeholder file. Replace with actual user avatar image.

HTML Pages

Each HTML page represents a different functional area of the rapid development platform.

dashboard.html

  • Purpose: Main dashboard and overview page
  • Features:
    • Project overview cards
    • Recent activity feed
    • Quick access buttons
    • Statistics and metrics
    • Responsive layout

projects.html

  • Purpose: Project management interface
  • Features:
    • Project list and grid view
    • Project creation and editing
    • Search and filtering
    • Project status management
    • Team collaboration tools

designer.html

  • Purpose: Visual interface designer
  • Features:
    • Drag-and-drop interface
    • Component library
    • Property panel
    • Canvas area
    • Toolbar and controls

form-designer.html

  • Purpose: Advanced form builder
  • Features:
    • Form component library
    • Logic designer
    • Validation rules
    • Event handling
    • Real-time preview

model-designer.html

  • Purpose: Data model designer
  • Features:
    • Page settings
    • Model design with field management
    • Data settings with flow designer
    • Model associations
    • CRUD operations

data-sources.html

  • Purpose: Data source management
  • Features:
    • Data source connections
    • Connection testing
    • Data source configuration
    • Authentication management
    • Data preview

data-models.html

  • Purpose: Data model management
  • Features:
    • Model visualization
    • Field management
    • Relationship mapping
    • Model validation
    • Export/import functionality

api-management.html

  • Purpose: API design and management
  • Features:
    • API endpoint design
    • Request/response testing
    • API documentation
    • Authentication setup
    • Rate limiting configuration

publish.html

  • Purpose: Application publishing
  • Features:
    • Deployment configuration
    • Environment management
    • Build and deployment process
    • Release management
    • Rollback capabilities

versions.html

  • Purpose: Version control and management
  • Features:
    • Version history
    • Branch management
    • Merge and conflict resolution
    • Release notes
    • Version comparison

settings.html

  • Purpose: System configuration
  • Features:
    • General settings
    • Notification settings
    • Integration settings
    • Role management
    • Advanced configuration
    • Backup and restore

📚 OpenSpec Directory

The openspec/ directory contains OpenSpec documentation and change management files.

Structure

openspec/
├── project.md                # Project specifications
├── AGENTS.md                 # AI agent workflow guide
├── proposals/                # Change proposal templates
│   └── template.md          # Standard proposal template
└── changes/                  # Change documentation
    ├── rapid-dev-platform-prototype/
    ├── complete-remaining-prototypes/
    ├── enhance-settings-sections/
    ├── redesign-form-designer/
    ├── redesign-model-designer/
    ├── enhance-data-flow-designer/
    ├── optimize-flow-designer-ui/
    ├── enhance-data-settings-panel/
    ├── implement-model-list-modal/
    ├── implement-form-design-interaction/
    ├── redesign-form-designer-layout/
    ├── refine-form-designer-interface/
    ├── finalize-form-designer-interface/
    ├── optimize-dashboard-layout/
    ├── move-title-to-sidebar-top/
    ├── apply-layout-changes-to-prototypes/
    ├── apply-layout-to-remaining-prototypes/
    └── replace-avatar-with-local-image/

Key Files

project.md

  • Purpose: Project specifications and requirements
  • Contents:
    • Project overview
    • Technology stack
    • Development conventions
    • Deployment requirements

AGENTS.md

  • Purpose: AI agent workflow guide
  • Contents:
    • Agent collaboration principles
    • Workflow stages
    • Communication norms
    • Best practices

proposals/template.md

  • Purpose: Standard change proposal template
  • Contents:
    • Proposal structure
    • Required sections
    • Format guidelines
    • Review process

changes/

  • Purpose: Change documentation and history
  • Contents:
    • Individual change proposals
    • Task lists
    • Project summaries
    • Implementation details

🔧 Configuration Files

LICENSE

  • Purpose: MIT License file
  • Contents: Standard MIT license text
  • Usage: Defines usage rights and permissions

README.md

  • Purpose: English project documentation
  • Contents:
    • Project overview
    • Installation instructions
    • Usage guidelines
    • Contribution information

README_CN.md

  • Purpose: Chinese project documentation
  • Contents:
    • Chinese version of project documentation
    • Localized instructions
    • Chinese community guidelines

CONTRIBUTING.md

  • Purpose: Contribution guidelines
  • Contents:
    • How to contribute
    • Coding standards
    • Pull request process
    • Issue reporting

PROJECT_STRUCTURE.md

  • Purpose: This file - project structure documentation
  • Contents:
    • Detailed directory explanations
    • File purposes and contents
    • Architecture overview

🏗️ Architecture Overview

Design Principles

  1. Modularity: Each page is self-contained with shared resources
  2. Consistency: Unified styling and behavior across all pages
  3. Responsiveness: All pages work on desktop, tablet, and mobile
  4. Accessibility: Built with accessibility best practices
  5. Maintainability: Clear structure and documentation

Technology Stack

  • Frontend: HTML5, CSS3, JavaScript ES6+
  • Styling: Tailwind CSS, Custom CSS
  • Icons: FontAwesome
  • Architecture: Component-based, modular design
  • Documentation: Markdown, OpenSpec methodology

File Organization

  • Separation of Concerns: HTML, CSS, and JS are separated
  • Shared Resources: Common styles and scripts are centralized
  • Page-Specific: Each page can have its own specific styles and scripts
  • Documentation: Comprehensive documentation for all components

🚀 Getting Started

Development Setup

  1. Clone the repository
  2. Navigate to the prototypes directory
  3. Start a local server
  4. Open dashboard.html in your browser

Customization

  1. Modify shared styles in prototypes/css/style.css
  2. Update page-specific content in individual HTML files
  3. Add new functionality in prototypes/js/
  4. Replace placeholder images in prototypes/images/

Adding New Pages

  1. Create new HTML file in prototypes/ directory
  2. Follow existing structure and naming conventions
  3. Update navigation in all existing pages
  4. Add page-specific styles if needed
  5. Update documentation

📝 Maintenance

Regular Tasks

  • Update dependencies: Keep external libraries current
  • Test compatibility: Ensure cross-browser compatibility
  • Review documentation: Keep documentation up-to-date
  • Performance optimization: Monitor and improve performance
  • Security updates: Apply security patches as needed

Version Control

  • Git workflow: Use feature branches for changes
  • Commit messages: Use clear, descriptive commit messages
  • Pull requests: Review all changes before merging
  • Documentation: Update documentation with each change

This structure provides a solid foundation for the rapid development platform prototype, with clear organization, comprehensive documentation, and maintainable code architecture.