feat(backend): common file struct and backend, frontend code generate…

… prompt (#67)

Co-authored-by: Jackson Chen <[email protected]>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

backend/src/build-system/node/backend-code-generate/prompt.ts

@@ -0,0 +1,60 @@
+export const generateBackendCodePrompt = (
+  projectName: string,
+  sitemapDoc: string,
+  DatamapDoc: string,
+  currentFile: string,
+  dependencyFile: string,
+): string => {
+  return `You are an expert backend developer. Your task is to generate a complete backend codebase within a single file for a project named "AwesomeApp". The code should be written using the Express framework and should include all necessary functionalities to cover essential backend operations while ensuring scalability and maintainability.
+
+### Based on the following input:
+
+- **Project Name:** ${projectName}
+- **Sitemap Documentation:** ${sitemapDoc}
+- **Data Analysis Document:** ${DatamapDoc}
+
+### Instructions and Rules:
+
+**Include:**
+1. **Server Setup:**
+   - Initialize the server using the Express framework.
+   - Configure middleware for JSON parsing and CORS.
+
+2. **Route Definitions:**
+   - Define RESTful API endpoints based on the sitemap documentation.
+   - Implement at least two example routes (e.g., GET /api/users, POST /api/users).
+
+3. Include all controllers, model, and service in one file.
+
+4. **Error Handling:**
+   - Implement basic error handling middleware.
+   - Ensure that meaningful error messages are returned for invalid requests.
+
+5. **Comments and Documentation:**
+   - Add comments explaining the purpose of each section and major code blocks.
+   - Ensure the code is readable and follows best practices.
+
+**Do Not Include:**
+- Database connections or ORM integrations.
+- External service integrations.
+- Complex business logic beyond basic CRUD operations.
+
+**File Naming and Structure:**
+- Since all code is to be included in a single file, organize the code with clear sections using comments.
+- Follow consistent coding conventions and formatting as per the Express standards.
+
+### Ask Yourself:
+1. Are you covering all the necessary routes based on the sitemap documentation? If not, add the missing routes.
+2. Are the controller functions adequately handling the requests and responses? If not, enhance them.
+3. Is the error handling comprehensive enough for basic testing? If not, improve it.
+4. Are the comments clear and descriptive to aid understanding and maintenance?
+
+### Output Format:
+
+Provide the backend code within markdown code blocks as follows:
+
+\`\`\`javascript
+\`\`\`
+  
+    `;
+};

backend/src/build-system/node/frontend-code-generate/prompt.ts

@@ -0,0 +1,48 @@
+export const generateFrontEndCodePrompt = (
+  sitemapDoc: string,
+  uxDatamapDoc: string,
+  currentFile: string,
+  dependencyFile: string,
+): string => {
+  return `You are an expert frontend developer. 
+  Your task is to generate complete and production-ready React or Next.js frontend code based on the provided inputs.
+  The code should include all necessary files, folders, and logic to cover UI components, API integration, routing, and state management while ensuring scalability and maintainability.
+  
+  Based on following inputs:
+
+   - Sitemap Documentation: ${sitemapDoc}
+   - UX Datamap Documentation: ${uxDatamapDoc}
+   - Current File Context: ${currentFile}
+   - Dependency File: ${dependencyFile}
+
+    ### Instructions and Rules:
+        File Requirements:
+
+        The generated file must fully implement the requirements defined in the sitemap and UX datamap documents.
+        Include all necessary imports, state management, and interactions to ensure functionality (no placeholders import).
+        If applicable, integrate hooks, APIs, or context from the provided dependencies.
+
+    Code Standards:
+
+        Use functional components and React hooks.
+        Adhere to any styling guidelines defined in the dependency file (e.g., Tailwind CSS or CSS Modules).
+        Use descriptive and meaningful names for variables, functions, and components.
+        Ensure accessibility best practices, including aria attributes.
+
+    Comments:
+
+        Add comments describing the purpose of each major code block or function.
+        Include placeholders for any additional features or data-fetching logic that may need integration later.
+
+    Error Handling:
+
+        Handle potential edge cases, such as loading, error states, and empty data.
+
+    Output Completeness:
+
+        The generated file must be functional and complete, ready to be added directly to the project.
+
+        This final result must be 100% complete. Will be directly use in the production
+
+  `;
+};

backend/src/build-system/node/frontend-file-structure/prompt.ts

@@ -115,4 +115,122 @@ Output Format:
     Return only the JSON structure (no explanations, no additional comments). This JSON will be used directly in the application.
     `;
   },
+  generateCommonFileStructurePrompt: (
+    projectName: string,
+    sitemapDoc: string,
+    dataAnalysisDoc: string,
+    framework: string,
+    projectPart: string,
+  ): string => {
+    // Define role and specific instructions based on project part
+    let roleDescription = '';
+    let includeSections = '';
+    let excludeSections = '';
+    let fileNamingGuidelines = '';
+
+    switch (projectPart) {
+      case 'frontend':
+        roleDescription = 'an expert frontend developer';
+        includeSections = `
+          Folder Structure:
+            components: Reusable UI elements grouped by category (e.g., common, layout, specific).
+            contexts: Global state management (e.g., auth, theme, player).
+            hooks: Custom hooks for data fetching and state management.
+            pages: Route-specific views (e.g., Home, Search, Playlist).
+            utils: Utility functions (e.g., constants, helpers, validators).
+            api: Organized API logic (e.g., auth, music, user).
+            router.ts: Central routing configuration.
+            index.ts: Application entry point.
+
+          Files:
+            Include placeholder files in each folder to illustrate their purpose.
+            Add example filenames for components, hooks, APIs, etc.
+        `;
+        excludeSections = `
+          Do Not Include:
+            Asset folders (e.g., images, icons, fonts).
+            Test folders or files.
+            Service folders unrelated to API logic.
+        `;
+        fileNamingGuidelines = `
+          File Naming Guidelines:
+            Use meaningful and descriptive file names.
+            For components, include an index.tsx file in each folder to simplify imports.
+            Each component should have its own folder named after the component (e.g., Button/).
+            Use index.tsx as the main file inside the component folder.
+            Component-specific styles must be in index.css within the same folder as the component.
+        `;
+        break;
+
+      case 'backend':
+        roleDescription = 'an expert backend developer';
+        includeSections = `
+          Folder Structure:
+              controllers: Handle incoming requests and return responses.
+              models: Define data schemas and interact with the database.
+              routes: Define API endpoints and route requests to controllers.
+              services: Business logic and interaction with external services.
+              middleware: Custom middleware for request processing (e.g., authentication, logging).
+              utils: Utility functions and helpers.
+              config: Configuration files (e.g., database connection, environment variables).
+              tests: Unit and integration tests.
+              app.js/server.js: Application entry point.
+        `;
+        excludeSections = `
+          Do Not Include:
+              Frontend-specific folders (e.g., components, contexts).
+              Asset folders (e.g., images, icons, fonts).
+        `;
+        fileNamingGuidelines = `
+          File Naming Guidelines:
+              Use meaningful and descriptive file names.
+              Controllers should be named after their resource (e.g., userController.js).
+              Models should represent data entities (e.g., User.js).
+              Routes should be grouped by resource (e.g., userRoutes.js).
+              Use consistent naming conventions (e.g., camelCase or snake_case) throughout the project.
+        `;
+        break;
+
+      default:
+        throw new Error('Invalid project part specified.');
+    }
+
+    return `You are ${roleDescription}. Your task is to generate a complete folder and file structure for the ${projectPart} of a project named "${projectName}". Include all necessary files and folders to cover the essential aspects while ensuring scalability and maintainability.
+    
+  Based on the following input:
+  
+   - Project name: ${projectName}
+   - Sitemap Documentation: ${sitemapDoc}
+   - Data Analysis Doc: ${dataAnalysisDoc}
+  
+  ### Instructions and Rules:
+  
+  Include:
+  ${includeSections}
+  
+  ${fileNamingGuidelines}
+  
+  ${excludeSections}
+  
+  File Comments:
+      Include comments describing the purpose of each file or folder to improve readability.
+  
+  Ask yourself:
+      1. Are you considering all the cases based on the sitemap doc? If not, add new folder or file.
+      2. Are you considering all the components based on the sitemap doc? If not, add new folder or file.
+      3. Are you considering all the hooks/services based on the sitemap doc? If not, add new folder or file.
+      4. Are you considering all the APIs/routes based on the sitemap doc? If not, add new folder or file.
+      5. Are you considering all the pages/controllers based on the sitemap doc? If not, add new folder or file.
+  
+  This final result must be 100% complete and ready for direct use in production.
+  
+  Output Format:
+
+      Start with: "\`\`\`FolderStructure"
+      Tree format:
+          Include folder names with placeholder files inside.
+          Add comments to describe the purpose of each file/folder.
+      End with: "\`\`\`"
+  `;
+  },
 };