You are an experienced startup consultant, application idea analyst, and senior full-stack developer. Your task is to generate a comprehensive AI Master Prompt for creating a single-page SPA (Single Page Application) called 'AI Mülakat Asistanı' (AI Interview Assistant). This prompt will be used by an AI coding assistant (like Claude, Cursor, Gemini) to build the application from scratch.
--- AI MASTER PROMPT START ---
PROJECT OVERVIEW:
The 'AI Mülakat Asistanı' is a web application designed to help job seekers prepare for AI-powered job interviews. The core problem it solves is the increasing prevalence of AI bots conducting initial or even subsequent interview rounds, often leaving candidates feeling unprepared and unsure of how to perform effectively. Many candidates lack the opportunity to practice these specific types of interviews and receive objective, data-driven feedback. Our application provides a safe and realistic environment for users to practice AI interviews, receive detailed performance analysis, and get actionable insights for improvement. The primary value proposition is democratizing access to effective interview preparation against automated interviewers, ultimately boosting candidate confidence and success rates in the job market.
TECH STACK:
- Frontend Framework: React (using Create React App or Vite for setup)
- Styling: Tailwind CSS for rapid UI development and a consistent design system.
- State Management: Zustand for efficient and simple global state management.
- Routing: React Router DOM for managing navigation within the SPA.
- API Interaction (Optional for MVP, Mocked Initially): Axios or Fetch API for potential future backend integration.
- Form Handling: React Hook Form for robust and performant form management.
- Icons: Heroicons or a similar library for clean, accessible icons.
- Deployment: Instructions will assume a standard static site hosting provider (e.g., Vercel, Netlify).
CORE FEATURES:
1. **AI Mülakat Simülasyonu (AI Interview Simulation):**
* **User Flow:** Upon landing on the app, the user is presented with options to start a new simulation. They can choose from pre-defined job roles (e.g., Software Engineer, Marketing Specialist) or potentially input keywords to generate a role-specific interview. The system then presents a series of common interview questions one by one. For each question, the user has a limited time (e.g., 60 seconds) to record their spoken answer using their microphone. After recording, the user can optionally re-record or submit the answer. The system progresses to the next question after submission.
* **Technical Details:** This feature will initially rely on mocked responses and analysis. The UI will display the current question, a timer, and record/submit buttons. Microphone access will be requested via the browser's MediaDevices API.
2. **Performans Analizi ve Skorlama (Performance Analysis & Scoring):**
* **User Flow:** Once the user completes all questions in a simulation, the application processes the recorded answers. An AI-driven (mocked for MVP) analysis engine evaluates aspects like: response relevance, clarity, conciseness, tone (e.g., confidence, enthusiasm - simulated), and 'filler' word usage (e.g., 'um', 'uh'). A final score (e.g., out of 100) is generated.
* **Technical Details:** The analysis will be simulated based on predefined rules or simple keyword matching against ideal answers (for mock data). The score will be calculated and stored locally.
3. **Geri Bildirim Raporu (Feedback Report):**
* **User Flow:** After scoring, a detailed report is presented to the user. This report breaks down the score by category (e.g., Relevance: 8/10, Clarity: 7/10, Tone: 6/10). It includes specific, constructive feedback for each question, highlighting strengths and areas for improvement. For example, "Your answer to question 3 was slightly off-topic. Consider focusing more on quantifiable achievements." or "You used 'um' multiple times in your answer to question 5. Practice pausing instead."
* **Technical Details:** The report UI will dynamically render based on the analysis results. Feedback messages will be curated based on simulated analysis outcomes.
4. **Kullanıcı Profili ve İlerleme Takibi (User Profile & Progress Tracking):**
* **User Flow:** Users can create a simple profile (initially stored in Local Storage). All completed simulations, their scores, and feedback reports are saved within this profile. Users can view a history of their interviews, track their score progression over time using simple charts, and revisit past feedback.
* **Technical Details:** Utilizes `localStorage` to persist simulation history, scores, and feedback. A dedicated 'History' or 'Dashboard' page will display this data.
UI/UX DESIGN:
- **Layout:** A clean, single-page application layout. A persistent navigation sidebar (collapsible on smaller screens) for accessing Simulation, History/Dashboard, and Profile sections. The main content area dynamically changes based on the selected section.
- **Color Palette:** Primary: A professional, calming blue (e.g., `#3B82F6` - Tailwind's `blue-500`). Secondary: A neutral gray for backgrounds and text (e.g., `#F3F4F6` - `gray-100` for backgrounds, `#1F2937` - `gray-900` for text). Accent: A vibrant color for calls-to-action and highlights (e.g., `#10B981` - `emerald-500` for success states, `#EF4444` - `red-500` for warnings).
- **Typography:** Use a clean, readable sans-serif font like Inter or Roboto. Headings should be distinct from body text using font weight and size. (e.g., `font-family: 'Inter', sans-serif;`)
- **Responsive Design:** Mobile-first approach. Ensure all elements are usable and aesthetically pleasing on small screens. Use Tailwind's responsive modifiers (`sm:`, `md:`, `lg:`) extensively. The layout should adapt gracefully to tablets and desktops.
- **Components:** Buttons, Input Fields, Cards (for history items, feedback summaries), Modals (for confirmations, settings), Progress Bars, Charts (simple line/bar charts for progress tracking).
COMPONENT BREAKDOWN:
- `App.jsx`: Main application component, sets up routing and global layout.
- `Navigation.jsx`: Sidebar/header component containing navigation links.
- `SimulationPage.jsx`: Container for the interview simulation flow. Manages state for current question, timer, recording status.
- `QuestionDisplay.jsx`: Displays the current interview question.
- `Timer.jsx`: Visual timer component.
- `Recorder.jsx`: Handles microphone input, recording, and playback controls.
- `ResultsPage.jsx`: Displays the score and the detailed feedback report.
- `ScoreCard.jsx`: Shows the overall score prominently.
- `FeedbackSection.jsx`: Renders detailed feedback categorized by question or metric.
- `HistoryPage.jsx`: Displays a list of past simulations.
- `SimulationHistoryItem.jsx`: Card component representing a single past simulation, showing score and date.
- `ProgressChart.jsx`: (Future Enhancement) Displays score trends over time.
- `ProfilePage.jsx`: Manages user profile settings (stored in Local Storage).
- `common/Button.jsx`: Reusable button component with various states (e.g., primary, secondary, disabled).
- `common/Card.jsx`: Generic card component for displaying information.
- `common/Modal.jsx`: Reusable modal component.
DATA MODEL (using Zustand and Local Storage):
`userStore.js` (Zustand Store):
```javascript
create((set) => ({
// User profile data - initially null, could be expanded for auth
profile: {
name: null,
email: null, // Placeholder
},
// Array to store simulation history
simulations: [],
// Actions
setProfileName: (name) => set((state) => ({ profile: { ...state.profile, name }})),
addSimulation: (simulationData) => set((state) => ({
simulations: [...state.simulations, { ...simulationData, id: Date.now() }]
})),
// Load initial state from localStorage
loadState: () => {
const savedState = localStorage.getItem('aiMülakatAsistanState');
if (savedState) {
const parsedState = JSON.parse(savedState);
set(parsedState); // Directly set the loaded state
}
}
}));
// Persist state to localStorage whenever it changes
// This would typically be done in a higher-order component or effect
// Example usage:
// const useBoundStore = (state) => { /* ... store logic ... */ }
// const store = useBoundStore.getState();
// useEffect(() => {
// const unsub = useBoundStore.subscribe(state => {
// localStorage.setItem('aiMülakatAsistanState', JSON.stringify(state));
// });
// return unsub;
// }, []);
```
`simulationData` structure (object added to `simulations` array):
```json
{
"id": 1678886400000, // Timestamp
"date": "2023-03-15T10:00:00Z",
"jobRole": "Software Engineer",
"questions": [
{
"questionText": "Tell me about yourself.",
"recordedAnswer": "...base64 audio data or URL...", // Placeholder for future audio storage
"analysis": {
"relevanceScore": 8,
"clarityScore": 7,
"toneScore": 6,
"fillerWords": 3,
"feedback": "Good start, but could be more concise."
},
"userAnswerText": "I am a software engineer with 5 years of experience..."
},
// ... more questions
],
"overallScore": 75,
"overallFeedback": "Solid performance, focus on reducing filler words and tailoring answers more specifically to the role."
}
```
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade-in/fade-out transitions between pages/sections using `react-transition-group` or CSS animations.
- **Button Hover Effects:** Slight scale-up or background color change on button hover.
- **Loading States:** Use spinners or pulsating animations within buttons or content areas while data is being fetched (or simulated) or audio is processing.
- **Micro-interactions:** Visual feedback on recording start/stop, answer submission. Subtle animations on chart elements in the history view.
- **Input Focus:** Highlight input fields with a border color change when they are focused.
EDGE CASES:
- **No Microphone Access:** Gracefully handle cases where the user denies microphone permission. Display an informative message and disable recording functionality.
- **Empty States:** Display user-friendly messages and potentially illustrations for empty history, profile, or no simulations run yet.
- **Error Handling:** Implement basic error handling for potential issues (e.g., audio recording failure, data saving errors). Display user-friendly error messages.
- **Validation:** If forms are introduced (e.g., profile settings), implement client-side validation (using React Hook Form).
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes where necessary. All interactive elements should be keyboard navigable. Sufficient color contrast.
- **Browser Compatibility:** Ensure basic functionality across modern browsers (Chrome, Firefox, Safari, Edge).
- **Long Answers:** Ensure the UI can handle potentially long spoken answers and display them clearly in the feedback report.
SAMPLE DATA:
1. **Simulation 1 (Software Engineer):**
* `jobRole`: "Frontend Developer"
* `questions`: [
{ `questionText`: "Can you describe a challenging project you worked on?", `userAnswerText`: "A challenging project was building the dashboard for X company. We faced integration issues with their legacy API...", `analysis`: { `relevanceScore`: 9, `clarityScore`: 8, `toneScore`: 7, `fillerWords`: 2, `feedback`: "Good explanation of the challenge and your role." } },
{ `questionText`: "How do you stay updated with new frontend technologies?", `userAnswerText`: "I follow blogs like Smashing Magazine, attend webinars, and experiment with new libraries like React.js...", `analysis`: { `relevanceScore`: 8, `clarityScore`: 8, `toneScore`: 7, `fillerWords`: 1, `feedback`: "Comprehensive answer covering multiple learning methods." } }
]
* `overallScore`: 82
* `overallFeedback`: "Strong technical answers. Consider adding more about specific outcomes or metrics achieved."
2. **Simulation 2 (Marketing Specialist):**
* `jobRole`: "Digital Marketing Manager"
* `questions`: [
{ `questionText`: "What's your experience with SEO?", `userAnswerText`: "I have managed SEO strategies for 3 years, focusing on keyword research, on-page optimization, and link building...", `analysis`: { `relevanceScore`: 9, `clarityScore`: 9, `toneScore`: 8, `fillerWords`: 0, `feedback`: "Clear and confident answer demonstrating expertise." } }
]
* `overallScore`: 88
* `overallFeedback`: "Excellent answer on SEO. Very well presented."
3. **Profile Data:**
* `profile`: { `name`: "Jane Doe" }
4. **Empty History:**
* `simulations`: []
5. **Specific Feedback Example:**
* For question "Why do you want to work here?":
* `analysis`: { `relevanceScore`: 5, `clarityScore`: 7, `toneScore`: 6, `fillerWords`: 4, `feedback`: "The answer was too generic. It didn't connect your skills or aspirations to *this specific company*. Try researching the company's mission and recent work, and mention how you align with it. Also, try to minimize filler words like 'uhm'." }
6. **Tone Analysis Example Feedback:**
* If low tone score: "Your tone seemed hesitant in places. Try practicing with more vocal enthusiasm and confidence."
7. **Relevance Analysis Example Feedback:**
* If low relevance score: "Your answer to question X could be more directly related to the job requirements. Focus on experiences that highlight the skills mentioned in the job description."
DEPLOYMENT NOTES:
- **Build Command:** Standard build command for the chosen framework (e.g., `npm run build` for CRA or `npm run build` for Vite).
- **Environment Variables:** For MVP, no specific environment variables are strictly required as data is in Local Storage. For future scaling with a backend, API endpoints, keys, etc., would be managed via environment variables (e.g., `REACT_APP_API_URL` or `VITE_API_URL`).
- **Performance Optimizations:** Code splitting (handled by CRA/Vite defaults), lazy loading components, optimizing images (if any), efficient state management. Ensure `localStorage` usage is minimal and efficient.
- **Hosting:** Deploy the static build output to a platform like Vercel or Netlify for easy setup and CDN distribution.
--- AI MASTER PROMPT END ---