Check it out: deloresumegpt.vercel.app
🚧 Section 1: The Journey
This project started with a question: could I build a resume generator that perfectly follows the Kenan-Flagler Business School resume format — and make it smarter with AI?
I started by coding the backend logic in Python to generate a .docx file that matched the official styling guide line-by-line. This meant aligning font styles (Times New Roman), bullet spacing, column alignment for dates, and eliminating all visual inconsistencies that Word might introduce by default. One of the hardest parts was dealing with tricky formatting issues like inconsistent margins and manually creating table-based gridlines to ensure perfect spacing in Word. It took a lot of trial and error to get the layout pixel-perfect.
After extensive testing and layout troubleshooting, I got the Word document generator working exactly like the official Kenan-Flagler resume.
Once that foundation was in place, I turned to the frontend. I used React to build an interactive interface where users could input their resume details and see a live preview in real time. This part went through several major UI iterations. Early versions were rigid and lacked flexibility, but with each redesign I added modularity, responsiveness, and eventually AI integration.
I faced several frontend challenges along the way. There were syncing issues between input fields and the preview due to ID mismatches. I also discovered that formatting the live preview in HTML/CSS was fundamentally different from formatting in a Word document. This meant I had to strike a balance between visual accuracy and functional layout. Testing mobile view revealed spacing inconsistencies and font scaling problems that I had to redesign from scratch.
In the beginning, I used ChatGPT to help visualize the structure of the app and debug tricky backend logic. It played a huge role in getting the initial concepts off the ground. Toward the end of the project, I started using Cursor AI, an AI-powered IDE, to improve the UI and give the app a cleaner, more modern look with responsive design best practices.
This wasn’t just a coding project — it was a crash course in full-stack development, product design, and deploying a working AI-enhanced application.
✨ Features That Make It Awesome
📊 Visual Indicators
Colored progress bar to track character usage in real-time
Red/yellow/green state changes with disabled “Add” buttons once the max is reached
🖋️ Resume Content Management
Add/remove Experience and Leadership entries (max of 6 combined)
Add/remove Honors and Awards (max of 4)
Honors section smartly adjusts: appears under Education if <= 1, or becomes its own block if > 1
💡 AI Integration
Paste LinkedIn info and auto-convert to Kenan-Flagler style using GPT
Enter role + company + summary, then click a button to generate 3 perfectly formatted bullet points
GPT also checks and fixes name formatting (e.g., "Cooper Evan Delo" ➔ "Cooper E. Delo")
🌐 Fully Synced Workflow
React state (formData) updates live across inputs and preview
One-click Generate Resume button creates a downloadable Word doc with filename: Firstname_Lastname_Resume_Date.docx
📄 Formatting Accuracy
Bullet points use perfect spacing and character count
Black underlined section headers, italicized sublabels, bolded titles—all locked to the Kenan-Flagler visual rules
🚀 Deployment Setup
Backend: Flask on Render
Frontend: React on Vercel
Seamless communication via fetch API
🧰 Tools and Technologies Used
Languages: Python, JavaScript, HTML, CSS
Frameworks/Libraries: React, Flask, Tailwind CSS
AI Tools: ChatGPT API, Cursor AI
Design: Figma, Google Fonts
DevOps: GitHub, Vercel (frontend), Render (backend), dotenv
Debugging: Chrome DevTools, local testing environments
Input Handling: Validation helpers for phone numbers, LinkedIn URLs, and name formatting
API Knowledge: ChatGPT token management, fetch/AJAX calls, CORS, .env security
Legal Compliance: Privacy Policy, Terms of Use, and disclaimers in footer
🔮 Final Thoughts
This project started as a coding challenge and turned into a full-blown product. It's not just a resume builder—it's a tool specifically tailored to help UNC Kenan-Flagler students build elite-level resumes faster with the help of AI.
Along the way, I picked up real-world skills in frontend/backend dev, design systems, cloud hosting, prompt engineering, debugging, and product deployment. I now understand how to turn an idea into a real tool that solves a problem.
And this is just the beginning.
Stay tuned — GPT Mode is live.
Check it out: deloresumegpt.vercel.app
✨ Features That Make It Awesome
📊 Visual Indicators
Colored progress bar to track character usage in real-time
Red/yellow/green state changes with disabled “Add” buttons once the max is reached
🖋️ Resume Content Management
Add/remove Experience and Leadership entries (max of 6 combined)
Add/remove Honors and Awards (max of 4)
Honors section smartly adjusts: appears under Education if <= 1, or becomes its own block if > 1
💡 AI Integration
Paste LinkedIn info and auto-convert to Kenan-Flagler style using GPT
Enter role + company + summary, then click a button to generate 3 perfectly formatted bullet points
GPT also checks and fixes name formatting (e.g., "Cooper Evan Delo" ➔ "Cooper E. Delo")
🌐 Fully Synced Workflow
React state (formData) updates live across inputs and preview
One-click Generate Resume button creates a downloadable Word doc with filename: Firstname_Lastname_Resume_Date.docx
📄 Formatting Accuracy
Bullet points use perfect spacing and character count
Black underlined section headers, italicized sublabels, bolded titles—all locked to the Kenan-Flagler visual rules
🚀 Deployment Setup
Backend: Flask on Render
Frontend: React on Vercel
Seamless communication via fetch API
🧰 Tools and Technologies Used
Languages: Python, JavaScript, HTML, CSS
Frameworks/Libraries: React, Flask, Tailwind CSS
AI Tools: ChatGPT API, Cursor AI
Design: Figma, Google Fonts
DevOps: GitHub, Vercel (frontend), Render (backend), dotenv
Debugging: Chrome DevTools, local testing environments
Input Handling: Validation helpers for phone numbers, LinkedIn URLs, and name formatting
API Knowledge: ChatGPT token management, fetch/AJAX calls, CORS, .env security
Legal Compliance: Privacy Policy, Terms of Use, and disclaimers in footer
🔮 Final Thoughts
This project started as a coding challenge and turned into a full-blown product. It's not just a resume builder—it's a tool specifically tailored to help UNC Kenan-Flagler students build elite-level resumes faster with the help of AI.
Along the way, I picked up real-world skills in frontend/backend dev, design systems, cloud hosting, prompt engineering, debugging, and product deployment. I now understand how to turn an idea into a real tool that solves a problem.
And this is just the beginning.
Stay tuned — GPT Mode is live.
Check it out: deloresumegpt.vercel.app
✨ Features That Make It Awesome
📊 Visual Indicators
Colored progress bar to track character usage in real-time
Red/yellow/green state changes with disabled “Add” buttons once the max is reached
🖋️ Resume Content Management
Add/remove Experience and Leadership entries (max of 6 combined)
Add/remove Honors and Awards (max of 4)
Honors section smartly adjusts: appears under Education if <= 1, or becomes its own block if > 1
💡 AI Integration
Paste LinkedIn info and auto-convert to Kenan-Flagler style using GPT
Enter role + company + summary, then click a button to generate 3 perfectly formatted bullet points
GPT also checks and fixes name formatting (e.g., "Cooper Evan Delo" ➔ "Cooper E. Delo")
🌐 Fully Synced Workflow
React state (formData) updates live across inputs and preview
One-click Generate Resume button creates a downloadable Word doc with filename: Firstname_Lastname_Resume_Date.docx
📄 Formatting Accuracy
Bullet points use perfect spacing and character count
Black underlined section headers, italicized sublabels, bolded titles—all locked to the Kenan-Flagler visual rules
🚀 Deployment Setup
Backend: Flask on Render
Frontend: React on Vercel
Seamless communication via fetch API
🧰 Tools and Technologies Used
Languages: Python, JavaScript, HTML, CSS
Frameworks/Libraries: React, Flask, Tailwind CSS
AI Tools: ChatGPT API, Cursor AI
Design: Figma, Google Fonts
DevOps: GitHub, Vercel (frontend), Render (backend), dotenv
Debugging: Chrome DevTools, local testing environments
Input Handling: Validation helpers for phone numbers, LinkedIn URLs, and name formatting
API Knowledge: ChatGPT token management, fetch/AJAX calls, CORS, .env security
Legal Compliance: Privacy Policy, Terms of Use, and disclaimers in footer
🔮 Final Thoughts
This project started as a coding challenge and turned into a full-blown product. It's not just a resume builder—it's a tool specifically tailored to help UNC Kenan-Flagler students build elite-level resumes faster with the help of AI.
Along the way, I picked up real-world skills in frontend/backend dev, design systems, cloud hosting, prompt engineering, debugging, and product deployment. I now understand how to turn an idea into a real tool that solves a problem.
And this is just the beginning.
Stay tuned — GPT Mode is live.
Check it out: deloresumegpt.vercel.app
