HRM application built using React, Node.js, and MongoDB

Here is a basic HRM application built using React, Node.js, and MongoDB.

1. Frontend (React):

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [employees, setEmployees] = useState([]);
  useEffect(() => {
    axios.get('http://localhost:4000/employees')
      .then(res => {
        setEmployees(res.data);
      })
      .catch(err => {
        console.log(err);
      });
  }, []);

  return (
    <div>
      <h1>Employee List</h1>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Designation</th>
          </tr>
        </thead>
        <tbody>
          {employees.map(employee => (
            <tr key={employee._id}>
              <td>{employee.name}</td>
              <td>{employee.age}</td>
              <td>{employee.designation}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default App;

2- Backend (Node.js + Express + MongoDB):

const express = require('express');
const mongoose = require('mongoose');

const app = express();

mongoose.connect('mongodb://localhost:27017/hrm', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

const employeeSchema = new mongoose.Schema({
  name: String,
  age: Number,
  designation: String
});

const Employee = mongoose.model('Employee', employeeSchema);

app.get('/employees', (req, res) => {
  Employee.find({}, (err, employees) => {
    if (err) {
      console.log(err);
    } else {
      res.send(employees);
    }
  });
});

app.listen(4000, () => {
  console.log('Server started on http://localhost:4000');
});

This is a very basic HRM application and can be enhanced further as per the requirements.

Share on Facebook

Tweet

Follow us

Save