GitHubHelp

sarojit049/job

★ 1Forks 0JavaScriptGitHub ↗Compare

Project website ↗

README

🚀 JobBoard Platform — MERN Stack Capstone

A production-ready, full-stack Job Board Platform built with the MERN stack (MongoDB, Express.js, React.js, Node.js). Features JWT authentication, role-based access control, Cloudinary file uploads, real-time status tracking, and a beautiful dark-mode UI.

📸 Screenshots

🏠 Home Page

Home

💼 Browse Jobs

Jobs

🔐 Login

Login

📝 Register

Register

👨💼 Employer Dashboard

Employer Dashboard

👨💻 Job Seeker Dashboard

Job Seeker Dashboard

➕ Create Job

Create Job

👤 Profile

Profile

✨ Features

Authentication

  • ✅ JWT Access + Refresh Tokens
  • ✅ Role-based Authorization (Employer / Job Seeker)
  • ✅ Persistent login with localStorage
  • ✅ Auto token refresh on expiry

For Employers

  • ✅ Post, edit, delete job listings
  • ✅ Toggle job active/inactive status
  • ✅ View all applicants per job
  • ✅ Update application status (Applied → Hired)
  • ✅ Dashboard with analytics & charts

For Job Seekers

  • ✅ Browse, search, filter, and sort jobs
  • ✅ Apply with resume (PDF) + cover letter
  • ✅ Save/unsave jobs
  • ✅ Track application status in real-time
  • ✅ Profile with completion tracker

UI/UX

  • ✅ Dark Mode (system preference + manual toggle)
  • ✅ Loading Skeletons
  • ✅ Toast Notifications
  • ✅ Responsive / Mobile-Friendly
  • ✅ Confirmation Dialogs
  • ✅ Pagination

🛠 Tech Stack

Layer Technology
Frontend React 18, Vite, Tailwind CSS, Axios, React Hook Form, React Hot Toast
Backend Node.js, Express.js, Mongoose
Database MongoDB Atlas
Auth JSON Web Tokens (JWT) + bcryptjs
File Upload Cloudinary + Multer
Testing Vitest, React Testing Library
Deployment Vercel (Client), Render (Server), MongoDB Atlas

📁 Project Structure

job-board-platform/
├── client/                          # React frontend (Vite)
│   ├── src/
│   │   ├── api/                     # Axios API functions
│   │   │   ├── axios.js             # Axios instance + interceptors
│   │   │   ├── auth.js
│   │   │   ├── jobs.js
│   │   │   ├── applications.js
│   │   │   └── dashboard.js
│   │   ├── context/                 # React Context
│   │   │   ├── AuthContext.jsx
│   │   │   └── ThemeContext.jsx
│   │   ├── components/              # Reusable UI components
│   │   │   ├── Navbar.jsx
│   │   │   ├── Footer.jsx
│   │   │   ├── JobCard.jsx
│   │   │   ├── SearchFilters.jsx
│   │   │   ├── StatsCard.jsx
│   │   │   ├── StatusBadge.jsx
│   │   │   ├── Pagination.jsx
│   │   │   ├── EmptyState.jsx
│   │   │   ├── ConfirmDialog.jsx
│   │   │   ├── Spinner.jsx
│   │   │   ├── ProtectedRoute.jsx
│   │   │   └── ErrorBoundary.jsx
│   │   ├── pages/                   # Page components
│   │   │   ├── Home.jsx
│   │   │   ├── Login.jsx
│   │   │   ├── Register.jsx
│   │   │   ├── Jobs.jsx
│   │   │   ├── JobDetails.jsx
│   │   │   ├── CreateJob.jsx
│   │   │   ├── EditJob.jsx
│   │   │   ├── Profile.jsx
│   │   │   ├── MyApplications.jsx
│   │   │   ├── EmployerDashboard.jsx
│   │   │   ├── JobSeekerDashboard.jsx
│   │   │   └── NotFound.jsx
│   │   ├── utils/helpers.js         # Utility functions
│   │   ├── tests/                   # Test files
│   │   ├── App.jsx                  # Router setup
│   │   ├── main.jsx                 # Entry point
│   │   └── index.css                # Global styles
│   ├── index.html
│   ├── vite.config.js
│   ├── tailwind.config.js
│   └── package.json
│
├── server/                          # Express backend
│   ├── src/
│   │   ├── config/
│   │   │   ├── db.js                # MongoDB connection
│   │   │   └── cloudinary.js        # Cloudinary setup + multer
│   │   ├── models/
│   │   │   ├── User.js
│   │   │   ├── Job.js
│   │   │   └── Application.js
│   │   ├── middleware/
│   │   │   ├── auth.js              # JWT middleware
│   │   │   └── errorHandler.js
│   │   ├── controllers/
│   │   │   ├── authController.js
│   │   │   ├── jobController.js
│   │   │   ├── applicationController.js
│   │   │   └── dashboardController.js
│   │   ├── routes/
│   │   │   ├── auth.js
│   │   │   ├── jobs.js
│   │   │   ├── applications.js
│   │   │   └── dashboard.js
│   │   └── utils/
│   │       ├── generateToken.js
│   │       └── apiFeatures.js
│   ├── server.js
│   └── package.json
│
├── package.json                     # Root (concurrently)
├── .env.example
├── .gitignore
└── README.md

🚀 Installation & Setup

Prerequisites

  • Node.js 18+
  • MongoDB Atlas account
  • Cloudinary account

1. Clone the repository

git clone https://github.com/yourusername/job-board-platform.git
cd job-board-platform

2. Install all dependencies

npm run install-all

3. Configure environment variables

Server — copy and fill in server/.env:

cp server/.env.example server/.env

Client — copy and fill in client/.env:

cp client/.env.example client/.env

4. Run in development mode

npm run dev

This starts both the server (http://localhost:5000) and client (http://localhost:5173) concurrently.

⚙️ Environment Variables

Server (server/.env)

Variable Description
NODE_ENV development or production
PORT Server port (default: 5000)
MONGO_URI MongoDB Atlas connection string
JWT_SECRET Secret for access tokens
JWT_REFRESH_SECRET Secret for refresh tokens
JWT_EXPIRE Access token expiry (e.g., 1h)
JWT_REFRESH_EXPIRE Refresh token expiry (e.g., 7d)
CLOUDINARY_CLOUD_NAME Your Cloudinary cloud name
CLOUDINARY_API_KEY Cloudinary API key
CLOUDINARY_API_SECRET Cloudinary API secret
CLIENT_URL Frontend URL for CORS

Client (client/.env)

Variable Description
VITE_API_URL Backend API base URL

📡 API Documentation

Authentication

Method Endpoint Access Description
POST /api/auth/register Public Register new user
POST /api/auth/login Public Login user
POST /api/auth/refresh Public Refresh access token
GET /api/auth/profile Private Get current user profile
PUT /api/auth/profile Private Update profile + uploads
PUT /api/auth/change-password Private Change password
PUT /api/auth/saved-jobs/:jobId Job Seeker Toggle save job

Jobs

Method Endpoint Access Description
GET /api/jobs Public List jobs (search/filter/sort/paginate)
GET /api/jobs/:id Public Get single job
POST /api/jobs Employer Create job
PUT /api/jobs/:id Employer (owner) Update job
DELETE /api/jobs/:id Employer (owner) Delete job
GET /api/jobs/employer/my-jobs Employer Get own jobs
PATCH /api/jobs/:id/toggle Employer (owner) Toggle active status

Applications

Method Endpoint Access Description
POST /api/applications Job Seeker Apply with resume
GET /api/applications Private Get applications (role-based)
GET /api/applications/:id Private Get single application
PUT /api/applications/:id Employer Update status
DELETE /api/applications/:id Job Seeker Withdraw application

Dashboard

Method Endpoint Access Description
GET /api/dashboard/employer Employer Full employer analytics
GET /api/dashboard/jobseeker Job Seeker Job seeker stats

🧪 Testing

Frontend tests

cd client
npm test          # Run tests in watch mode
npm run test:ui   # Open Vitest UI

Run all tests once

cd client && npm run test:coverage

🌐 Deployment

Frontend → Vercel

  1. Push to GitHub
  2. Import project in vercel.com
  3. Set Root Directory: client
  4. Add environment variable: VITE_API_URL=https://your-api.onrender.com/api
  5. Deploy!

Backend → Render

  1. Create a new Web Service on render.com
  2. Set Root Directory: server
  3. Build Command: npm install
  4. Start Command: node server.js
  5. Add all environment variables from server/.env
  6. Deploy!

Database → MongoDB Atlas

  1. Create cluster on mongodb.com/atlas
  2. Whitelist 0.0.0.0/0 for Render access
  3. Copy connection string to MONGO_URI

🔮 Future Improvements

  • Email notifications on application status change
  • Real-time chat between employer and applicant (Socket.io)
  • Advanced analytics with Chart.js / Recharts
  • Company profiles and reviews
  • Job recommendations via ML
  • Mobile app (React Native)
  • Admin panel for platform management
  • Stripe integration for premium job listings
  • Video interview scheduling

📄 License

MIT License © 2024

Built with ❤️ using the MERN Stack

Issues