CV/.cursor/rules/task_list.md

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

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.