Interview Q&A App Prompts

README.md

Prompt One

Design and develop a modern question and answer (Q&A) web application using Next.js and TypeScript. The application should prioritize a clean user experience, efficient data management, and adherence to current web development best practices.

Don't implement user Authentication:

# Core Features:

Question Management:

1) Add New Question: Implement a form allowing users to submit new questions. Each question entry must include three distinct fields:
- Question Text: The user-submitted question.
- User Answer: The user's provided answer to the question.
- AI-Generated Answer: A field to store an answer generated by an external AI service - OpenAI - Consider how this AI answer will be generated by in a button.

2) List All Questions: Display a comprehensive list of all submitted questions. Each item in the list should clearly present the question, the user's answer, and the AI-generated answer.

3) Edit/Delete Questions: Allow users to modify or remove existing questions.

4) Search/Filter: Implement functionality to search or filter questions based on keywords or categories.

# Technical Requirements & Best Practices:

Next.js Fundamentals:
- Utilize Next.js App Router for routing and layout management.
- Implement Server Components and Client Components appropriately to optimize performance and user experience.
- Consider data fetching strategies (e.g., fetch in Server Components, SWR/React Query in Client Components) for efficient data retrieval.
- TypeScript: Enforce strong typing throughout the application for improved code quality, maintainability, and developer experience. Define clear interfaces for data structures (e.g., Question, Answer).
- Styling: Choose a modern styling approach - Tailwind CSS, CSS Modules, Styled Components - and apply it consistently for a visually appealing and responsive UI.
- Data Persistence: Determine a suitable method for storing question data in the Supabase

User Interface (UI) / User Experience (UX):
- Design an intuitive and user-friendly interface for adding and viewing questions.
- Implement form validation for the question submission form.
- Provide clear loading states and error handling messages.

Code Quality & Structure:
- Organize code logically into components, services, and utilities.
- Write clean, readable, and well-commented code.
- Consider implementing basic error logging and debugging strategies.

https://chatgpt.com/c/686d5f97-88f4-8012-8b6c-e38211b4b995