Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web-based AI code interviewer designed to provide an interactive coding interview experience. It features an integrated development environment (IDE) interface with video monitoring capabilities, allowing candidates to showcase their coding skills while being evaluated in real-time.

## CORE FEATURES
1. **AI-Powered Code Assessment**: Utilizes machine learning algorithms to evaluate candidates' code submissions for efficiency, correctness, and adherence to best practices.
2. **Integrated IDE Interface**: Provides a user-friendly coding environment where candidates can write, test, and debug their code seamlessly.
3. **Video Monitoring**: Enables real-time video monitoring during interviews to simulate a live interview environment and ensure integrity.
4. **Code Collaboration Tools**: Allows interviewers to comment on the candidate's code and provide feedback in real time.
5. **Question Bank**: A library of coding problems and challenges that can be randomly assigned to candidates based on their skill levels.
6. **Performance Analytics Dashboard**: Offers insights and analytics on candidate performance, including code quality, time taken, and areas of improvement.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design emphasizing clean lines and ample white space to ensure focus on the coding content.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and reduce eye strain.
- **Layout**: The main layout should feature a horizontal split screen with the IDE on one side and video monitoring on the other, with a sidebar for navigation and settings.
- **Typography**: Use a modern, sans-serif font such as Inter or Roboto, with a clear hierarchy (e.g., headings in bold, larger sizes and body text in regular weight).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and enhance development speed.
- **Styling**: Tailwind CSS for a utility-first approach to styling, allowing for rapid UI development.
- **UI Components**: Utilize shadcn/ui for consistent and accessible UI components.
- **State Management**: Redux or Zustand for managing application state efficiently, especially for user sessions and interview progress.

## IMPLEMENTATION STEPS
1. **Project Setup**: Create a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui using npm or yarn.
3. **Layout Creation**: Construct the main layout with a split-screen approach using Flexbox or CSS Grid.
4. **IDE Integration**: Integrate an existing code editor library (e.g., Monaco Editor) into the application for the coding interface.
5. **Video Monitoring Setup**: Implement a video streaming solution using WebRTC or similar technology to allow real-time video monitoring.
6. **Implement AI Assessment**: Develop the backend service that evaluates code submissions using AI algorithms and connect it to the frontend.
7. **Create the Question Bank**: Build a backend database to store coding challenges and implement APIs to fetch questions.
8. **Develop Performance Analytics**: Create a dashboard to display candidate performance metrics, ensuring it is visually engaging and informative.
9. **Testing and Debugging**: Conduct thorough testing to ensure all features work seamlessly across different devices and screen sizes.

## USER EXPERIENCE
Candidates will first log in to their accounts and select an interview. They will be taken to the coding interface where they can view the problem statement, write code, and submit their solution. During the interview, they will be monitored via video, and interviewers can provide feedback in real time. After completion, candidates will receive performance metrics and suggestions for improvement, enhancing their learning experience. The application should be responsive, ensuring accessibility on various devices, including desktops, tablets, and smartphones.