---
description: Decomposed task list for the CV Optimization Platform, organized by component and functionality. Follow this plan from top to bottom.
globs:
---
# Decomposed Development Task List

**Project Goal:** Develop a CV Optimization Platform MVP with core features: CV upload, AI-powered analysis, and basic suggestion display.

**Development Flow:** Follow the components and tasks in the order listed below for a logical development progression.

---

## 1. Frontend Development (React.js with Next.js)

**Functionality:** User Interface and User Interaction

### 1.1. UI Structure and Basic Layout
    - **Tasks:**
        - [ ] 1.1.1. Set up basic Next.js project structure (if not already done).
        - [ ] 1.1.2. Create homepage (`pages/index.js`) with a clear heading and project description.
        - [ ] 1.1.3. Design basic layout using Tailwind CSS for overall page structure (header, main content area).
        - [ ] 1.1.4. Create a placeholder area for CV upload section.
        - [ ] 1.1.5. Create a placeholder area for displaying original CV text.
        - [ ] 1.1.6. Create a placeholder area for displaying improved CV text/suggestions.

### 1.2. File Upload Functionality
    - **Tasks:**
        - [ ] 1.2.1. Install `react-dropzone` library.
        - [ ] 1.2.2. Create a File Upload Component (`components/FileUpload.js`).
        - [ ] 1.2.3. Implement drag-and-drop functionality using `react-dropzone`.
        - [ ] 1.2.4. Implement file selection button.
        - [ ] 1.2.5. Display selected file name to the user.
        - [ ] 1.2.6. Implement basic client-side file type validation (.pdf, .doc, .docx, .txt).
        - [ ] 1.2.7. Implement basic client-side file size validation.
        - [ ] 1.2.8. Display user-friendly error messages for file validation failures.

### 1.3. Displaying Original CV Text
    - **Tasks:**
        - [ ] 1.3.1. Create a component to display CV text (`components/CVDisplay.js`).
        - [ ] 1.3.2. Fetch uploaded file content from backend API (after backend `/upload` endpoint is ready - *note dependency*).
        - [ ] 1.3.3. Display the raw text content of the uploaded CV in the `CVDisplay` component.
        - [ ] 1.3.4. Implement basic formatting for text display (preserve line breaks, basic text styling).

### 1.4. Displaying Improved CV Text/Suggestions (Placeholder for now)
    - **Tasks:**
        - [ ] 1.4.1. Create a placeholder component for improved CV display (`components/ImprovedCVDisplay.js`).
        - [ ] 1.4.2. For now, display static placeholder text in `ImprovedCVDisplay` (e.g., "Improved CV Suggestions will appear here").
        - [ ] 1.4.3.  Plan layout for side-by-side comparison or tabbed view for original vs. improved CV (implementation later).

### 1.5. Basic Frontend Styling and Responsiveness
    - **Tasks:**
        - [ ] 1.5.1. Apply Tailwind CSS styling to all frontend components for a consistent look and feel.
        - [ ] 1.5.2. Ensure basic responsiveness for different screen sizes (desktop, mobile).
        - [ ] 1.5.3. Refine UI elements for better user experience (padding, margins, font sizes, colors).

---

## 2. Backend Development (Node.js/Express.js OR Python/Flask/FastAPI - *Choose one and proceed*)

**Functionality:** API Endpoints, Logic, LLM Integration, Document Processing

### 2.1. Backend Project Setup and API Framework
    - **Tasks (Choose Node.js OR Python path):**

        **Node.js/Express.js Path:**
        - [ ] 2.1.1. Set up Node.js backend project (using `npm init`).
        - [ ] 2.1.2. Install Express.js and required packages (`express`, `dotenv`, etc.).
        - [ ] 2.1.3. Create a basic Express.js server (`server.js`) with a "Hello World" endpoint to test.
        - [ ] 2.1.4. Configure `.env` file for environment variables.

        **Python/Flask/FastAPI Path:**
        - [ ] 2.1.1. Set up Python backend project and virtual environment.
        - [ ] 2.1.2. Install Flask/FastAPI and required packages (`flask` or `fastapi`, `uvicorn`, `python-dotenv`, etc.).
        - [ ] 2.1.3. Create a basic Flask/FastAPI app (`app.py`) with a "Hello World" endpoint to test.
        - [ ] 2.1.4. Configure `.env` file for environment variables.

### 2.2. `/upload` API Endpoint - File Handling
    - **Tasks (Adjust based on Node.js or Python):**
        - [ ] 2.2.1. Create `/upload` API endpoint in backend.
        - [ ] 2.2.2. Implement file upload handling using appropriate middleware/libraries (e.g., `multer` in Node.js, Flask/FastAPI file handling).
        - [ ] 2.2.3. Implement server-side file type validation (double-check file types).
        - [ ] 2.2.4. Implement server-side file size limits.
        - [ ] 2.2.5. Save uploaded files temporarily to a server directory (for processing).
        - [ ] 2.2.6. Return success response to frontend with temporary file path or identifier.
        - [ ] 2.2.7. Implement error handling for file upload failures and return appropriate error responses.

### 2.3. Document Text Extraction Functionality
    - **Tasks (Adjust based on Node.js or Python and chosen libraries):**
        - [ ] 2.3.1. Install document processing libraries (e.g., `pdf-parse`, `docx-parser` for Node.js OR `PyPDF2`, `python-docx` for Python).
        - [ ] 2.3.2. Create functions to extract text from:
            - [ ] 2.3.2.a. PDF files
            - [ ] 2.3.2.b. DOCX files
            - [ ] 2.3.2.c. DOC files (if supporting)
            - [ ] 2.3.2.d. TXT files
        - [ ] 2.3.3. Integrate text extraction functions into `/upload` endpoint after file saving.
        - [ ] 2.3.4. After successful text extraction, return the extracted text in the API response to the frontend (instead of just file path).
        - [ ] 2.3.5. Implement error handling for text extraction failures.

### 2.4. `/analyze` API Endpoint - LLM Integration (Initial Setup)
    - **Tasks (Adjust based on Node.js or Python and OpenAI API):**
        - [ ] 2.4.1. Create `/analyze` API endpoint in backend.
        - [ ] 2.4.2. Install OpenAI API library (or chosen LLM library).
        - [ ] 2.4.3. Configure OpenAI API key in `.env` file and load it securely.
        - [ ] 2.4.4. In `/analyze` endpoint, receive CV text from frontend request.
        - [ ] 2.4.5. Construct a basic prompt for the LLM for general CV improvement (use prompt examples from previous discussions).
        - [ ] 2.4.6. Send the CV text and prompt to the OpenAI API.
        - [ ] 2.4.7. Receive the LLM response.
        - [ ] 2.4.8. For now, simply return the raw LLM response text to the frontend in the API response.
        - [ ] 2.4.9. Implement basic error handling for OpenAI API calls (API connection errors, rate limits, etc.).

---

## 3. Integration and Testing

**Functionality:** Connecting Frontend and Backend, End-to-End Testing

### 3.1. Connect Frontend File Upload to Backend `/upload` Endpoint
    - **Tasks:**
        - [ ] 3.1.1. In Frontend `FileUpload` component, modify file upload logic to send files to the backend `/upload` endpoint using `fetch` or `axios`.
        - [ ] 3.1.2. Handle successful `/upload` response and store the returned CV text (or file identifier if needed) in frontend state.
        - [ ] 3.1.3. Display the received CV text in the `CVDisplay` component.
        - [ ] 3.1.4. Handle error responses from `/upload` endpoint and display user-friendly error messages.

### 3.2. Connect Frontend "Process CV" Button to Backend `/analyze` Endpoint
    - **Tasks:**
        - [ ] 3.2.1. Add a "Process CV" button to the frontend UI (below the uploaded CV display area).
        - [ ] 3.2.2. When "Process CV" button is clicked, trigger an API call from frontend to backend `/analyze` endpoint.
        - [ ] 3.2.3. Send the CV text (currently displayed in `CVDisplay`) to the `/analyze` endpoint in the request body.
        - [ ] 3.2.4. Handle successful `/analyze` response and store the returned improved CV text (LLM response) in frontend state.
        - [ ] 3.2.5. Display the received improved CV text in the `ImprovedCVDisplay` component (replace placeholder text).
        - [ ] 3.2.6. Handle error responses from `/analyze` endpoint and display user-friendly error messages.
        - [ ] 3.2.7. Implement loading state/spinner to indicate processing while waiting for API responses.

### 3.3. End-to-End Testing and Refinement
    - **Tasks:**
        - [ ] 3.3.1. Test the entire flow: Upload CV -> Display Original -> Click "Process CV" -> Display Improved CV.
        - [ ] 3.3.2. Test with different file types (.pdf, .docx, .txt).
        - [ ] 3.3.3. Test with various CV content examples.
        - [ ] 3.3.4. Test error handling scenarios (invalid file types, large files, API errors, etc.).
        - [ ] 3.3.5. Refine UI and user flow based on testing.
        - [ ] 3.3.6. Basic code cleanup and commenting.

---

## 4. Deployment (Initial MVP Deployment)

**Functionality:** Deploying Frontend and Backend to hosting platforms.

### 4.1. Frontend Deployment to Vercel
    - **Tasks:**
        - [ ] 4.1.1. Create a Vercel account (if not already done).
        - [ ] 4.1.2. Connect your frontend GitHub repository to Vercel.
        - [ ] 4.1.3. Configure Vercel deployment settings (if needed, usually auto-detects Next.js).
        - [ ] 4.1.4. Deploy frontend to Vercel.
        - [ ] 4.1.5. Verify frontend is accessible on Vercel URL.

### 4.2. Backend Deployment to Render/Heroku (Choose one)
    - **Tasks (Choose Render or Heroku):**

        **Render Deployment:**
        - [ ] 4.2.1. Create a Render account (if not already done).
        - [ ] 4.2.2. Create a new Web Service on Render.
        - [ ] 4.2.3. Connect your backend GitHub repository to Render.
        - [ ] 4.2.4. Configure Render deployment settings (build command, start command, environment variables - especially OpenAI API key).
        - [ ] 4.2.5. Deploy backend to Render.
        - [ ] 4.2.6. Verify backend API is accessible on Render URL (e.g., test "Hello World" endpoint).

        **Heroku Deployment:**
        - [ ] 4.2.1. Create a Heroku account (if not already done).
        - [ ] 4.2.2. Create a new Heroku app.
        - [ ] 4.2.3. Connect your backend GitHub repository to Heroku.
        - [ ] 4.2.4. Configure Heroku deployment settings (buildpacks, environment variables - especially OpenAI API key).
        - [ ] 4.2.5. Deploy backend to Heroku.
        - [ ] 4.2.6. Verify backend API is accessible on Heroku URL (e.g., test "Hello World" endpoint).

### 4.3. Configure Frontend to Connect to Deployed Backend
    - **Tasks:**
        - [ ] 4.3.1. In Frontend code, update API endpoint URLs to point to your deployed backend URL (on Render/Heroku).
        - [ ] 4.3.2. Re-deploy frontend to Vercel with updated backend URL.
        - [ ] 4.3.3. Test the entire application flow on the deployed environment (Vercel frontend connected to Render/Heroku backend).

---

**Next Steps (Post MVP - Not part of this decomposed list yet, for future planning):**

- Implement User Accounts
- Enhance LLM Prompting and Analysis (ATS Optimization, Job Description Tailoring)
- Implement Suggestion Editing and User Feedback
- Advanced UI/UX improvements
- Monetization Strategy Implementation
- ... and so on

**Follow this decomposed task list sequentially. Start with "1. Frontend Development - 1.1. UI Structure and Basic Layout" and work your way down.  This provides a clear path to build your MVP.**