The method
Use this prompt in ChatGPT after defining your project’s overall structure and desired component functionality. Iterate on the generated code, providing feedback to refine the component. Ideal for speeding up UI development and ensuring consistency.
The prompts
Prompt 1
You are an expert React developer with a deep understanding of best practices and UI design principles. I need you to generate a React component for a [Describe the section of the application, e.g., user profile page]. The component should [Describe desired functionality, e.g., display user information and allow editing]. Consider the following requirements:
* **Data Fetching:** Assume user data is available via a function `getUserData(userId)`. This function returns a promise that resolves to a user object with properties like `name`, `email`, and `profilePicture`. The user ID is currently hardcoded as `123`.
* **State Management:** Use the `useState` hook to manage local state for editing mode and potentially for any form input fields.
* **UI Elements:** Use Material UI components for styling (install it if the project doesn't have it). Include elements like `TextField`, `Button`, `Avatar`, and `Grid`. Adhere to Material UI's best practices for layout and responsiveness.
* **Error Handling:** Implement basic error handling for data fetching using a `try...catch` block and display an error message if `getUserData` fails.
* **Accessibility:** Ensure the component is accessible by using appropriate ARIA attributes and semantic HTML.
Provide the complete React component code, including imports, component definition, and any necessary helper functions. After you have provided the code, please include explanation comments and describe how to integrate the component into the main application structure. What prop types are expected? How can a developer ensure the userId is dynamically updated depending on the user who is logged in?
* **Data Fetching:** Assume user data is available via a function `getUserData(userId)`. This function returns a promise that resolves to a user object with properties like `name`, `email`, and `profilePicture`. The user ID is currently hardcoded as `123`.
* **State Management:** Use the `useState` hook to manage local state for editing mode and potentially for any form input fields.
* **UI Elements:** Use Material UI components for styling (install it if the project doesn't have it). Include elements like `TextField`, `Button`, `Avatar`, and `Grid`. Adhere to Material UI's best practices for layout and responsiveness.
* **Error Handling:** Implement basic error handling for data fetching using a `try...catch` block and display an error message if `getUserData` fails.
* **Accessibility:** Ensure the component is accessible by using appropriate ARIA attributes and semantic HTML.
Provide the complete React component code, including imports, component definition, and any necessary helper functions. After you have provided the code, please include explanation comments and describe how to integrate the component into the main application structure. What prop types are expected? How can a developer ensure the userId is dynamically updated depending on the user who is logged in?
Prompt 2
You are a senior Angular developer specializing in integrating AI-powered features into web applications. Your task is to create an Angular component that displays a list of recommended articles based on a user's reading history. The component should: 1. Fetch user reading history from a service (assume this service exists and returns an array of article IDs). 2. Use an AI model to generate article recommendations based on the reading history. 3. Display the recommended articles in a visually appealing manner using Angular Material components. Here's the context: * The `ArticleService` provides a method `getUserReadingHistory(userId: string): Observable` that returns an Observable of an array of article IDs representing the user's reading history. The user ID is currently hardcoded as 'user123'. * The AI model is available through a hypothetical `RecommendationService` with a method `getArticleRecommendations(articleIds: string[]): Observable` that takes an array of article IDs and returns an Observable of an array of `Article` objects (where `Article` has properties like `id`, `title`, `summary`, and `imageUrl`). The AI model leverages a BERT transformer. * Use Angular Material's `mat-card` component to display each recommended article, including the title, summary, and image. Implement a loading spinner while fetching data from the services and a retry mechanism in case of errors. Furthermore, integrate AI-powered search functionality using a service that makes use of a LLM model. Include tests.