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.

Prompt Two

Create a modern, full-featured Question & Answer application using Next.js 14+ with TypeScript, following industry best practices and modern development patterns.

No Authentication needed.

# Core Features

### Question Management

Add New Question Form:
- Question decription
- Answer by Humun
- Answer by AI
- Tags
- Timestamps (created/updated) authomatic add on database

Form Validation:
- Real-time validation with Zod schema
- Error handling and user feedback
- Loading states during submission
- Success confirmation

### Human Answers:

- Rich text editor for formatting
- Voting system (upvote/downvote)
- Best answer selection
- Edit/delete functionality

### AI-Generated Answers:

- Integration with OpenAI API
- Button to generate the answer by AI (non-mandatory field)
- Clearly marked as AI-generated

# Question Listing & Management

### Question List Page:

- Responsive grid/list layout
- Search functionality (full-text search)
- Filter options (By tags)
- Sorting options (Most recent, Least recent )
- Pagination
- Question preview with truncated content

### Individual Question View:

- Full question display
- All answers (human + AI)

# Technical Requirements

### Core Technologies

- Framework: Next.js 14+ (App Router)
- Language: TypeScript (strict mode)
- Styling: Tailwind CSS
- Database: PostgreSQL with Prisma ORM and Supabase
- State Management: Zustand or React Query
- UI Components: Radix UI
- Form Handling: React Hook Form with Zod validation

### Architecture & Best Practices

Use App Router (not Pages Router)
Implement Server Components where appropriate
Follow TypeScript strict typing
Use proper error boundaries
Implement proper loading states
Follow Next.js performance best practices
Use proper SEO optimization
Implement proper accessibility (WCAG 2.1)

Develop a Question and Answer web application using Next.js and TypeScript, following modern best practices for scalability, performance, and maintainability.

#  Core Features

### Add a New Question

Input form with three required fields:
- question: string
- answer: string (manual answer)
- AI answer: string (AI-generated answer)

List All Questions
- Display all existing questions in a clean and paginated UI (if necessary).

Edit a Question
- Allow users to update any of the three fields.

Delete a Question
- Implement a safe deletion mechanism with user confirmation.

# Technical Guidelines

Use Next.js App Router and Server Actions where appropriate.
Organize code following a scalable folder structure (e.g., app/, components/, lib/, types/).
Use TypeScript throughout the project.
Apply React Hooks (e.g., useState, useEffect, useOptimistic) for interactivity.
Use Tailwind CSS for styling.
Store data in Supabase, create a SQL script to update the database schema:
Add basic form validation using zod
Add AI integration for auto-generating the AI answer field using OpenAI API.

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