This is the front-end application for the Human Resource Management System (HRMS), built with React. It provides the user interface for candidates, employers, and system staff to interact with the HRMS Backend API.
This project is a modern single-page application built with a robust set of tools and libraries:
-
Core:
-
UI & Styling:
Semantic UI React for the component library.
CSS for custom styling.
-
Forms & Data:
Axios for making API requests.
- Formik & Yup for efficient and validatable form building.
-
Notifications:
- React Toastify for user-friendly feedback and notifications.
- Role-Specific Dashboards: The UI adapts based on the logged-in user type (Candidate, Employer, or Staff), showing relevant navigation and actions.
- User Authentication: Secure registration and login flows for all user types.
- Job Listings with Filtering:
- View all active job advertisements.
- Filter jobs by City, Job Position, Work Place, and Work Time.
- Pagination for browsing through large sets of job ads.
- Comprehensive CV Management: Candidates can view and dynamically update their CVs through intuitive pop-up modals for each section:
- Profile Picture Upload (integrated with Cloudinary via the backend).
- Personal Biography.
- GitHub and LinkedIn profiles.
- Education History.
- Work Experience.
- Languages and proficiency levels.
- Technical skills and technologies.
- Employer-Specific Features:
- Create new job advertisements.
- Submit company profile information for updates, which enters a staff approval queue.
- Staff-Specific Features:
- View and approve/confirm pending job advertisements.
- View and approve pending employer profile updates.
- Job Ad Favorites: Candidates can add/remove job ads from a personal favorites list.
- Node.js (which includes npm)
- The HRMS Backend API must be running, as this front-end application depends on it for all data.
-
Clone the repository:
git clone https://github.com/your-username/hrms-front-end-main.git cd hrms-front-end-main -
Install NPM packages:
npm install
-
Configure API URL (Recommended): By default, all API requests in
src/services/are hardcoded tohttp://localhost:8080. For better configuration management, it is recommended to use an environment file.Create a file named
.envin the root of the project (hrms-front-end-main/) and add the following line:REACT_APP_API_URL=http://localhost:8080Then, update the service files to use this variable. For example, in
src/services/CityService.jsx:// Before getCitys(){ return axios.get("http://localhost:8080/city/getAll") } // After getCitys(){ return axios.get(`${process.env.REACT_APP_API_URL}/city/getAll`) }
In the project directory, you can run:
Runs the app in development mode. Open http://localhost:3000 to view it in the browser. The page will reload if you make edits.
Launches the test runner in interactive watch mode.
Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.
hrms-front-end-main/
├── public/
│ ├── index.html # The main HTML template
│ └── ...
├── src/
│ ├── layouts/ # Main layout components (Navi, Footer, Dashboard, etc.)
│ ├── pages/ # Page components routed in Dashboard.jsx
│ │ ├── popups/ # Modal components for updating CV sections
│ │ └── ...
│ ├── services/ # Axios services for making API calls
│ ├── store/ # Redux store configuration (actions, reducers)
│ ├── App.js # Root application component
│ └── index.js # Entry point of the application
├── package.json
└── README.md