CoverCraft AI 🚀

Create Perfect, Professional Cover Letters in Seconds

Demo • Features • Installation • Usage • Contributing

---

📖 Table of Contents

• About
• Demo
• Features
• Screenshots
• Tech Stack
• Prerequisites
• Installation
• Usage
• Project Structure
• API Documentation
• Deployment
• Troubleshooting
• Contributing
• License
• Acknowledgments

---

🎯 About

CoverCraft AI is a next-generation, AI-powered web application that revolutionizes the job application process. Built with modern JavaScript technologies including Gemini 2.5 Flash AI, Node.js/Express, and Next.js, CoverCraft analyzes your resume and job descriptions to generate perfectly tailored, professional cover letters in under 30 seconds.

Why CoverCraft AI?

• ⚡ Lightning Fast - Generate cover letters in <30 seconds
• 🎯 Highly Personalized - AI analyzes your resume and the job posting
• 🔒 Secure & Private - Your data is encrypted and never stored
• 📄 Google Docs Integration - Export directly to editable Google Docs
• 🎨 Beautiful UI - Modern, dark-themed interface with smooth animations

---

🎬 Demo

Landing Page

Experience our stunning landing page with god-level animations and a seamless user journey.

Main Application

Generate professional cover letters with an intuitive, drag-and-drop interface.

🎥 Watch Full Video Demo →

---

✨ Features

🔐 Authentication & Security Google OAuth 2.0 - Secure login JWT Token Management - Stateless authentication Refresh Token Support - Extended sessions User Profile Management - View permissions	🤖 AI-Powered Generation Gemini 2.5 Flash Integration - State-of-the-art AI Context-Aware Analysis - Matches resume to job Dynamic Content Creation - Unique every time Professional Formatting - Industry standards
📄 Document Management Google Docs Export - Fully formatted documents PDF Download - Instant PDF generation Preview & Edit - Review before creating Custom Naming - User_Company format	🎨 User Experience Dark Theme UI - Modern and elegant Drag & Drop Upload - Easy file handling Real-time Validation - Instant feedback Responsive Design - Works on all devices

---

📸 Screenshots

1️⃣ Landing Page

Beautiful hero section with gradient animations and floating stats

Interactive feature cards with hover effects

Step-by-step visual guide with progress indicators

---

2️⃣ Main Application Interface

Split-screen interface: Job Description (Left) + Resume Upload (Right)

Key Elements:

• 📝 Left Panel - Large textarea for job description with character counter
• 📤 Right Panel - Drag & drop resume upload area with file list
• 🎯 Generate Button - Prominent CTA button with disabled state handling

---

3️⃣ User Profile & Settings

Profile dropdown showing user info, API key management, and permissions

Features:

• 👤 User name and email display
• 🔑 Gemini API key management
• ✅ OAuth permissions list
• 🚪 Logout functionality

---

4️⃣ API Key Setup Modal

Step-by-step guide to obtain and enter Gemini API key

Features:

• 📋 Clear instructions with links
• ✅ Validation before saving
• 🔒 Password field for security
• 🎨 Clean, modern design

---

5️⃣ Preview Modal

Preview generated content before creating the document

Features:

• 📄 Full-screen preview
• ✏️ "Cancel & Edit" option
• ✅ "Confirm & Create Document" action
• 🎨 Formatted text display

---

6️⃣ Document Viewer & Download

Embedded PDF viewer with download functionality

Features:

• 🖼️ Embedded PDF preview via iframe
• 💾 One-click PDF download
• 📛 Auto-generated filename: User_Company_CoverLetter.pdf
• ✖️ Close button to return to main app

---

🛠️ Tech Stack

Backend (Node.js)

Node.js 18+
├── Express.js 4.18
├── Passport.js (OAuth2)
├── jsonwebtoken (JWT)
├── Google APIs (Node.js client)
│   ├── Docs API
│   └── Drive API (PDF export)
├── pdf-parse (PDF processing)
└── multer (File uploads)

Frontend (Next.js)

Next.js 15.5.4
├── React 19
├── TypeScript 5
├── Tailwind CSS 4
├── Lucide React (Icons)
└── Dynamic Imports

APIs & Services

• Google Gemini API - gemini-1.5-flash (AI generation)
• Google OAuth 2.0 - User authentication
• Google Docs API - Document creation
• Google Drive API - PDF export

---

📋 Prerequisites

Before you begin, ensure you have the following installed:

Tool	Version	Download
Node.js	18+	Download
npm	9+	Included with Node.js
Git	Latest	Download

Recommended IDE:

• VS Code with ESLint and TypeScript extensions

---

⚙️ Installation

1️⃣ Clone the Repository

git clone https://github.com/yourusername/covercraft-ai.git
cd covercraft-ai

2️⃣ Backend Setup (Node.js)

A. Configure Google Cloud Platform

Step 1: Create a Google Cloud Project

1. Go to Google Cloud Console
2. Click "New Project"
3. Name: "CoverCraft AI"
4. Click "Create"

Step 2: Enable Required APIs

Navigate to APIs & Services > Library and enable:

• ✅ Google Docs API
• ✅ Google Drive API
• ✅ Google+ API (for OAuth)

Step 3: Configure OAuth Consent Screen

1. Go to APIs & Services > OAuth consent screen
2. Choose External user type
3. Fill in application information:

   App name: CoverCraft AI
   User support email: [email protected]
   Developer contact: [email protected]
   

4. Add scopes:
   • openid
   • .../auth/userinfo.email
   • .../auth/userinfo.profile
   • .../auth/documents
   • .../auth/drive.readonly
5. Add test users (your Gmail accounts)
6. Click "Save and Continue"

Step 4: Create OAuth 2.0 Credentials

1. Go to APIs & Services > Credentials
2. Click + Create Credentials > OAuth client ID
3. Application type: Web application
4. Authorized redirect URIs:

   http://localhost:8080/api/v1/auth/google/callback
   

5. Click Create
6. Copy Client ID and Client Secret ⚠️

B. Get Gemini API Key

1. Visit Google AI Studio
2. Click "Get API Key"
3. Create/Select a project
4. Copy the API key

Note: Users will enter their own API keys in the app, but you need one for testing.

C. Configure Environment Variables

1. Navigate to backend/
2. Create .env from the template:

cd backend
cp .env.template .env

3. Edit .env:

# Server Configuration
PORT=8080
NODE_ENV=development

# Google OAuth Credentials (from Step 4)
GOOGLE_CLIENT_ID=your_google_client_id_here
GOOGLE_CLIENT_SECRET=your_google_client_secret_here
GOOGLE_CALLBACK_URL=http://localhost:8080/api/v1/auth/google/callback

# JWT Configuration (generate a random 64+ character string)
JWT_SECRET=your_super_secret_jwt_key_minimum_512_bits_long
JWT_EXPIRES_IN=1h
JWT_REFRESH_EXPIRES_IN=7d

# Frontend URL
FRONTEND_URL=http://localhost:3000

# Google API Scopes
GOOGLE_SCOPES=openid,email,profile,https://www.googleapis.com/auth/documents,https://www.googleapis.com/auth/drive.readonly

# AI Provider
AI_PROVIDER_URL=https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent

D. Install Backend Dependencies

cd backend
npm install

3️⃣ Frontend Setup

# Navigate to frontend directory
cd frontend

# Install dependencies
npm install

# Return to project root
cd ..

---

🚀 Usage

Running the Application

You need two terminal windows:

Terminal 1: Backend (Spring Boot)

# From project root
./gradlew bootRun

Expected Output:

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::               (v3.5.6)

...
Started CoverLetterAgentApplication in 4.5 seconds
Tomcat started on port(s): 8080 (http)

✅ Backend ready at http://localhost:8080

Terminal 2: Frontend (Next.js)

# Navigate to frontend
cd frontend

# Start development server
npm run dev

Expected Output:

   ▲ Next.js 15.5.4
   - Local:        http://localhost:3000
   - Network:      http://192.168.1.x:3000

 ✓ Ready in 2.5s

✅ Frontend ready at http://localhost:3000

---

📖 User Journey

1. Landing Page

• Open http://localhost:3000
• View the animated landing page
• Click "Get Started Free" or "Login with Google"

2. Google Authentication

• Google OAuth consent screen appears
• Select your Google account
• Grant requested permissions
• Redirected back to application

3. API Key Setup (First-time only)

• Modal prompts for Gemini API key
• Follow instructions to get key from Google AI Studio
• Paste and save API key (stored in browser localStorage)

4. Generate Cover Letter

Step 1: Upload Resume

• Drag & drop PDF or click "Browse Files"
• See uploaded file with number badge

Step 2: Paste Job Description

• Copy job posting from company website
• Paste into left textarea

Step 3: Generate

• Click "Generate Cover Letter"
• Wait 5-10 seconds for AI processing

Step 4: Review Preview

• Preview modal shows generated content
• Choose "Cancel & Edit" or "Confirm & Create Document"

Step 5: Download Document

• Document viewer shows PDF preview
• Click "Download PDF" to save
• Filename format: YourName_CompanyName_CoverLetter.pdf

---

📁 Project Structure

covercraft-ai/
│
├── backend/                    # Node.js/Express Backend
│   ├── src/
│   │   ├── config/
│   │   │   ├── jwt.js              # JWT utilities
│   │   │   └── passport.js         # OAuth configuration
│   │   ├── controllers/
│   │   │   ├── authController.js        # Auth endpoints
│   │   │   ├── coverLetterController.js # Generation logic
│   │   │   └── documentController.js    # Document management
│   │   ├── middleware/
│   │   │   ├── auth.js             # JWT authentication
│   │   │   ├── errorHandler.js    # Error handling
│   │   │   └── upload.js           # File upload config
│   │   ├── routes/
│   │   │   ├── authRoutes.js       # Auth routes
│   │   │   ├── coverLetterRoutes.js # Cover letter routes
│   │   │   └── documentRoutes.js   # Document routes
│   │   ├── services/
│   │   │   ├── authService.js      # Auth business logic
│   │   │   ├── geminiService.js    # AI service
│   │   │   ├── googleDocsService.js # Google Docs/Drive
│   │   │   └── pdfService.js       # PDF processing
│   │   └── server.js               # Main entry point
│   ├── .env.template               # Environment template
│   ├── .gitignore
│   ├── package.json
│   └── README.md
│
├── frontend/                   # Next.js Application
│   ├── app/
│   │   ├── components/
│   │   │   └── CoverLetterApp.tsx    # Main app component
│   │   ├── landing/
│   │   │   └── page.tsx              # Landing page
│   │   ├── layout.tsx                # Root layout
│   │   ├── page.tsx                  # Router
│   │   └── globals.css               # Global styles
│   ├── public/                       # Static assets
│   ├── package.json
│   └── tsconfig.json
│
├── QUICK_START_NODEJS.md       # Quick setup guide
├── MIGRATION_GUIDE.md          # Technical details
├── TESTING_CHECKLIST.md        # QA checklist
├── start-nodejs-backend.bat    # Windows startup
├── start-nodejs-backend.sh     # Linux/Mac startup
├── .gitignore
└── README.md                   # This file

---

📡 API Documentation

Authentication

POST /oauth2/authorization/google

Initiates Google OAuth flow

Response: Redirects to Google consent screen

---

GET /login/oauth2/code/google

OAuth callback endpoint

Query Params:

• code - Authorization code from Google

Response: Redirects to frontend with JWT token

---

POST /api/v1/auth/refresh

Refresh expired JWT token

Headers:

Authorization: Bearer <expired_jwt>

Response:

{
  "token": "new_jwt_token_here"
}

---

Cover Letter Generation

POST /api/v1/cover-letter/generate-content

Generate cover letter content using AI

Headers:

Authorization: Bearer <jwt_token>

Body (multipart/form-data):

• resumes - PDF file
• jobDescription - String
• apiKey - User's Gemini API key

Response:

{
  "content": "[H1]John Doe\n[H2]..."
}

---

POST /api/v1/cover-letter/create-document

Create Google Doc from generated content

Headers:

Authorization: Bearer <jwt_token>
Content-Type: application/json

Body:

{
  "title": "Cover Letter - Google",
  "content": "[H1]John Doe\n..."
}

Response:

{
  "documentId": "1abc123..."
}

---

Document Management

GET /api/v1/document/{documentId}/download

Download document as PDF

Headers:

Authorization: Bearer <jwt_token>

Query Params (alternative):

• token - JWT token (for iframe)

Response: PDF file stream

---

🌐 Deployment

Backend (Spring Boot)

Option 1: Heroku

# Install Heroku CLI
heroku login
heroku create covercraft-api

# Set environment variables
heroku config:set GOOGLE_CLIENT_ID=your_client_id
heroku config:set GOOGLE_CLIENT_SECRET=your_secret
heroku config:set JWT_SECRET=your_jwt_secret

# Deploy
git push heroku main

Option 2: AWS Elastic Beanstalk

1. Package application:

   ./gradlew build

2. Upload build/libs/CoverLetterAgent-0.0.1-SNAPSHOT.jar
3. Configure environment variables in AWS console

Important: Update OAuth redirect URI in Google Cloud Console:

https://api.yourdomain.com/login/oauth2/code/google

---

Frontend (Next.js)

Option 1: Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel

# Deploy
cd frontend
vercel

Environment Variables:

• NEXT_PUBLIC_API_URL - Your backend URL

Option 2: Netlify

1. Connect GitHub repository
2. Build settings:
   • Build command: cd frontend && npm run build
   • Publish directory: frontend/.next

Update API URLs:

In frontend/app/components/CoverLetterApp.tsx, replace:

const response = await fetch('http://localhost:8080/api/...')

With:

const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080';
const response = await fetch(`${API_URL}/api/...`)

---

🐛 Troubleshooting

Common Issues

❌ "Could not resolve placeholder 'ai.provider.api.key'"

Cause: Missing API key in application.properties

Solution:

1. Check src/main/resources/application.properties exists (not just template)
2. Ensure all required properties are filled
3. Restart Spring Boot application

❌ "401 Unauthorized" when generating cover letter

Cause: JWT token expired or invalid

Solution:

1. Check browser console for token
2. Try logging out and logging in again
3. Verify JWT secret is at least 512 bits

❌ "CORS error" in browser console

Cause: Backend not allowing frontend origin

Solution:

1. Verify backend is running on port 8080
2. Verify frontend is running on port 3000
3. Check WebConfig.java has correct origins

❌ Google OAuth shows "Error 400: redirect_uri_mismatch"

Cause: Redirect URI not registered in Google Cloud

Solution:

1. Go to Google Cloud Console > Credentials
2. Edit OAuth 2.0 Client
3. Add redirect URI: http://localhost:8080/login/oauth2/code/google
4. Save changes

❌ "Module not found: Can't resolve 'lucide-react'"

Cause: Missing frontend dependency

Solution:

cd frontend
npm install lucide-react
npm run dev

❌ Gradle build fails with dependency errors

Cause: Cached corrupted dependencies

Solution:

./gradlew clean
rm -rf ~/.gradle/caches/
./gradlew build --refresh-dependencies

---

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/AmazingFeature

3. Commit your changes

   git commit -m 'Add some AmazingFeature'

4. Push to the branch

   git push origin feature/AmazingFeature

5. Open a Pull Request

Code Style Guidelines

• Backend: Follow Google Java Style Guide
• Frontend: Use ESLint and Prettier
• Commits: Use Conventional Commits format

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2025 Ankit Verma

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction...

---

🙏 Acknowledgments

• Google Gemini API - For providing state-of-the-art AI generation
• Google Cloud Platform - For OAuth and Docs API infrastructure
• Spring Boot Team - For the excellent framework
• Vercel & Next.js Team - For the amazing React framework
• Tailwind CSS - For making styling effortless
• Lucide Icons - For beautiful, consistent icons

---

📧 Support & Contact

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: [email protected]
• LinkedIn: Ankit Verma

---

⭐ Star this repo if you found it helpful!

Made with ❤️ by Ankit Verma

🔝 Back to Top