A full-featured, modern job application platform with responsive multi-step forms, real-time validation, resume upload, and email notifications — built with Node.js, MongoDB, and Tailwind CSS.
- Modern UI with Tailwind CSS and icons
- Multi-step form wizard with progress indicators
- Real-time validation and error feedback
- Drag & drop resume upload (PDF only)
- Inline resume preview before submission
- Animated confirmation screen after successful submission
- Fully responsive (mobile-first)
- Node.js + Express REST API
- MongoDB for storing applicant metadata
- Multer for resume upload handling (max 5MB, PDF only)
- Sends 2 emails per submission:
- 📩 To HR with resume attached
- ✅ To applicant as confirmation
- Sanitizes inputs and uses proper MIME filtering
| Feature | Description |
|---|---|
| ✅ Progress Tracker | Step-based wizard with animation and bar |
| ✍️ Form Enhancements | Focus states, icons, styled inputs, date pickers |
| 📎 File Upload Redesign | Drag & drop, styled box, size validation |
| ✅ Success State | Green check animation, message & reset option |
| Layer | Tech |
|---|---|
| Frontend | HTML, JavaScript, Tailwind CSS |
| Backend | Node.js, Express.js |
| Database | MongoDB + Mongoose |
| Nodemailer + Gmail SMTP | |
| Upload | Multer (PDF file handler) |
git clone https://github.com/projoynaidu-cmd/job-application-form.git
cd job-application-formcd backend
npm installCreate a .env file:
MONGO_URI=your_mongo_uri_here
PORT=5000
EMAIL_USER=[email protected]
EMAIL_PASS=your_gmail_app_password
EMAIL_TO=[email protected]✅ Use App Passwords if using Gmail.
Then run the server:
node app.jsYou should see:
MongoDB connected
Server running on port 5000
cd ../frontendThen open index.html in your browser — or use Live Server in VS Code.
job-application-system/
├── frontend/
│ ├── index.html # Multi-step job form
│ ├── assets/ # Images, icons
│ └── styles/ # Optional custom CSS
├── backend/
│ ├── models/ # Mongoose schemas
│ ├── uploads/ # Uploaded resumes
│ └── app.js # Express server
├── .gitignore
├── .env # Not committed
└── README.md
- HR Notification: sent to
EMAIL_TO, with full applicant data + PDF resume attached. - User Confirmation: sent to the applicant’s email with a thank-you message.
Emails are sent using Nodemailer via Gmail SMTP.
- 🟢 Node.js + Express
- 🌿 MongoDB + Mongoose
- 🎨 Tailwind CSS 3.x
- 📧 Nodemailer
- 📂 Multer
- 🔒 dotenv, CORS, and validation middleware
You can add screenshots here if you'd like to show the UI visually:
- Admin dashboard to view applicants
- Resume parsing and search
- Application status tracking
- Dark mode toggle
- Deploy on Vercel + Render
MIT © 2025 Projoy Naidu
This project is maintained by VueNexus — a free AI-powered Vue.js initiative for modern frontend tools.