A modern, full-stack job portal built with the MERN stack—connecting job seekers with recruiters through an intuitive, animated, and responsive platform.
Features • Demo • Tech Stack • Getting Started • Contributing
Add screenshots or GIFs of your application here
|
|
- Secure Authentication - JWT-based login system with role-based access control
- Responsive Design - Seamless experience across mobile, tablet, and desktop
- Real-time Updates - Instant notifications for applications and job posts
- Cloud Storage - Profile images and resumes stored on Cloudinary
- Modern UI/UX - Beautiful interfaces powered by shadcn/ui and Framer Motion
⚛️ React.js - Component-based UI library
🎨 Tailwind CSS - Utility-first CSS framework
🎭 shadcn/ui - Accessible component library
✨ Framer Motion - Animation library
🧭 React Router - Client-side routing
🔌 Axios - HTTP client
🟢 Node.js - JavaScript runtime
⚡ Express.js - Web application framework
🍃 MongoDB - NoSQL database
📦 Mongoose - MongoDB ODM
🔑 JWT - Authentication tokens
☁️ Cloudinary - Media storage
next-role/
│
├── client/ # Frontend React application
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/ # Page components
│ │ ├── hooks/ # Custom React hooks
│ │ ├── utils/ # Helper functions
│ │ ├── redux/ # State management
│ │ └── App.jsx # Root component
│ └── package.json
│
├── server/ # Backend Express API
│ ├── controllers/ # Request handlers
│ ├── models/ # Database schemas
│ ├── routes/ # API endpoints
│ ├── middlewares/ # Auth & validation
│ ├── utils/ # Helper functions
│ └── index.js # Server entry point
│
└── README.md
Before you begin, ensure you have the following installed:
- Node.js (v14 or higher)
- MongoDB (local or MongoDB Atlas account)
- npm or yarn
1. Clone the repository
git clone https://github.com/p-thanks/Next-Role.git
cd Next-Role2. Setup Backend
cd server
npm installCreate a .env file in the server directory:
MONGODB_URI=your_mongodb_connection_string
PORT=8000
SECRET_KEY=your_jwt_secret_key
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_SECRET_KEY=your_cloudinary_secret_key
CLOUDINARY_NAME=your_cloudinary_cloud_name
NODE_ENV=development3. Setup Frontend
cd ../client
npm install4. Run the Application
Open two terminal windows:
# Terminal 1 - Start backend server
cd server
npm run dev# Terminal 2 - Start frontend
cd client
npm run dev5. Access the Application
- 🌐 Frontend:
http://localhost:5173 - 🔌 Backend API:
http://localhost:8000
graph LR
A[User] -->|Register/Login| B[Frontend]
B -->|Credentials| C[Backend API]
C -->|Validate| D[MongoDB]
D -->|User Data| C
C -->|JWT Token| B
B -->|Store Token| E[Local Storage]
B -->|Protected Routes| F[Access Dashboard]
- Users register or login with email and password
- Backend validates credentials and issues JWT token
- Token is stored securely on the client
- Protected routes verify token for access control
- Role-based permissions (Student/Recruiter) enforce authorization
The application uses shadcn/ui for consistent, accessible components:
- 📋 Forms - Input fields, textareas, and file uploads
- 🔘 Buttons - Primary, secondary, and outline variants
- 📊 Cards - Job listings and application cards
- 🗂️ Tables - Applicant management tables
- 🎭 Modals - Confirmation dialogs and forms
- 🎬 Animations - Smooth transitions with Framer Motion
Contributions are what make the open-source community amazing! Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
