Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(backend): common file struct and backend, frontend code generate prompt #67

Merged
merged 10 commits into from
Dec 13, 2024
60 changes: 60 additions & 0 deletions backend/src/build-system/node/backend-code-generate/prompt.ts
Original file line number Diff line number Diff line change
@@ -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
\`\`\`

`;
};
48 changes: 48 additions & 0 deletions backend/src/build-system/node/frontend-code-generate/prompt.ts
Original file line number Diff line number Diff line change
@@ -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

`;
};
118 changes: 118 additions & 0 deletions backend/src/build-system/node/frontend-file-structure/prompt.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: "\`\`\`"
`;
},
};
Loading
Loading