🧠 ATS Resume Builder

A modern, ATS-optimized resume builder built with Next.js, React, and Tailwind CSS — designed to help users create professional resumes that achieve 95%+ ATS (Applicant Tracking System) compatibility.

This project automatically structures resume data in an ATS-friendly format, ensuring recruiters and automated systems can easily parse the content.

Resume Builder	ATS Score Result

✅ Screenshots showing real-time resume creation and an ATS score of 95/100 from Enhancv Resume Checker.

• 🧩 Dynamic Resume Form – Edit your resume data in real time with an intuitive form.
• ⚡ Live Preview – Instantly see how your resume looks as you type.
• 🧾 ATS Optimization – Structured sections and clean formatting improve ATS readability.
• 🔄 Drag & Drop Sections – Reorder sections such as Work Experience, Projects, and Skills.
• 💾 Save & Load Data – Save progress locally or reload existing data anytime.
• 🖨️ Print / Export PDF – Download your resume directly with one click.
• 🎨 Responsive Design – Built with TailwindCSS for modern, mobile-friendly UI.
• 🧠 Default Resume Template – Includes sample data to help you get started quickly.

src/
├── app/
│   ├── layout.js           # Application layout
│   └── page.jsx            # Main resume builder page
├── components/
│   ├── form/               # Form inputs and data collection components
│   ├── hero/               # Intro or header section
│   ├── meta/               # SEO and metadata
│   ├── preview/            # Resume preview UI
│   └── utility/            # Helper functions (DateRange, WinPrint, builder, etc.)
├── hooks/
│   └── useKeyboardShortcut.js
├── styles/
│   └── globals.css
public/
└── assets/
├── 1st.png             # Resume Builder UI screenshot
└── 2nd.png             # Enhancv ATS score screenshot

This project was tested using Enhancv Resume Checker and achieved a score of 95/100.

Reasons for high ATS compatibility:

1. 🧱 Structured HTML hierarchy for every resume section (Experience, Skills, Education, etc.)
2. 🏷️ Semantic headings (<h2>, <h3>) improve parsing by Applicant Tracking Systems
3. 🧾 Minimal use of images/tables, ensuring clean text extraction
4. 🔍 Consistent section naming — matches ATS keyword patterns (e.g., “Work Experience”, “Education”, “Skills”)
5. 📄 PDF output from structured DOM, not images, ensuring full text readability
6. 🧠 Keyword-rich templates aligned with top-performing resumes
7. ✍️ ATS-safe fonts & minimal styling for parsing accuracy across readers

• Personal Information – Name, email, phone, address, and profile photo
• Social Media – Links to GitHub, LinkedIn, and portfolio sites
• Summary – Professional overview or objective statement
• Education – Institution, degree, start and end dates
• Work Experience – Companies, roles, achievements, and project impact
• Projects – Key personal or professional projects
• Technical Skills – Programming languages, frameworks, tools
• Soft Skills – Communication, leadership, problem-solving, etc.
• Languages – Spoken and written languages
• Certifications – Relevant certifications and completion years

# Clone the repository
git clone https://github.com/zeinabtarek/atsresume.git

# Navigate to the project directory
cd atsresume

# Install dependencies
yarn install
# or
npm install

# Run in development mode
yarn dev
# or
npm run dev

# Visit the app in your browser
http://localhost:3000

• Added drag and drop functionality for reordering resume sections
• Improved ATS structure and section parsing
• Integrated real-time live preview
• Added PDF export and local data saving

The main goal of ATS Resume Builder is to help job seekers and developers create resumes that are both visually appealing and highly ATS-compliant, increasing visibility and interview chances.

You can easily deploy the project using:

vercel

netlify deploy

If you find this project useful, please ⭐ star this repository and share your thoughts! Contributions, PRs, and ideas are always welcome.

📧 zeinab.tarek@codeforg.com 🌍 https://bold.pro/my/zeinab-tarek-230501145327 🐙 GitHub 💼 LinkedIn