Resume Uploader and Cover Letter Generator - Copy this React, Tailwind Component to your project
<!DOCTYPE html> <html> <head> <title>Resume Uploader</title> </head> <body> <h2>Upload Resume</h2> <form action="/upload_resume" method="POST" enctype="multipart/form data"> <input type="file" name="resume"> <input type="submit" value="Upload Resume"> </form> <h2>Job Description</h2> <form action="/generate_cover_letter" method="POST"> <textarea name="job_description" rows="10" cols="50"></textarea> <input type="submit" value="Generate Cover Letter"> </form> </body> </html> body { font family: Arial, sans serif; background color: #f4f4f9; margin: 0; padding: 0; } .container { max width: 800px; margin: 0 auto; padding: 20px; background color: white; box shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } h1 { color: #333; text align: center; margin bottom: 20px; } form { display: flex; flex direction: column; gap: 20px; } input[type="file"] { padding: 10px; border: 1px solid #ddd; background color: #f9f9f9; cursor: pointer; } textarea { padding: 10px; border: 1px solid #ddd; resize: vertical; } button { padding: 12px; background color: #007bff; color: white; border: none; cursor: pointer; font size: 16px; transition: background color 0.3s ease; } button:hover { background color: #0056b3; } import React, { useState } from "react"; import axios from "axios"; import "./App.css"; function App() { const [resumeFile, setResumeFile] = useState(null); const [jobDescription, setJobDescription] = useState(""); const [coverLetter, setCoverLetter] = useState(""); // Upload Resume Handler const handleResumeUpload = (e) => { setResumeFile(e.target.files[0]); }; // Submit Resume const handleSubmitResume = async (e) => { e.preventDefault(); const formData = new FormData(); formData.append("resume", resumeFile); try { const response = await axios.post("/upload_resume", formData, { headers: { "Content Type": "multipart/form data" }, }); alert("Resume uploaded successfully!"); } catch (error) { console.error("Error uploading resume:", error); alert("Failed to upload resume."); } }; // Submit Job Description const handleSubmitJobDescription = async (e) => { e.preventDefault(); try { const response = await axios.post("/generate_cover_letter", { job_description: jobDescription, }); setCoverLetter(response.data.cover_letter); } catch (error) { console.error("Error generating cover letter:", error); alert("Failed to generate cover letter."); } }; return ( <div className="container"> <h1>Resume Upload & Cover Letter Generator</h1> <form onSubmit={handleSubmitResume}> <h2>Upload Your Resume</h2> <input type="file" accept=".pdf,.doc,.docx" onChange={handleResumeUpload} /> <button type="submit">Upload Resume</button> </form> <form onSubmit={handleSubmitJobDescription}> <h2>Enter Job Description</h2> <textarea value={jobDescription} onChange={(e) => setJobDescription(e.target.value)} placeholder="Paste the job description here" rows="6" /> <button type="submit">Generate Cover Letter</button> </form> {coverLetter && ( <div className="cover letter"> <h2>Your Cover Letter</h2> <p>{coverLetter}</p> </div> )} </div> ); } export default App; can you enhance this code to be more professional
