🎯 Job Portal

A Modern Full-Stack Job Management Platform

Connecting Job Seekers with Opportunities • Empowering Employers with Tools

Features • Installation • Documentation • Contributing

🚀 Quick Start

# Clone the repository
git clone https://github.com/Abhay-0103/Job-Portal-Project.git
cd Job-Portal-Project

# Backend setup
cd backend
npm install
# Configure .env file (see Installation section)
npm run dev

# Frontend setup (new terminal)
cd frontend
npm install
npm run dev

# Access the app at http://localhost:5173

Prerequisites: Node.js v14+, MongoDB, npm v6+

📋 Table of Contents

Overview
- Project Goals
- Target Users
Features
- For Job Seekers
- For Employers
- Common Features
Tech Stack
- Backend
- Frontend
- Architecture & Design Patterns
Project Structure
- File Count Summary
Core Features Breakdown
Dependencies
Design System
Performance Optimizations
Security Features
Installation
- Prerequisites
- Step-by-Step Guide
Environment Variables
Usage
- Development Mode
- Production Build
- Available Scripts
API Documentation
- Authentication Endpoints
- Job Endpoints
- Application Endpoints
- User Endpoints
Deployment Guide
Testing
Browser Support
Troubleshooting
Future Enhancements
FAQ
Additional Resources
Contributing
Author
License
Acknowledgments
Support
Project Status

🌟 Overview

Job Portal is a comprehensive full-stack MERN (MongoDB, Express, React, Node.js) application designed to revolutionize the job search and recruitment process. Built as part of the BTI College Project, this platform seamlessly connects job seekers with employers, offering an intuitive interface and powerful features for modern hiring needs.

🎯 Project Goals

Create a user-friendly platform for job seekers to find and apply for jobs
Provide employers with efficient tools to manage job postings and applicants
Implement secure authentication and role-based access control
Build a scalable and maintainable codebase following industry best practices
Deliver a responsive, modern UI that works across all devices

👥 Target Users

Job Seekers - Individuals searching for employment opportunities
Employers - Companies and recruiters posting job openings
Administrators - Platform managers (future enhancement)

Key Highlights

🔐 Secure Authentication - JWT-based authentication with bcrypt password hashing
📊 Analytics Dashboard - Real-time insights and metrics for employers
💼 Job Management - Full CRUD operations for job postings with status control
📝 Application Tracking - Comprehensive application management system
⭐ Save Jobs - Bookmark and organize favorite job opportunities
👤 Profile Management - Rich user profiles with image upload support
🎨 Modern UI/UX - Built with TailwindCSS and Framer Motion animations
📱 Responsive Design - Mobile-first approach for all devices
🚀 Real-time Notifications - Toast notifications for user actions
🔍 Advanced Search - Filter jobs by title, location, type, and more

✨ Features

For Job Seekers 👨‍💼

Job Discovery & Application

🔍 Smart Job Search - Search jobs by title, keywords, location, and company
🎯 Advanced Filters - Filter by job type (Full-time, Part-time, Contract, Internship)
📋 Job Details - View comprehensive job descriptions, requirements, and salary
📄 Easy Apply - Submit applications with resume upload and cover letter
📊 Application Tracking - Monitor all your applications and their status in one place
🔔 Status Updates - Track application progress (Applied, In Review, Accepted, Rejected)

Profile & Preferences

⭐ Save Jobs - Bookmark favorite opportunities for quick access later
👤 Profile Management - Create and customize your professional profile
🖼️ Profile Picture - Upload and update your profile picture
📝 Resume Upload - Attach your resume to job applications
💼 Experience & Skills - Showcase your qualifications and expertise

User Experience

📱 Responsive Dashboard - Access your dashboard from any device
🔔 Toast Notifications - Get instant feedback on all actions
🎨 Modern Interface - Clean, intuitive design for better user experience
⚡ Fast Loading - Optimized performance for quick page loads

For Employers 🏢

Job Management

➕ Post Jobs - Create detailed job listings with rich text descriptions
✏️ Edit Listings - Update job details anytime
🗑️ Delete Jobs - Remove outdated or filled positions
🔄 Job Status Control - Toggle job postings between open/closed states
📝 Job Preview - Preview how your job posting will appear to applicants
🏷️ Categorize Jobs - Add job type, location, salary range, and requirements

Applicant Management

👥 Review Applications - Access and evaluate all candidate applications
� Application Dashboard - See all applicants in a centralized view
🎯 Filter Applicants - Sort by application date, status, or position
📄 View Resumes - Download and review applicant resumes
✅ Update Status - Change application status (Applied, In Review, Accepted, Rejected)
👤 Applicant Profiles - View detailed candidate information in modal

Analytics & Insights

📈 Dashboard Analytics - Comprehensive metrics and statistics
📊 Key Metrics:
- Total jobs posted
- Total applications received
- Active vs closed jobs
- Applications by status
- Recent application trends
📉 Visual Data - Charts and graphs for better insights (future enhancement)

Company Profile

🏢 Company Profile - Showcase your organization professionally
�️ Company Logo - Upload and display your company logo
📝 About Company - Add company description and information
🌐 Contact Details - Display company contact information

Common Features 🌐

Authentication & Security

🔐 Secure Login - JWT-based authentication system
🆕 User Registration - Easy signup with role selection (Job Seeker / Employer)
🔒 Password Security - Bcrypt password hashing with salt rounds
🚪 Logout - Secure session termination
🛡️ Protected Routes - Role-based access control for different user types

Navigation & Layout

🧭 Clean Navigation - Intuitive navbar with quick access to key features
📱 Mobile Responsive - Seamless experience on all screen sizes
🎯 Breadcrumbs - Easy navigation tracking (future enhancement)
🔍 Search Bar - Global search functionality

Technical Features

⚡ Fast Performance - Optimized with Vite build tool
🎨 Smooth Animations - Framer Motion for delightful interactions
🔄 Real-time Updates - Instant UI updates without page refresh
💾 Data Persistence - Session management with localStorage
🎯 Error Handling - Comprehensive error messages and validation

🛠 Tech Stack

Backend 🔧

Technology	Version	Purpose	Documentation
Node.js	Latest	JavaScript runtime environment	Docs
Express.js	5.1.0	Fast, minimalist web framework	Docs
MongoDB	-	NoSQL document database	Docs
Mongoose	8.19.2	MongoDB object modeling & validation	Docs
JWT	9.0.2	Secure token-based authentication	Docs
Bcrypt.js	3.0.2	Password hashing & encryption	Docs
Multer	2.0.2	Multipart/form-data file upload	Docs
Cors	2.8.5	Cross-origin resource sharing	Docs
Dotenv	17.2.3	Environment variable loader	Docs
Nodemon	3.1.10	Development auto-restart utility	Docs

Frontend 💻

Technology	Version	Purpose	Documentation
React	19.1.1	Component-based UI library	Docs
Vite	7.1.7	Next-gen frontend build tool	Docs
TailwindCSS	4.1.14	Utility-first CSS framework	Docs
React Router DOM	7.7.0	Declarative routing for React	Docs
Axios	1.10.0	Promise-based HTTP client	Docs
Framer Motion	12.23.24	Production-ready animations	Docs
Lucide React	0.546.0	Beautiful & consistent icons (500+)	Docs
React Hot Toast	2.6.0	Lightweight toast notifications	Docs
Moment.js	2.30.1	Parse, validate, manipulate dates	Docs
ESLint	9.36.0	Code quality & linting tool	Docs

Architecture & Design Patterns 🏗️

Aspect	Implementation	Description
Architecture Pattern	MVC (Model-View-Controller)	Separates data, logic, and presentation
API Design	RESTful API	Standard HTTP methods & status codes
Authentication	JWT with HTTP-only cookies	Secure token-based auth
State Management	React Context API	Global state for user auth
Database	NoSQL (MongoDB)	Document-based flexible schema
Styling Approach	Utility-first CSS	TailwindCSS atomic classes
File Structure	Feature-based	Organized by functionality
Code Organization	Modular components	Reusable, maintainable code
API Communication	Axios with interceptors	Centralized HTTP requests
Routing	Client-side routing	React Router DOM
Form Handling	Controlled components	React state management
Error Handling	Try-catch with middleware	Graceful error responses

Development Tools 🛠️

Tool	Purpose
VS Code	Primary code editor
Postman	API testing & documentation
MongoDB Compass	Database GUI & management
Git	Version control system
GitHub	Code repository & collaboration
Chrome DevTools	Frontend debugging
React DevTools	Component debugging

📁 Project Structure

Click to expand complete project structure

job-portal/
│
├── 📂 backend/                              # Backend API Server (Node.js + Express)
│   ├── 📄 .env                              # Environment variables (not in repo)
│   ├── 📄 .gitignore                        # Git ignore rules
│   ├── 📄 package.json                      # Backend dependencies & scripts
│   ├── 📄 server.js                         # Entry point - Express server setup
│   │
│   ├── 📂 config/                           # Configuration Files
│   │   └── 📄 db.js                         # MongoDB connection & database setup
│   │
│   ├── 📂 controllers/                      # Request Handlers & Business Logic
│   │   ├── 📄 analyticsController.js        # Analytics data & metrics management
│   │   ├── 📄 applicationController.js      # Job application CRUD operations
│   │   ├── 📄 authController.js             # User registration, login & authentication
│   │   ├── 📄 jobController.js              # Job posting CRUD & search operations
│   │   ├── 📄 savedJobController.js         # Saved/bookmarked jobs functionality
│   │   └── 📄 userController.js             # User profile & data management
│   │
│   ├── 📂 middlewares/                      # Custom Middleware Functions
│   │   ├── 📄 authMiddleware.js             # JWT token verification & route protection
│   │   └── 📄 uploadMiddleware.js           # Multer configuration for file uploads
│   │
│   ├── 📂 models/                           # Mongoose Database Schemas
│   │   ├── 📄 Analytics.js                  # Analytics data schema
│   │   ├── 📄 Application.js                # Job application schema with status tracking
│   │   ├── 📄 Job.js                        # Job posting schema with employer reference
│   │   ├── 📄 SavedJob.js                   # Saved jobs schema with user reference
│   │   └── 📄 User.js                       # User account schema (jobSeeker/employer)
│   │
│   ├── 📂 routes/                           # API Route Definitions
│   │   ├── 📄 analyticsRoutes.js            # GET /api/analytics/* endpoints
│   │   ├── 📄 applicationRoutes.js          # /api/applications/* endpoints
│   │   ├── 📄 authRoutes.js                 # POST /api/auth/register, /login endpoints
│   │   ├── 📄 jobRoutes.js                  # /api/jobs/* CRUD endpoints
│   │   ├── 📄 savedJobsRoutes.js            # /api/save-jobs/* endpoints
│   │   └── 📄 userRoutes.js                 # /api/user/profile endpoints
│   │
│   └── 📂 uploads/                          # Directory for user uploaded files
│       └── (resumes, images, documents)      # Multer storage location
│
│
├── 📂 frontend/                             # Frontend Application (React + Vite)
│   ├── 📄 .gitignore                        # Git ignore rules for frontend
│   ├── 📄 eslint.config.js                  # ESLint configuration & rules
│   ├── 📄 index.html                        # HTML entry point with Vite
│   ├── 📄 package.json                      # Frontend dependencies & scripts
│   ├── 📄 vite.config.js                    # Vite build & dev server configuration
│   ├── 📄 README.md                         # Frontend-specific documentation
│   │
│   ├── 📂 public/                           # Static Public Assets
│   │   └── (images, icons, fonts)           # Publicly accessible files
│   │
│   └── 📂 src/                              # Source Code Directory
│       ├── 📄 App.jsx                       # Root application component with routing
│       ├── 📄 main.jsx                      # React DOM entry point
│       ├── 📄 index.css                     # Global TailwindCSS styles & custom CSS
│       │
│       ├── 📂 assets/                       # Static Assets (Images, Icons, Media)
│       │   └── (logos, banners, icons)       # Project-specific images
│       │
│       ├── 📂 components/                   # Reusable UI Components
│       │   ├── 📄 LoadingSpinner.jsx        # Loading state spinner component
│       │   ├── 📄 StatusBadge.jsx           # Application status badge component
│       │   │
│       │   ├── 📂 Cards/                    # Card-based UI Components
│       │   │   ├── 📄 ApplicantDashboardCard.jsx     # Applicant info card for employer
│       │   │   ├── 📄 ApplicantProfilPreview.jsx     # Applicant profile modal/preview
│       │   │   ├── 📄 JobCard.jsx                    # Job listing card component
│       │   │   ├── 📄 JobDashboardCard.jsx           # Job metrics card for dashboard
│       │   │   └── 📄 JobPostingPreview.jsx          # Job posting preview card
│       │   │
│       │   ├── 📂 Input/                    # Form Input Components
│       │   │   ├── 📄 InputField.jsx        # Reusable text input with validation
│       │   │   ├── 📄 SalaryRangeSlider.jsx # Salary range slider component
│       │   │   ├── 📄 SelectField.jsx       # Dropdown select field component
│       │   │   └── 📄 TextareaField.jsx     # Multiline text input component
│       │   │
│       │   └── 📂 layout/                   # Layout & Structure Components
│       │       ├── 📄 DashboardLayout.jsx   # Dashboard page wrapper layout
│       │       ├── 📄 Navbar.jsx            # Top navigation bar with auth
│       │       └── 📄 ProfileDropdown.jsx   # User profile dropdown menu
│       │
│       ├── 📂 context/                      # React Context API Providers
│       │   └── 📄 AuthContext.jsx           # Global authentication state management
│       │
│       ├── 📂 pages/                        # Page-level Components (Routes)
│       │   │
│       │   ├── 📂 Auth/                     # Authentication Pages
│       │   │   ├── 📄 Login.jsx             # User login page
│       │   │   └── 📄 SignUp.jsx            # User registration page (role selection)
│       │   │
│       │   ├── 📂 Employer/                 # Employer-specific Pages
│       │   │   ├── 📄 ApplicationViewer.jsx         # View & manage job applicants
│       │   │   ├── 📄 EditProfileDetails.jsx        # Edit company/employer profile
│       │   │   ├── 📄 EmployerDashboard.jsx         # Employer analytics dashboard
│       │   │   ├── 📄 EmployerProfilePage.jsx       # View company profile page
│       │   │   ├── 📄 JobPostingForm.jsx            # Create/edit job posting form
│       │   │   └── 📄 ManageJobs.jsx                # Job listings management page
│       │   │
│       │   ├── 📂 JobSeeker/                # Job Seeker-specific Pages
│       │   │   ├── 📄 JobDetails.jsx                # Individual job detail page
│       │   │   ├── 📄 JobSeekerDashboard.jsx        # Job search & browse dashboard
│       │   │   ├── 📄 SavedJobs.jsx                 # Saved/bookmarked jobs page
│       │   │   ├── 📄 UserProfile.jsx               # Job seeker profile page
│       │   │   │
│       │   │   └── 📂 components/           # Job Seeker-specific Components
│       │   │       ├── 📄 FilterContent.jsx         # Advanced job search filters
│       │   │       └── 📄 SearchHeader.jsx          # Search bar with filters
│       │   │
│       │   └── 📂 LandingPage/              # Public Landing Page
│       │       ├── 📄 LandindPage.jsx       # Main landing page component
│       │       │
│       │       └── 📂 components/           # Landing Page Sections
│       │           ├── 📄 Analytics.jsx     # Platform statistics section
│       │           ├── 📄 Features.jsx      # Key features showcase
│       │           ├── 📄 Footer.jsx        # Footer with links & info
│       │           ├── 📄 Header.jsx        # Landing page header/navigation
│       │           └── 📄 Hero.jsx          # Hero section with CTA
│       │
│       ├── 📂 routes/                       # Route Configuration & Protection
│       │   └── 📄 ProtectedRoute.jsx        # HOC for authenticated route protection
│       │
│       └── 📂 utils/                        # Utility Functions & Helpers
│           ├── 📄 apiPaths.js               # Centralized API endpoint constants
│           ├── 📄 axiosInstance.js          # Pre-configured Axios instance with interceptors
│           ├── 📄 data.js                   # Static data & mock constants
│           ├── 📄 helper.js                 # Common helper functions (date, format, etc.)
│           └── 📄 uploadImage.js            # Image upload utility functions
│
└── 📄 README.md                             # Main project documentation (this file)

📊 File Count Summary

Category	Count	Description
Backend Controllers	6	Business logic handlers
Backend Models	5	Database schemas
Backend Routes	6	API endpoint definitions
Backend Middlewares	2	Custom middleware functions
Frontend Pages	13	Main page components
Frontend Components	18	Reusable UI components
Frontend Utilities	5	Helper functions
Configuration Files	7	Project & build configs
Total Files	~62+	Excluding node_modules & uploads

🚀 Installation

Prerequisites

Ensure you have the following installed on your system:

Software	Version	Download Link
Node.js	v14.0+	nodejs.org
npm	v6.0+	Included with Node.js
MongoDB	v4.4+	mongodb.com
Git	Latest	git-scm.com

Step 1: Clone the Repository

git clone https://github.com/Abhay-0103/Job-Portal-Project.git
cd Job-Portal-Project

Step 2: Backend Setup

# Navigate to backend directory
cd backend

# Install all dependencies
npm install

# Create .env file in backend directory
touch .env  # On Windows: type nul > .env

Configure your .env file:

# Server Configuration
PORT=5000
NODE_ENV=development

# Database Configuration
MONGODB_URI=mongodb://localhost:27017/job-portal
# Or use MongoDB Atlas:
# MONGODB_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/job-portal

# JWT Configuration
JWT_SECRET=your_super_secret_jwt_key_here_change_this
JWT_EXPIRE=7d

# CORS Configuration (Optional)
CORS_ORIGIN=http://localhost:5173

# Start the backend server
npm start

# For development with auto-restart
npm run dev

✅ Backend should be running on http://localhost:5000

Step 3: Frontend Setup

Open a new terminal window/tab, then:

# Navigate to frontend directory (from project root)
cd frontend

# Install all dependencies
npm install

# (Optional) Create .env file if you need custom API URL
touch .env  # On Windows: type nul > .env

Configure your .env file (if needed):

# API Configuration
VITE_API_URL=http://localhost:5000

# Start the development server
npm run dev

✅ Frontend should be running on http://localhost:5173

Step 4: Access the Application

Service	URL	Description
Frontend	http://localhost:5173	React application
Backend API	http://localhost:5000	Express API server
Uploads	http://localhost:5000/uploads	Static file serving

Quick Start Script (Optional)

Create a file start.sh (Linux/Mac) or start.bat (Windows) in the project root:

start.sh (Linux/Mac):

#!/bin/bash
cd backend && npm install && npm run dev &
cd ../frontend && npm install && npm run dev

start.bat (Windows):

@echo off
start cmd /k "cd backend && npm install && npm run dev"
start cmd /k "cd frontend && npm install && npm run dev"

🔐 Environment Variables

Backend (.env)

Variable	Description	Example
`PORT`	Server port number	`5000`
`MONGODB_URI`	MongoDB connection string	`mongodb://localhost:27017/job-portal`
`JWT_SECRET`	Secret key for JWT signing	`your_secret_key_here`
`JWT_EXPIRE`	Token expiration time	`7d` (7 days)
`NODE_ENV`	Environment mode	`development` or `production`

Frontend (.env) - Optional

Variable	Description	Example
`VITE_API_URL`	Backend API base URL	`http://localhost:5000`

💻 Usage

Development Mode

Backend Server

cd backend

# Start with Node
npm start
# or
node server.js

# Start with Nodemon (auto-restart on changes)
npm run dev

Frontend Application

cd frontend

# Start development server with hot reload
npm run dev

# Run ESLint
npm run lint

Production Build

Backend

cd backend

# Set environment to production in .env
# NODE_ENV=production

# Start production server
npm start

Frontend

cd frontend

# Build for production
npm run build

# Preview production build locally
npm run preview

# Output will be in: frontend/dist/

Available Scripts

Backend Scripts

Command	Description
`npm start`	Start the server with Node
`npm run dev`	Start with Nodemon (auto-restart)

Frontend Scripts

Command	Description
`npm run dev`	Start Vite dev server
`npm run build`	Build for production
`npm run preview`	Preview production build
`npm run lint`	Run ESLint

Default Ports

Frontend Development: http://localhost:5173
Backend API: http://localhost:5000
MongoDB: mongodb://localhost:27017

📚 API Documentation

Base URL

http://localhost:5000/api

Authentication Endpoints

Register New User

POST /api/auth/register
Content-Type: application/json

{
  "name": "John Doe",
  "email": "john@example.com",
  "password": "password123",
  "role": "jobSeeker" // or "employer"
}

Login

POST /api/auth/login
Content-Type: application/json

{
  "email": "john@example.com",
  "password": "password123"
}

Response: {
  "token": "jwt_token_here",
  "user": { ... }
}

Get Current User

GET /api/auth/me
Authorization: Bearer {token}

Upload Image

POST /api/auth/upload-image
Content-Type: multipart/form-data
Authorization: Bearer {token}

Form Data:
  image: [file]

Response: {
  "imageUrl": "http://localhost:5000/uploads/filename.jpg"
}

Job Endpoints

Get All Jobs

GET /api/jobs
Query Parameters:
  - search: string (optional)
  - location: string (optional)
  - type: string (optional)

Get Jobs by Employer

GET /api/jobs/get-jobs-employer
Authorization: Bearer {token}

Get Job by ID

GET /api/jobs/:id

Create New Job (Employer Only)

POST /api/jobs
Authorization: Bearer {token}
Content-Type: application/json

{
  "title": "Full Stack Developer",
  "company": "Tech Corp",
  "location": "Remote",
  "type": "Full-time",
  "description": "Job description here",
  "requirements": ["Node.js", "React"],
  "salary": "80000-100000"
}

Update Job (Employer Only)

PUT /api/jobs/:id
Authorization: Bearer {token}
Content-Type: application/json

{
  "title": "Updated Title",
  ...
}

Delete Job (Employer Only)

DELETE /api/jobs/:id
Authorization: Bearer {token}

Toggle Job Status (Open/Closed)

PUT /api/jobs/:id/toggle-close
Authorization: Bearer {token}

Application Endpoints

Get User Applications

GET /api/applications
Authorization: Bearer {token}

Submit Application

POST /api/applications
Authorization: Bearer {token}
Content-Type: multipart/form-data

Form Data:
  jobId: string
  coverLetter: string
  resume: [file]

Get Application by ID

GET /api/applications/:id
Authorization: Bearer {token}

Update Application Status

PUT /api/applications/:id
Authorization: Bearer {token}
Content-Type: application/json

{
  "status": "accepted" // or "rejected", "pending"
}

Saved Jobs Endpoints

Get All Saved Jobs

GET /api/save-jobs
Authorization: Bearer {token}

Save a Job

POST /api/save-jobs
Authorization: Bearer {token}
Content-Type: application/json

{
  "jobId": "job_id_here"
}

Remove Saved Job

DELETE /api/save-jobs/:id
Authorization: Bearer {token}

User Endpoints

Get User Profile

GET /api/user/profile
Authorization: Bearer {token}

Update User Profile

PUT /api/user/profile
Authorization: Bearer {token}
Content-Type: application/json

{
  "name": "Updated Name",
  "bio": "User bio",
  "skills": ["JavaScript", "React"]
}

Analytics Endpoints (Employer Only)

Get Analytics Data

GET /api/analytics
Authorization: Bearer {token}

Response: {
  "totalJobs": 10,
  "totalApplications": 50,
  "activeJobs": 8,
  "pendingApplications": 20
}

Response Status Codes

Status Code	Description
`200`	Success
`201`	Created
`400`	Bad Request
`401`	Unauthorized
`403`	Forbidden
`404`	Not Found
`500`	Internal Server Error

Authentication

Most endpoints require JWT authentication. Include the token in the Authorization header:

Authorization: Bearer YOUR_JWT_TOKEN_HERE

🎯 Future Enhancements

Version 2.0 Roadmap 🚀

High Priority Features

Email Notifications - Automated emails for application updates and job matches
- Welcome emails for new users
- Application submission confirmations
- Status change notifications
- Daily/weekly job recommendations
Real-time Chat - WebSocket-based messaging between employers and candidates
- One-on-one chat functionality
- Message history and notifications
- File sharing in chat
- Online status indicators
Advanced Search & Filters - Enhanced job discovery
- Salary range filters
- Experience level filtering
- Skills-based matching
- Company size preferences
- Remote work options
Resume Builder - Integrated resume creation tool
- Multiple template options
- PDF export functionality
- Auto-fill from profile data
- Preview before download

Medium Priority Features

Video Interview Integration - Built-in video calling
- Schedule video interviews
- Zoom/Google Meet integration
- Interview recording (with consent)
- Automated reminders
AI-Powered Recommendations - Machine learning job matching
- Personalized job suggestions
- Skills gap analysis
- Career path recommendations
- Salary predictions
Interview Scheduling - Automated interview coordination
- Calendar integration
- Availability management
- Time zone handling
- Automated reminders
Mobile Application - Native mobile apps
- React Native implementation
- iOS and Android support
- Push notifications
- Offline mode support

Low Priority / Future Enhancements

Community Requested Features

Performance monitoring dashboard
Browser extension for job hunting
Chrome extension for one-click applications
Automated resume parsing
Background verification integration
API for third-party integrations

🚢 Deployment Guide

Deploying Backend (Node.js + Express)

Option 1: Heroku

Prepare for Deployment

# Login to Heroku
heroku login

# Create new Heroku app
heroku create your-job-portal-api

# Add MongoDB Atlas
# (Set up MongoDB Atlas and get connection string)

# Set environment variables
heroku config:set JWT_SECRET=your_secret_key
heroku config:set MONGODB_URI=your_mongodb_atlas_uri
heroku config:set NODE_ENV=production

Deploy

# Deploy to Heroku
git push heroku main

# View logs
heroku logs --tail

Option 2: Railway

Connect GitHub repository to Railway
Add environment variables in Railway dashboard
Deploy automatically on git push

Option 3: DigitalOcean / AWS / Azure

Set up server (Ubuntu 20.04 recommended)
Install dependencies:

# Update system
sudo apt update && sudo apt upgrade -y

# Install Node.js
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

# Install MongoDB
# Or use MongoDB Atlas

# Install PM2 (Process Manager)
sudo npm install -g pm2

Deploy Application:

# Clone repository
git clone https://github.com/Abhay-0103/Job-Portal-Project.git
cd Job-Portal-Project/backend

# Install dependencies
npm install

# Set environment variables
nano .env
# Add all production environment variables

# Start with PM2
pm2 start server.js --name job-portal-api
pm2 save
pm2 startup

Set up Nginx as reverse proxy:

sudo apt install nginx

# Configure Nginx
sudo nano /etc/nginx/sites-available/job-portal

# Add configuration:
server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

# Enable site
sudo ln -s /etc/nginx/sites-available/job-portal /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

Set up SSL with Let's Encrypt:

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d your-domain.com

Deploying Frontend (React + Vite)

Option 1: Vercel (Recommended)

Install Vercel CLI:

npm i -g vercel

Deploy:

cd frontend
vercel

# Production deployment
vercel --prod

Configure Environment Variables:

Add VITE_API_URL in Vercel dashboard
Point to your deployed backend URL

Option 2: Netlify

Build the project:

cd frontend
npm run build

Deploy:

Drag and drop dist folder to Netlify
Or connect GitHub repository
Set build command: npm run build
Set publish directory: dist

Option 3: GitHub Pages

Install gh-pages:

npm install --save-dev gh-pages

Add to package.json:

{
  "homepage": "https://yourusername.github.io/job-portal",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  }
}

Deploy:

npm run deploy

Production Checklist

Backend

Frontend

🧪 Testing Guide

Running Tests

# Backend tests (when implemented)
cd backend
npm test

# Frontend tests (when implemented)
cd frontend
npm test

# E2E tests (when implemented)
npm run test:e2e

Test Coverage

Module	Coverage	Status
Authentication	Manual	✅ Tested
Job Management	Manual	✅ Tested
Applications	Manual	✅ Tested
User Profiles	Manual	✅ Tested
File Uploads	Manual	✅ Tested
Unit Tests	0%	⏳ Planned
Integration Tests	0%	⏳ Planned
E2E Tests	0%	⏳ Planned

Manual Testing Checklist

Authentication & Authorization

User can register as Job Seeker
User can register as Employer
User can login with valid credentials
User cannot login with invalid credentials
JWT token is stored and persists
User can logout successfully
Protected routes redirect to login
Role-based access works correctly

Job Seeker Workflows

Employer Workflows

UI/UX Testing

🔧 Troubleshooting

Common Issues & Solutions

Backend won't start - Port already in use

Error: Error: listen EADDRINUSE: address already in use :::5000

Solution:

# Windows - Find and kill process
netstat -ano | findstr :5000
taskkill /PID <PID> /F

# Linux/Mac - Find and kill process
lsof -ti:5000 | xargs kill -9

# Or change port in .env
PORT=5001

MongoDB connection failed

Error: MongooseServerSelectionError: connect ECONNREFUSED 127.0.0.1:27017

Solutions:

Check if MongoDB is running:

# Windows
net start MongoDB

# Linux
sudo systemctl start mongod

# Mac
brew services start mongodb-community

Verify connection string in .env:

MONGODB_URI=mongodb://localhost:27017/job-portal

Check MongoDB status:

# Linux/Mac
sudo systemctl status mongod

Use MongoDB Atlas if local connection fails

JWT token not persisting

Issue: User gets logged out on page refresh

Solutions:

Check if token is saved to localStorage in AuthContext.jsx
Verify axios interceptors are configured
Clear browser cache and cookies
Check browser console for errors

File upload not working

Error: File upload returns 500 error

Solutions:

Check uploads directory exists in backend
Verify file size limits in uploadMiddleware.js
Check file type validation
Ensure proper multipart/form-data headers

CORS errors in browser

Error: Access to XMLHttpRequest blocked by CORS policy

Solutions:

Verify CORS configuration in server.js:

app.use(cors({
  origin: 'http://localhost:5173',
  credentials: true
}));

Check CORS_ORIGIN in .env:
```
CORS_ORIGIN=http://localhost:5173
```
Ensure frontend URL matches allowed origin

Images not displaying

Issue: Uploaded images show broken link

Solutions:

Verify uploads directory is served as static:

app.use('/uploads', express.static('uploads'));

Check image URL format in database
Verify file permissions on uploads directory
Check network tab for 404 errors

npm install fails

Error: npm ERR! code ERESOLVE

Solutions:

# Clear npm cache
npm cache clean --force

# Delete package-lock.json and node_modules
rm -rf node_modules package-lock.json

# Reinstall
npm install

# Or use legacy peer deps
npm install --legacy-peer-deps

Vite build fails

Error: Build failed with errors

Solutions:

Check for TypeScript/ESLint errors
Update dependencies:
```
npm update
```
Clear Vite cache:
```
rm -rf node_modules/.vite
```
Rebuild:
```
npm run build
```

📈 Performance Optimization Tips

Backend Optimization

Enable compression middleware
Implement database indexing
Use connection pooling
Cache frequently accessed data
Optimize database queries
Use PM2 cluster mode

Frontend Optimization

Code splitting with React.lazy()
Image optimization and lazy loading
Implement service workers
Use React.memo() for expensive components
Optimize bundle size with tree shaking
Enable Gzip compression

📞 FAQ (Frequently Asked Questions)

Q: Can I use this project for commercial purposes? A: Yes, this project is open source under ISC license.

Q: How do I add more user roles? A: Modify the User model in backend/models/User.js and add role-based logic in controllers.

Q: Can I customize the UI design? A: Absolutely! All styling is in TailwindCSS - modify classes or update index.css.

Q: How do I add email notifications? A: Integrate nodemailer in backend and create email templates.

Q: Is this production-ready? A: Core features are stable. Add security enhancements (rate limiting, helmet.js) for production.

Q: Can I contribute to this project? A: Yes! Please read the Contributing section and submit PRs.

🐛 Known Issues

None at the moment. Report issues here

🤝 Contributing

We welcome contributions from the community! Here's how you can help:

How to Contribute

Fork the repository
```
# Click the 'Fork' button on GitHub
```

Clone your fork

git clone https://github.com/YOUR_USERNAME/Job-Portal-Project.git
cd Job-Portal-Project

Create a feature branch
```
git checkout -b feature/AmazingFeature
```

Make your changes and commit

git add .
git commit -m 'Add: AmazingFeature description'

Push to your fork
```
git push origin feature/AmazingFeature
```
Open a Pull Request
- Go to the original repository
- Click "New Pull Request"
- Select your fork and branch
- Describe your changes
- Submit the PR

Contribution Guidelines

✅ Follow the existing code style and conventions
✅ Write clear, descriptive commit messages (use Conventional Commits)
✅ Test your changes thoroughly before submitting
✅ Update documentation for any new features
✅ Add comments for complex logic
✅ Keep pull requests focused on a single feature/fix
✅ Be respectful and constructive in discussions

Commit Message Format

Type: Brief description

Examples:
- Add: User authentication feature
- Fix: Job application submission bug
- Update: TailwindCSS to version 4.1
- Refactor: Job controller logic
- Docs: API documentation updates

👨‍💻 Author

Abhay Singh

Repository: Job-Portal-Project

🔧 Core Features Breakdown

Backend Features

Authentication & Security

✅ JWT-based authentication with HTTP-only cookies
✅ Password hashing using bcrypt (10 salt rounds)
✅ Protected routes with middleware authorization
✅ Role-based access control (Job Seeker / Employer)
✅ Secure file upload with validation

Database Models & Relationships

User Model: Authentication, profile data, role management
Job Model: Job postings with employer reference
Application Model: Job applications with status tracking
SavedJob Model: Bookmarked jobs with user reference
Analytics Model: Platform metrics and statistics

API Features

RESTful API architecture
CORS enabled for cross-origin requests
Error handling middleware
Request validation
File upload support (Multer)
Database connection pooling

Frontend Features

UI/UX Components

Responsive Design: Mobile-first approach with TailwindCSS
Animations: Smooth transitions with Framer Motion
Loading States: Spinner component for async operations
Status Badges: Visual application status indicators
Toast Notifications: Real-time user feedback
Modal Dialogs: Applicant profile preview, confirmations

Page Components

Landing Page: Hero, features, analytics, footer
Authentication: Login, signup with role selection
Job Seeker Dashboard: Job search, filters, saved jobs
Employer Dashboard: Analytics, job management, applicants
Profile Pages: User/company profiles with image upload
Job Management: Create, edit, delete, toggle status

State Management

React Context API for global auth state
Local state management with hooks
Persistent authentication with localStorage
Axios interceptors for token management

📦 Dependencies

Backend Dependencies (Production)

Package	Version	Purpose
`express`	^5.1.0	Web framework for Node.js
`mongoose`	^8.19.2	MongoDB ODM for data modeling
`jsonwebtoken`	^9.0.2	JWT token generation & validation
`bcryptjs`	^3.0.2	Password hashing & comparison
`cors`	^2.8.5	Enable CORS for API requests
`dotenv`	^17.2.3	Environment variable management
`multer`	^2.0.2	File upload middleware

Backend Dependencies (Development)

Package	Version	Purpose
`nodemon`	^3.1.10	Auto-restart server on file changes

Frontend Dependencies (Production)

Package	Version	Purpose
`react`	^19.1.1	Core React library
`react-dom`	^19.1.1	React DOM rendering
`react-router-dom`	^7.7.0	Client-side routing
`axios`	^1.10.0	HTTP client for API requests
`tailwindcss`	^4.1.14	Utility-first CSS framework
`@tailwindcss/vite`	^4.1.14	TailwindCSS Vite plugin
`framer-motion`	^12.23.24	Animation library
`lucide-react`	^0.546.0	Icon library (500+ icons)
`react-hot-toast`	^2.6.0	Toast notification system
`moment`	^2.30.1	Date/time manipulation & formatting

Frontend Dependencies (Development)

Package	Version	Purpose
`vite`	^7.1.7	Next-gen build tool & dev server
`@vitejs/plugin-react`	^5.0.4	Vite plugin for React
`eslint`	^9.36.0	Code linting & quality
`eslint-plugin-react-hooks`	^5.2.0	ESLint rules for React hooks
`eslint-plugin-react-refresh`	^0.4.22	ESLint plugin for React Fast Refresh
`@eslint/js`	^9.36.0	ESLint JavaScript config
`globals`	^16.4.0	Global identifiers for ESLint
`@types/react`	^19.1.16	TypeScript definitions for React
`@types/react-dom`	^19.1.9	TypeScript definitions for React DOM

🎨 Design System

Color Palette

Color	Hex Code	Usage
Primary Blue	`#2563EB`	Primary buttons, links, accents
Secondary Purple	`#9333EA`	Gradients, highlights
Success Green	`#10B981`	Success messages, hired status
Warning Yellow	`#F59E0B`	Pending, interview status
Error Red	`#EF4444`	Errors, rejected status
Gray Scale	`#111827` - `#F9FAFB`	Text, backgrounds, borders

Typography

Font Family: System fonts (Inter, -apple-system, BlinkMacSystemFont)
Headings: Bold, 1.5rem - 2.5rem
Body Text: Regular, 1rem
Small Text: 0.875rem

Component Styling

Border Radius: 0.5rem (rounded-lg)
Shadows: Subtle box-shadows for elevation
Transitions: 200-300ms ease-in-out
Spacing: 4px increment system (Tailwind)

🚀 Performance Optimizations

Backend

✅ Database indexing on frequently queried fields
✅ Connection pooling for MongoDB
✅ Efficient query design with Mongoose
✅ File size limits on uploads (5MB for images)
✅ GZIP compression for responses

Frontend

✅ Code splitting with React.lazy()
✅ Vite's fast HMR (Hot Module Replacement)
✅ Optimized asset bundling
✅ TailwindCSS purging for smaller CSS
✅ Image optimization and lazy loading
✅ Memoization with React.memo() where needed

🔒 Security Features

Implemented Security Measures

Authentication Security
- JWT tokens with expiration (7 days default)
- Secure password hashing with bcrypt
- HTTP-only cookies (prevents XSS attacks)
- Token validation on protected routes
Data Validation
- Input sanitization on all forms
- File type validation for uploads
- Request payload size limits
- Schema validation with Mongoose
Access Control
- Role-based authorization
- Route protection middleware
- User-specific data access
- Employer-only endpoints
Best Practices
- Environment variables for sensitive data
- CORS configuration for allowed origins
- Error handling without exposing internals
- Regular dependency updates

Recommended Additional Security

Rate limiting on API endpoints
HTTPS in production
CSRF protection
Security headers (Helmet.js)
Input sanitization library (express-validator)
SQL injection prevention (already handled by Mongoose)

🧪 Testing

Manual Testing Checklist

Authentication Flow

User registration (Job Seeker & Employer)
User login with valid credentials
Token persistence across sessions
Logout functionality
Protected route access

Job Seeker Features

Employer Features

Future Testing Plans

Unit tests with Jest
Integration tests for API endpoints
E2E tests with Cypress/Playwright
Performance testing
Accessibility testing (WCAG compliance)

📱 Browser Support

Browser	Minimum Version	Support Status
Chrome	Latest 2 versions	✅ Fully Supported
Firefox	Latest 2 versions	✅ Fully Supported
Safari	Latest 2 versions	✅ Fully Supported
Edge	Latest 2 versions	✅ Fully Supported
Opera	Latest 2 versions	✅ Fully Supported
Mobile Safari	iOS 12+	✅ Fully Supported
Chrome Mobile	Android 8+	✅ Fully Supported

📚 Additional Resources

Documentation Links

Helpful Tutorials

🙏 Acknowledgments

🎓 BTI College - For providing the opportunity and resources
💻 Open Source Community - For amazing tools and libraries
📚 Documentation Teams - React, Express, MongoDB, and TailwindCSS
🎨 Design Inspiration - Modern job portal interfaces
👥 Contributors - Thanks to everyone who has contributed to this project
🌟 Icons - Lucide React icon library
🎭 Animations - Framer Motion team

Built With

📞 Support & Contact

If you have any questions or need help with the project:

📧 Email: ab0321054@gmail.com
🐛 Report Issues: GitHub Issues
💬 Discussions: GitHub Discussions
💼 LinkedIn: Abhay Singh

Getting Help

Check existing documentation in this README
Search closed issues for similar problems
Open a new issue with detailed description
Provide error logs and steps to reproduce

📊 Project Status & Roadmap

Current Version: 1.0.0

Release Date: November 2025

Roadmap

✅ Completed (v1.0.0)

Core authentication system
Job posting and management
Application submission and tracking
User profiles with image upload
Employer analytics dashboard
Saved jobs functionality
Responsive UI design
RESTful API implementation

🚧 In Progress (v1.1.0)

Email notification system
Advanced search and filters
Performance optimizations
Enhanced analytics

📋 Planned (v2.0.0)

Real-time chat feature
Video interview integration
AI-powered job recommendations
Mobile application (React Native)
Resume builder tool
Company reviews and ratings
Interview scheduling system

⭐ Star this repository if you find it helpful!

🔗 Connect & Collaborate

Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.

📈 GitHub Stats

Made with ❤️ by Abhay Singh

Name		Name	Last commit message	Last commit date
Latest commit History 307 Commits
backend		backend
frontend		frontend
LICENSE		LICENSE
README.md		README.md

License

Abhay-0103/Job-Portal-Project

Folders and files

Latest commit

History

Repository files navigation

🎯 Job Portal

A Modern Full-Stack Job Management Platform

🚀 Quick Start

📋 Table of Contents

🌟 Overview

🎯 Project Goals

👥 Target Users

Key Highlights

✨ Features

For Job Seekers 👨‍💼

Job Discovery & Application

Profile & Preferences

User Experience

For Employers 🏢

Job Management

Applicant Management

Analytics & Insights

Company Profile

Common Features 🌐

Authentication & Security

Navigation & Layout

Technical Features

🛠 Tech Stack

Backend 🔧

Frontend 💻

Architecture & Design Patterns 🏗️

Development Tools 🛠️

📁 Project Structure

📊 File Count Summary

🚀 Installation

Prerequisites

Step 1: Clone the Repository

Step 2: Backend Setup

Step 3: Frontend Setup

Step 4: Access the Application

Quick Start Script (Optional)

🔐 Environment Variables

Backend (.env)

Frontend (.env) - Optional

💻 Usage

Development Mode

Backend Server

Frontend Application

Production Build

Backend

Frontend

Available Scripts

Backend Scripts

Frontend Scripts

Default Ports

📚 API Documentation

Base URL

Authentication Endpoints

Register New User

Login

Get Current User

Upload Image

Job Endpoints

Get All Jobs

Get Jobs by Employer

Get Job by ID

Create New Job (Employer Only)

Update Job (Employer Only)

Delete Job (Employer Only)

Toggle Job Status (Open/Closed)

Application Endpoints

Get User Applications

Submit Application

Get Application by ID

Update Application Status

Saved Jobs Endpoints

Get All Saved Jobs

Save a Job

Remove Saved Job