CV Optimizer Frontend

Frontend application for an AI-powered CV optimization platform that helps users tailor their resume and generate cover letters for specific job descriptions using large language models.

Users authenticate with email OTP, upload their CV, submit a job description, and receive AI-generated outputs including an optimized CV and a tailored cover letter.

This project demonstrates production-style frontend engineering practices including API integration, async job workflows, state management, and structured UI architecture.

---

Core Features

• Email OTP authentication with access and refresh tokens
• User dashboard with statistics and credit balance
• CV upload for pdf, docx, txt, and md formats
• AI optimization job creation
• Job status polling for asynchronous processing
• Optimization history with status filtering
• File preview for PDF, Markdown, text, and DOCX
• Downloadable optimized CVs and generated cover letters

---

Architecture Overview

The frontend is a React single-page application that communicates with the backend API and manages asynchronous optimization workflows.

Typical flow:

User Login ↓ OTP Verification ↓ Dashboard + Credit Balance ↓ CV Upload + Job Description ↓ Optimization Job Creation ↓ Polling Optimization Status ↓ Preview Generated Results ↓ Download Optimized Files

The app uses TanStack Query to manage server state and polling logic for long-running optimization jobs.

---

Project Structure

src/ components/ files/ File upload and preview components ui/ Shared UI primitives contexts/ Authentication state and session bootstrap lib/ API client, query client, utilities pages/ Login, dashboard, optimize, history services/ API integrations (auth, user, credits, files, optimizations) types/ Shared API and domain types

This structure separates UI components, service logic, and application state to maintain a clear and scalable architecture.

---

Tech Stack

Frontend

• React 18
• TypeScript
• Vite 5

State / Data Fetching

• TanStack Query
• Axios

UI

• Tailwind CSS v4
• React Hook Form
• React Dropzone
• React Hot Toast

Document Processing

• Mammoth (DOCX parsing)
• React Markdown

---

Backend API Expectations

The frontend expects a backend API running by default at:

http://localhost:3000/api/v1

Main endpoints used:

• POST /auth/send-otp
• POST /auth/verify-otp
• POST /auth/refresh
• POST /auth/logout
• GET /users/me
• GET /users/stats
• GET /credits/balance
• GET /credits/history
• POST /credits/add
• POST /files/upload
• GET /files/:filename
• POST /optimizations
• GET /optimizations
• GET /optimizations/:id

---

Environment Setup

Create .env.local in the project root:

VITE_API_BASE_URL=http://localhost:3000/api/v1

VITE_API_TIMEOUT=30000

---

Local Development

Prerequisites

• Node.js 20+
• npm
• Running CV Optimizer backend

Install dependencies

npm install

Start development server

npm run dev

Other scripts

npm run build npm run lint npm run preview

---

Known Limitations

This project intentionally focuses on core functionality and currently has some gaps:

• Routing is state-based inside DashboardPage instead of using a dedicated router
• Automated frontend tests are not implemented yet
• Tokens are stored in localStorage (acceptable for development but weaker than httpOnly cookie-based auth)
• A development shortcut for OTP login still exists in the login screen

---

Documentation

Additional documentation is available in the docs/ directory:

• START_HERE.md
• FRONTEND_QUICK_START.md
• FRONTEND_IMPLEMENTATION_GUIDE.md
• TESTING_GUIDE.md
• CV Optimizer App – Product Requirement.md

---

Security Notes

Recent security review improvements include:

• Removed request/auth logging that exposed token fragments in the browser console
• Removed an unused helper that could append auth tokens to file download URLs
• No API keys, private keys, or obvious hardcoded secrets were found in the repository
• npm audit should be used to verify third-party dependency status

---

What This Project Demonstrates

• Building a structured React application with clear separation of UI, service, and state layers
• Integrating asynchronous AI workflows into a frontend application
• Managing server state and polling using TanStack Query
• Designing a maintainable frontend architecture for API-driven applications One small recommendation